/*  all the em measurements start from this setting
--------------------------------------------------------------------------------------- */
html {
  font-size: 16px;
}

/*  global styles to reset default values
--------------------------------------------------------------------------------------- */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
div,
ul,
li,
img,
video,
section,
figure,
figcaption,
main,
footer,
h1,
h2,
h3,
p,
a {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fbf0d4;
}

/*  this sets page width: 60em = 960px,  80 = 1280px, 90 = 1440px
--------------------------------------------------------------------------------------- */
.container {
  max-width: 100vw;
}
.container {
  margin: 0 auto;
  background: #fbf0d4;
}

/* My Fonts
--------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Chulapa Bold";
  src: url("fonts/Chulapa Bold Woff2 File/Chulapa Bold.woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat Medium";
  src: url("fonts/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat Bold";
  src: url("fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat ExtraBold";
  src: url("fonts/Montserrat-ExtraBold") format("woff2");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: Montserrat-Medium, Montserrat-Bold, sans-serif;
}
h1,
h2,
h3 {
  font-family: Chulapa Bold, serif;
  color: #d75028;
}
p,
p1 {
  font-family: Montserrat Medium, Montserrat-Bold, sans-serif;
  color: #a21e21;
}
figcaption {
  font-family: Montserrat Bold, sans-serif;
  color: #a21e21;
}

pt {
  font-family: Montserrat ExtraBold, sans-serif;
  color: #a21e21;
}

/*  top navigation section
--------------------------------------------------------------------------------------- */
nav {
  padding: 0rem 0rem 0rem 0rem;
  min-height: 2rem;
  border-bottom: 2px #fbf0d4 solid;
}
nav h1 {
  font-size: 1.75rem;
  margin-top: 1rem;
  margin-left: 3rem;
}
nav a {
  white-space: nowrap;
}

nav ul {
  list-style-type: none;
}
nav ul li {
  font-size: 1.75rem;
  display: inline-block;
  margin-right: 1.5rem;
}

.navbar {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #d75028;
  min-width: 100vw;
  min-height: 5vw;
}

.navbar h1 {
  list-style-type: none;
  padding: 0px;
  margin-top: 1rem;
  margin-left: 3rem;
}

.navbar ul {
  list-style-type: none;
  padding: 0px;
  margin-top: 1rem;
  margin-right: 3rem;
  font-size: 20px;
}

.navbar a {
  color: #fbf0d4;
}

/*  End of top navigation section
--------------------------------------------------------------------------------------- */

/*  main page title after top navigation
nav + h2 selects first <h2> after <nav>
--------------------------------------------------------------------------------------- */
nav + h2 {
  font-size: 2rem;
  line-height: 2.15rem;
  margin: 1rem 0.5rem 3rem;
}

/*  hero image
.container > figure selects all <figure> where parent is .container
--------------------------------------------------------------------------------------- */
.container > figure {
  margin-bottom: -2rem;
  margin-left: 0rem;
}

/*  main content: note padding on section
--------------------------------------------------------------------------------------- */
section {
  margin: 0;
  padding: 0 0.5rem 1.5rem;
}

section h3,
section div h3 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

section figure {
  margin-bottom: 1rem;
}

section figcaption {
  font-size: 1rem;
}

section div {
  margin-top: 3rem;
} 

/*  default paragraph styling
--------------------------------------------------------------------------------------- */
p {
  margin: 0 0 1rem 0;
  max-width: 29em;
} /* max-width sets line length */
p {
  font-size: 1rem;
  line-height: 1.375em;
}

pt {
  font-size: 1.5rem;
  line-height: 1.375em;
}
/* p { line-height: 2.0625rem; } */

/*  media defaults to force image & video width to parent element width
--------------------------------------------------------------------------------------- */
img {
  width: 100%;
  height: auto;
}

video {
  width: 1450px; width: 100%;
  margin-top: -3.375rem;
  margin-left: -158px;
  margin-right: 0px;
  padding: 0px;
  margin: 0;

}

