/** this links the Directors font to your CSS file, so you can reference it with your CSS**/
@font-face {
  font-family: 'The Directors';
  src: url('../assets/fonts/TheDirectorsItalic.woff2') format('woff2'),
    url('../assets/fonts/TheDirectorsItalic.woff') format('woff'),
    url('../assets/fonts/TheDirectorsItalic.ttf') format('truetype'),
    url('../assets/fonts/TheDirectorsItalic.svg#TheDirectorsItalic') format('svg');
  font-weight: lighter;
  font-style: normal;
  font-display: swap;
}

/* MARK: Body */
/** THIS SETS THE BASE FONT, FONT COLOUR, AND BACKGROUND COLOUR FOR THE WHOLE WEBSITE**/
body {
  font-size: 1.6rem;
  color: #075CFB;
  /* background: #CFC2E5 url("../assets/images/bg.gif") no-repeat 50% 0 fixed; */
  /* background-size: cover; */

  /* fixed = sticks to viewport */
  background-color: #c7c2c3;
  font-family: "Jost", sans-serif;
}

/**THE RULE BELOW SETS THE FONT FOR HEADERS **/
h1,
h2,
h3 {
  font-family: 'The Directors';
  font-weight: 200;
}

.bg-wrap {
  position: fixed;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  z-index: -2;
  /* behind content */
  overflow: hidden;
}

#bgVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* crops video like background-size: cover */
  /* z-index: -2; */
  /* behind everything */
  pointer-events: none;
  /* clicks pass through */

  -webkit-backface-visibility: hidden;
  transform: translate(-50%, -50%) translateZ(0);

  /* zoom in by 20% */
}


/**SETS THE SIZE FOR THE HAMBURGER ICON**/
#hamburger {
  width: 20px;
  height: 20px;
  padding: 2px;
}

/**SETS THE BACKGROUND IMAGE FOR THE HOME PAGE**/
#indexBodyContainer:after {
  /* background-image: url("../assets/images/bg.gif"); */
  /** <= the stuff in parentheses is what you change if you want to change the image. the stuff below just positions it **/
  /* content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 120vh;
  opacity: 1; */
  /** this sets the opacity. 1 is 100%. 0.4 is 40% **/
  /* background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  z-index: -1; */
}

.bodyContainer {
  position: relative;
  z-index: 0;
}

.body-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  /* behind page content, above body background */
  pointer-events: none;
  /* never block clicks */
}



/* #bodyContainer:after {

  background-image: url("../assets/images/bg.gif");
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 120vh;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  z-index: -1;

} */

/**STYLING THE NAVIGATION BAR**/
nav {
  background-color: #c4c0c1;;
  color: #085cfb;

  /** text colour **/
  margin: -1.6rem;
  font-family: 'The Directors', serif;
  font-weight: normal;
  font-size: 1.6rem;
  padding: 3.2rem;
  padding-left: 1.6rem;
}

nav ul {
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  list-style: none;
  margin: 0;
  margin-top: -1.6rem;
  padding: 0;
}

nav>ul>li {
  margin: 1.6rem 0;
}

nav a {
  color: #085cfb;
  text-decoration: none;
  /** this gets rid of the default underline for links**/
}

nav a:hover,
.selected {
  color: #FEFFDB;
}

nav p {
  color: #075CFB;
  margin-top: -1.5rem;
  margin-bottom: 3rem;
  font-size: 2.5rem;

}

header,
footer,
main,
body>section>section {
  padding: 1.6rem;
  /*1 rem = 10pt. this ^ makes it so there's 16pt of space between each of these containers and the content inside them*/
}

main {
  padding: 3.6rem;
}

header {
  text-align: center;
}

h1 {
  font-size: 10.0rem;
  letter-spacing: 8.5px;
}

header h1 {
  margin-top: -3rem;
}

.italic {
  font-style: italic;
}


/**MOBILE**/
@media (max-width: 480px) {
  h1 {
    font-size: 8rem;
    margin-bottom: 4rem;
  }

  .h1-lil-mobile {
    font-size: 5.0rem;
  }

  p,
  span,
  li,
  label,
  input {
    font-size: 1.4rem;
  }

  p {
    margin: 2.8rem;
  }

  #poem-gallery {
    max-width: 100vw;
  }

  .image {
    max-width: 95vw;
    height: 300px !important;
  }
}