.max {
  max-width: 100%;
} /* max-width can stop img element going bigger than its actual size */

/*  link styling
--------------------------------------------------------------------------------------- */
a {
  color: #fbf0d4;
  text-decoration: none;
}
a:visited {
  color: #d75028;
}
a:hover {
  color: #a21e21;
  background-color: #d75028;
  text-decoration: none}

a:active {
  color: #fbf0d4;}

.navbar a:visited {
  color: #fbf0d4;}

.navbar a:hover {
  color: #a21e21
  text-decoration: underline;}

.navbar a:active {
  color: #f8a682
}

.contact p {
  font-size: 2rem;
  text-align: center;}


/* 
IMPORTANT: media query - switches on grid layout if page width is wider than 768px
--------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /*  IMPORTANT: min-width:60em rule will stop the container from resizing  
60rem = 960px
90rem = 1440px
--------------------------------------------------------------------------------------- */
  .container {
    min-width: 60rem;
    min-width: 0;
  }

  .force-height {
    min-height: 100vh;
  }

  /*  top navigation grid
--------------------------------------------------------------------------------------- */
  nav {
    display: grid;
    grid-template-columns: 1fr auto;
    background: #eee;
    border-bottom: 0 #eee none;
  }

  nav h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    margin-top: 0;
  }

  nav ul {
    margin: 0;
  }
  nav ul li {
    font-size: 1.75rem;
    margin: 0 0 0 1.25rem;
  }

  /*  main page title after top navigation
--------------------------------------------------------------------------------------- */
  .container > h2 {
    font-size: 3rem;
    line-height: 1.15em;
    margin: 3rem auto 4rem;
    text-align: center;
  }

  /*  hero image
--------------------------------------------------------------------------------------- */
  h2 + figure {
    margin: 0;
    padding-bottom: 3rem;
  }
  h2 + figure img {
    display: block;
  }

  /*  default desktop section styles
--------------------------------------------------------------------------------------- */
  section {
    padding: 0 0.5rem 0rem;
  }

  section figure {
    margin: 0;
  }

  section h3 {
    margin-bottom: 0.5em;
  }

  /*  section default 12 column grid
--------------------------------------------------------------------------------------- */
  section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0.625rem; /*  .625% of 16 = 10, 0.625em = 10px ...  */
    grid-row-gap: 0;
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd hd hd hd"
      "fg dv dv dv dv dv dv dv dv dv dv dv";
  }

  section h3 {
    grid-area: hd;
  }
  section figure {
    grid-area: fg;
  }
  section div {
    grid-area: dv;
  }

  /*  simple 3 column grid
--------------------------------------------------------------------------------------- */
  section.three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2rem auto;
    grid-column-gap: 3rem;
    grid-row-gap: 0.5rem;
    grid-template-areas:
      "fg hd hd"
      "fg dv dv";
  }

  section.three h3 {
    grid-area: hd;
  }
  section.three figure {
    grid-area: fg;
  }
  section.three div {
    grid-area: dv;
  }

  section.three h3 {
    margin-top: -0.6rem;
  }
  section.three div {
    margin-top: 0;
  }

  /*  12 column grid with right hand image
--------------------------------------------------------------------------------------- */
  section.right {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-row-gap: 0;
    grid-row-gap: .7rem;
    grid-template-areas:
      "hd hd hd hd hd fg fg fg fg fg fg fg"
      "dv dv dv dv dv fg fg fg fg fg fg fg";
  }

  section.right h1 {
    font-size: 70px;
    margin-top: -3rem;
    margin-left: 7.5rem;
  }

  section.right h2 {
    grid-area: hd;
    font-size: 35px;
    margin-top: -3rem;
    margin-bottom: 1rem;
    margin-left: 7.5rem;
  }

  section.right h3 {
    grid-area: hd;
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-left: 7.5rem;
  }

  section.right p {
    grid-area: dv;
    font-size: 1.2rem;
    margin-top: 0rem;
    margin-left: 7.5rem;
  }

  section.right figure {
    grid-area: fg;
    margin-right: 7.5rem;
  }

  section.right div {
    grid-area: dv;
    margin-top: 0;
  }

  /* Start Grid 
  ---------------------------------------------------------------- */

  section.start {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-template-areas:
      ".. hd hd hd hd hd hd hd hd hd hd .."
      ".. d1 d1 d1 d1 d1 .. d2 d2 d2 d2 ..";
  }


  section.start div {
    grid-area: d1;
  }

  section.start h3 {
    grid-area: hd;
  }

  section.start div:nth-of-type(2) {
    grid-area: d2;
  }

  /* 3 column Grid with left hand image
  ---------------------------------------------------------------- */

  section.left {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(2rem, auto) auto;
    grid-template-areas:
      "fg fg fg fg fg fg hd hd hd hd hd hd"
      "fg fg fg fg fg fg dv dv dv dv dv dv";
  }

  section.left h2 {
    grid-area: hd;
    font-size: 6rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-right: 1rem;
    margin-left: -2rem;
  }

  section.left h3 {
    grid-area: hd;
    font-size: 6rem;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-left: -2rem;
  }

  section.left p {
    grid-area: dv;
    font-size: 2rem;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-left: -2rem;
  }

  section.left pt {
    grid-area: dv;
    font-size: 4rem;
    margin-top: 1rem;
    margin-right: 2rem;
    margin-left: -2rem;
  }

  section.left p1 {
    grid-area: dv;
    font-size: 2rem;
    margin-top: 2rem;
    margin-right: 1rem;
    margin-left: 1rem;
  }
  
  section.left figure {
    grid-area: fg;
    margin-left: -10px;
    size: 10px;
  }

  section.left div {
    grid-area: dv;
    margin-top: 0;
  }


  /*  wide right hand image spanning two columns
--------------------------------------------------------------------------------------- */
  section.wide {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "hd fg fg"
      "dv fg fg";
  }

  section.wide h3 {
    grid-area: hd;
  }
  section.wide figure {
    grid-area: fg;
  }
  section.wide div {
    grid-area: dv;
  }

  /*  intro
--------------------------------------------------------------------------------------- */
  section.intro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas: "dv dv dv";
  }

  section.intro h3 {
    grid-area: hd;
  }
  section.intro div {
    grid-area: dv;
  }

  section.intro div h3,
  section.intro div p {
    font-size: 2rem;
  }

  section.intro {
    margin-bottom: 4rem;
  }

  /*  images-two
--------------------------------------------------------------------------------------- */
  section.images-two {
    display: grid;
    margin-right: 7.5rem;
    margin-left: 7.5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:max-content (2);
    grid-column-gap: 0 rem;
    grid-row-gap: .7rem;
    grid-template-areas:
      "f1 f2"
      "f3 f4"
      "dv dv";
  }

  section.images-two h3 {
    grid-area: hd;
  }
  section.images-two figure {
    grid-area: f1;
  }
  section.images-two figure:nth-of-type(2) {
    grid-area: f2;
  }
  section.images-two div {
    grid-area: dv;
  }

  section.images-two div h3,
  section.images-two div p {
    font-size: 1.5rem;
  }

  /*  images-three
--------------------------------------------------------------------------------------- */
  section.images-three {
    display: grid;
    margin-left: 5rem;
    margin-right: 5rem;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "f1 f2 f3"
      "hd hd hd"
      "dv dv dv";
  }

  section.images-three h3 {
    grid-area: hd;
  }
  section.images-three figure {
    grid-area: f1;
  }
  section.images-three figure:nth-of-type(2) {
    grid-area: f2;
  }
  section.images-three figure:nth-of-type(3) {
    grid-area: f3;
  }
  section.images-three div {
    grid-area: dv;
  }

  section.images-three div h3,
  section.images-three div p {
    font-size: 1.5rem;
  }

  /*  images-three-plus
--------------------------------------------------------------------------------------- */
  section.images-three-plus {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-areas:
      "f1 f2 f3"
      "d1 d2 d3";
  }

  section.images-three-plus figure {
    grid-area: f1;
  }
  section.images-three-plus figure:nth-of-type(2) {
    grid-area: f2;
  }
  section.images-three-plus figure:nth-of-type(3) {
    grid-area: f3;
  }
  section.images-three-plus div {
    grid-area: d1;
  }
  section.images-three-plus div:nth-of-type(2) {
    grid-area: d2;
  }
  section.images-three-plus div:nth-of-type(3) {
    grid-area: d3;
  }

  section.images-three-plus {
    padding: 0 0 2rem;
  }

  section.images-three-plus div h3,
  section.images-three-plus div p {
    font-size: 1.5rem;
  }

  /* full width - note grid on figure not section
--------------------------------------------------------------------------------------- */
  section.full {
    display: block;
    padding: 1rem 0 0;
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }

  section.full figure {
    grid-area: auto;
    display: grid;
    margin-left: .5rem;
    margin-right: .5rem;
    grid-template-columns: 1fr;
    grid-gap: 0;
    grid-template-areas:
      "f1"
      "im";
  }

  section.full figure img {
    grid-area: im;
  }
  section.full figure figcaption {
    grid-area: f1;
    justify-self: center;
  }

  section.full {
    margin-bottom: 4rem;
  }
  section.full figure img {
    display: block;
  }
  section.full figcaption h3 {
    font-size: 3rem;
  }

  /* two columns
--------------------------------------------------------------------------------------- */
  section.two {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "fg hd"
      "fg dv";
  }

  /* two columns right image
--------------------------------------------------------------------------------------- */
  section.two-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(2.5rem, auto);
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
    grid-template-areas:
      "hd fg"
      "dv fg";
  }

  /* pull quote
--------------------------------------------------------------------------------------- */
  section.pull {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-template-areas: "dv";
  }

  section.pull {
    margin-bottom: 4rem;
  }

  .pull p {
    font-size: 2rem;
  }

  /* out of background
--------------------------------------------------------------------------------------- */
  section.colourbox {
    padding: 3rem;
    margin-bottom: 0rem;
    margin-top: -4rem;
  }

  .orange {
    background: #fbf0d4;
  }

  .white {
    background: #f8a682;
  }

  /*  custom section for about page
--------------------------------------------------------------------------------------- */
section.about {
	display: grid;
  margin-left: 7.5rem;
  margin-right: 7.5rem;
	grid-template-columns: minmax(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 1.5rem;
	grid-row-gap: 0;
	grid-template-areas:
	"dv dv dv dv dv dv dv fg fg fg fg fg"
  "dv dv dv dv dv dv dv fg fg fg fg fg";
	}

  /*  section.video grid
--------------------------------------------------------------------------------------- */
  section.video {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0;
    background: transparent;
    grid-template-areas:
      "v1 v1 v1 v1"
      "t2 t2 t2 t2";
  }

  section.video figure {
    grid-area: v1;
  }
  section.video div {
    grid-area: t2;
  }

  section.video figure {
    padding: 0;
  }
  section.video div {
    background: transparent;
  }
  section.video p {
    max-width: 32rem;
    color: #777;
  }
  section.video h3 {
    padding-top: 1rem;
  }

  /*  home page auto grid
--------------------------------------------------------------------------------------- */
  section.home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "h1 h1 h1"
      "h2 h3 h4";
  }

  section.home {
    padding: 0;
  }

  section.home figure.one {
    grid-area: h1;
  }
  section.home figure.two {
    grid-area: h2;
  }
  section.home figure.three {
    grid-area: h3;
  }
  section.home figure.four {
    grid-area: h4;
  }

<style>
  .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px;
  max-width: 450px; 
  margin: 50px auto; 
  padding: 10px; 
}

.grid-container img {
  width: 100%;
  height: auto; 
  border-radius: 10px; 

</style>

  /*  projects page auto grid
--------------------------------------------------------------------------------------- */
  section.projects {
    display: grid;
    grid-template-columns: 6fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "f1 f1 f1 f2 f2 f2"
      "f3 f3 f3 f4 f4 f4";
  }

  .projects figure.one {
    grid-area: f1;
  }
  .projects figure.two {
    grid-area: f2;
  }
  .projects figure.three {
    grid-area: f3;
  }
  .projects figure.four {
    grid-area: f4;
  }

  /*  project page reflection section
--------------------------------------------------------------------------------------- */
  section.reflection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
    grid-template-areas:
      "rh rh"
      "d1 d2";
  }

  section.reflection h3 {
    grid-area: rh;
  }
  section.reflection div {
    grid-area: d1;
  }
  section.reflection div.two {
    grid-area: d2;
  }

  section.reflection div p a {
    display: block;
  }
  
} /* end 768px media query */

/*  for big screens - currently just for testing
--------------------------------------------------------------------------------------- */
@media (min-width: 18000px) {
  html {
    font-size: 24px;
  }
}

/*  Home Page
----------------------------------------------------------------------------
/* Footer */

footer {
  text-align: center;
  margin-bottom: 0rem;
  padding: 0px;
  background-color:#fbf0d4;
  color: #d75028 ;
  position:relative;
}

html {
  scroll-behavior: smooth;
}

.back-to-top {
  display: block; 
  text-align: center;
  font-size: 20px;
  padding: 10px 15px;
  background-color: #fbf0d4; 
  color: #d75028;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  width: 140px;
  margin: 20px auto;
  
}

.back-to-top:hover {
  color: #a21e21;
  background-color: #fbf0d4;
  text-decoration: underline;
}

.tile pattern {
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0px;
  background: url('image/Tile\ Footer\ PNG-05.png') repeat-x;
}


.pdf-button {
  display: block;
  font-family: Chulapa Bold, serif;
  text-align: right;
  margin-left: 30rem;
  font-size: 25px;
  padding: 10px 15px;
  color: #d75028;
  text-decoration: none;
  border-radius: 5px;
  width: 700px;
}

.pdf-button:hover {
  background-color: #a21e21;
  background-color: #fbf0d4;
  text-decoration: underline;
}

/*  About Me Page
----------------------------------------------------------------------------
/* About Me Section */

about {
  padding: 50px;
  text-align: center;
}

.about-content {
  display:inline-block;
  align-items: center;
  max-width: 953px;
  margin-top: 5rem;
  margin-left: -486px;
  border-radius: 10px;
}

.about-content img {
  width: 200px;
  margin-top: 16rem;
  margin-right: 1px;
  border-radius: 0px;
}

.about-content h1 {
  font-size: 80px;
  margin-top: -4.5rem;
  margin-left: 12.5px;
  margin-bottom: 2rem;
}

.about-content p {
  font-size: 20px;
  margin-top: 16rem;
  margin-left: 1px;
  border-radius: 10px;
  max-width: 40em;
}


.fan-tile {

}

h2 {
  margin-top: 10px; 
}

.about-content {
  display: grid;
  align-items:start;
  gap: 20px;
}

.about-content p {
  margin: 0; 
}

.about-content img {
  max-width: 200px; 
  height: auto;
}

/*  Contact Page
----------------------------------------------------------------------------
/* Contact */
.contact {
  padding: 50px;
  text-align: left;
}

.contact-content {
  display:grid;
  align-items:left;
  max-width: 700px;
  margin-top: 0rem;
  margin-left: 1px;
  border-radius: 10px;
  text-align: left;
}

.contact-content img {
  width: 200px;
  margin-top: 0rem;
  margin-right: 1px;
  border-radius: 0px;
}

.contact-content h1 {
  font-size: 80px;
  margin-top: 0rem;
  margin-left: 1px;
  text-align: left;
}

.contact-content h2 {
  font-size: 50px;
  margin-top: 4rem;
  margin-left: 1px;
  text-align: left;
}

.contact-content p {
  font-size: 20px;
  margin-top: 0rem;
  margin-left: 1px;
  border-radius: 10px;
}

.contact-link {
  display:contents 
  text-align: left;
  font-size: 20px;
  padding: 10px 15px;
  background-color: #fbf0d4; 
  color: #d75028;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  width: 120px;
  margin: 20px 0;
}

.contact-link:hover {
  color: #a21e21;
  background-color: #fbf0d4;
  text-decoration: underline;
}

/*  Projects Page
----------------------------------------------------------------------------
/* Projects */
section.projects { padding: 0; }
	
	section.projects {
		grid-template-areas:none;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
		grid-gap: 0.8em;
		grid-row-gap: 0.8em;
	}
	
	.projects figure { grid-area: auto; background: #f9f0ef; margin:0; }
	
	/* grid applied to anchor */
	.projects figure a {
		display:grid;
		grid-template-rows: 45% auto;
		grid-template-areas:
		"im"
		"im"
    }
    
    .projects figure * { 
      grid-column: 1;
      margin-right: 1.5rem;
      margin-left: 1.5rem; 
    }
    
	  .projects figure img { 
      grid-area: im;
      margin-right: 1.5rem;
      margin-left: 1.5rem;
    }
	
	.projects figure img { filter: opacity(1); }
	.projects figure:hover img { filter: opacity(0.2); transition: 0.3s;}
	
	.projects figure figcaption {
		grid-row: 2;
		padding-left: 0rem;
    margin-left: 1.5rem;
		z-index: 100;
	}


/*  Web Design Page
----------------------------------------------------------------------------
/* Web Page Content */
.web {
  padding: 50px;
  text-align: left;
}

.web-content {
  display: grid;
  align-items:left;
  max-width: 700px;
  margin-top: 0rem;
  margin-left: 1px;
  margin-right: 3rem;
  border-radius: 10px;
  text-align: left;
}

.web-content img {
  width: 200px;
  margin-top: 0rem;
  margin-right: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
}

.web-content h1 {
  font-size: 52px;
  margin-top: -1.5rem;
  margin-left: 1px;
  margin-bottom: 1rem;
  text-align: left;
}

.web-content h2 {
  font-size: 35px;
  margin-top: 0;
  margin-left: 1px;
  margin-bottom: 1rem;
  text-align: left;
}

.web-content p {
  font-size: 1.2rem;
  margin-top: 0rem;
  margin-left: 1px;
  border-radius: 10px;
}

 .web-content p2 {
    font-size: 1.2rem;
    margin-top: 0rem;
    margin-right: 1px;
    border-radius: 10px;
  }

.web-link {
  display:contents 
  text-align: left;
  font-size: 20px;
  padding: 10px 15px;
  background-color: #fbf0d4; 
  color: #d75028;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  width: 120px;
  margin: 20px 0;
}

.web-link:hover {
  color: #a21e21;
  background-color: #fbf0d4;
  text-decoration: underline;
}

.project-intro-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 110px;
    padding-right: 50px;
    padding-bottom: 70px;
}

.project-intro-grid .tags{
    margin: auto;
    display: inline;  
    text-align: right;
  
}
.project-intro-grid .tags ul li /* right side of grid - rounded border tags*/{
    font-size: 1rem; 
    font-family: Poppins;
    display: inline; /* makes the list horizontal*/
    border-radius: 40px; /*how rounded the corners are */
    border: 1.5px solid #191919;
    width: fit-content;
    padding: 7px;
}
	
/* Hero Section */
----------------------------------------------------------------------------

.hero {
  height: 100vh; 
  background-image: url('your-image.jpg');
  background-size: cover; 
  background-position: center; 
  display: grid;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.hero-content {
  max-width: 600px;
  padding: 0;
}

.hero-content img{
  width: 1450px;
  margin-top: -3.375rem;
  margin-left: -158px;
  margin-right: 0px;
  padding: 0px;

}

/* Project Images */
----------------------------------------------------------------------------
section.images-two {
  display: grid;
  margin-right: 3rem;
  margin-left: 3rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:max-content (2);
  grid-column-gap: 0 rem;
  grid-row-gap: .7rem;
  grid-template-areas:
    "f1 f2"
    "f3 f4"
    "dv dv";
}

 /* Left Hand Images
--------------------------------------------------------------------------------------- */
section.image-left {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(2rem, auto) auto;
  grid-column-gap: 0 rem;
  grid-row-gap: .7rem;
  grid-template-areas:
  ".. fg fg fg fg fg fg hd hd hd hd hd" 
  ".. fg fg fg fg fg fg dv dv dv dv dv";

  .image-left {
    display:flex;
    align-items: left;
    flex-direction: column;
    max-width: 700px;
    margin-top: 0rem;
    margin-left: 15px;
    margin-right: 0rem;
    border-radius: 10px;
    text-align: left;
  }

  .image-left figure {
    grid-area: fg;
    margin-left: 7.5rem;
  }
  
  .image-left h1 {
    font-size: 52px;
    margin-top: -1.5rem;
    margin-left: 1px;
    margin-bottom: 1rem;
    text-align: left;
  }
  
  .image-left h2 {
    grid-area: hd;
    font-size: 35px;
    margin-top: -3rem;
    margin-bottom: 1rem;
    margin-right: 7.5rem;
    text-align: left;
  }
  
  .image-left p {
    grid-area: dv;
    font-size: 1.2rem;
    margin-top: 0rem;
    margin-right: 7.5rem;
    border-radius: 10px;
  }

  .image-left div {
    grid-area: dv;
    margin-top: 0;
  }

  .image-left figcaption {
    grid-area: dv;
    font-size: 1.2rem;
    margin-top: 0rem;
    margin-left: 7.5rem;
    border-radius: 10px;
  }



/* Big Section */
----------------------------------------------------------------------------
.section-video-container {
  grid-area: dv;
  width: 80%;
  max-width: 800px;
  text-align: center;
  margin-left: 7.5rem;
  margin-right: 7.5rem;
}

.section-video {
  width: 1187.5px;
  margin-top: -3.375rem;
  margin-left: 117.5px;
  margin-right: 0px;
  padding: 0px;
}

  /*  12 column grid with right hand image
--------------------------------------------------------------------------------------- */
section.small-image-right {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(2rem, auto) auto;
  grid-row-gap: 0;
  grid-row-gap: .7rem;
  grid-template-areas:
    "hd hd hd hd hd hd hd fg fg fg fg fg"
    "dv dv dv dv dv dv dv fg fg fg fg fg";
}

section.small-image-right h1 {
  font-size: 70px;
  margin-top: -3rem;
  margin-left: 7.5rem;
}

section.small-image-right h2 {
  grid-area: hd;
  font-size: 35px;
  margin-top: -3rem;
  margin-bottom: 1rem;
  margin-left: 7.5rem;
}

section.small-image-right h3 {
  grid-area: hd;
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-left: 7.5rem;
}

section.small-image-right p {
  grid-area: dv;
  font-size: 1.2rem;
  margin-top: 0rem;
  margin-left: 7.5rem;
}

section.small-image-right figure {
  grid-area: fg;
  margin-right: 7.5rem;
}

section.small-image-right div {
  grid-area: dv;
  margin-top: 0;
}


 /* Accordion Bibliography Grid 
  ------------------------------------------------------------------------------------- */
  
  .accordion {
    cursor: pointer;
    margin: 0 auto;
    width: 100%;
    height: 3rem;
    text-align: center;
    border: none;
    padding: 0.6rem 0.4rem 0.6rem 0.4rem;
    transition: 0.4s;
  }

.accordion-button {
    background-color: #fbf0d4;
    color: #d75028;
    padding: 18px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s;
}

.accordion-button:hover {
    background-color: #a21e21;
}

.panel {
    padding: 0 15px;
    background-color: #fbf0d4;
    display: block;
    overflow: hidden;
    font-size: 10px;
    color: #a21e21;
}

details[open] .panel {
    padding: 10px 15px;
    color: #a21e21;
}

details > .panel {
    display: none;
    color: #a21e21;
}

details[open] > .panel {
    display: block;
    color: #a21e21;
}