:root {
  /* font-family: "Old Standard TT", "EB Garamond", Garamond, Georgia, serif; */
  font-family: "EB Garamond", Garamond, Georgia, serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
* {
  margin: 0;
  padding: 0;
}
}

body {
  display: flex;
  flex-wrap: wrap;
  color: white;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-image: url(https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg); */
  background-image: url("../img/evil-poster-1706x2560.jpg");

  background-color: rgba(15, 15, 15, 78%);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position-x: center;
  z-index: -1;
}

section {
  background-color: chocolate;
  background-color: #000b;
  width: 100%;
  margin-bottom: 7rem;
  margin-bottom: 5rem;
}
section h2 {
  /* text-align: center; */
  color: salmon;
  font-size: 2rem;
  font-weight: 100;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 2rem 0 .5em 0;
  margin-left: 20%;
  width: 50%;
}
section p {
  font-size: 1.6rem;
  line-height: 1.2em;
  margin-bottom: 1.5rem;
  color: lightgray;
}

section.poster2 {
  background-color: #0009;
  display: flex;
  justify-content: center;
  /* padding: 1rem; */
  margin-bottom: 2rem;
}
.poster-holder {
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}
section.poster2 img {
  /* width: 100%; */
  height: 100vh;
}

section.poster {
  height: 100vh;
  background-image: url("../img/evil-poster-1706x2560_no-cred2.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  margin-bottom: 5rem;
}

.slogan-m {
  display: none;
}
.slogan {
  display: flex;
  justify-content: center;
  background: none;
  margin-bottom: 4rem;
}
.slogan blockquote {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.5em;
  letter-spacing: .5rem;
  /* font-style: italic; */
  text-align: center;
  text-transform: uppercase;
}
.quotemark {
  position: relative;
  font-size: 5rem;
  top: 2.2rem;
  padding: 0.5rem;
  color: salmon;
  color: #ccc;
}
.summary, .crew {
  margin: auto 20%;
  padding-bottom: 4rem;
}

.credits {
  padding: 2rem 0 4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.credits > img {
  width: 80%;
  margin: 0 10%;
  margin-bottom: 1rem;
}
.credits h2 {
  font-size: 1.6em;
  padding: 0;
  color: #a8d48c;
}
.credits .crew-holder {
  margin-top: 1em;
  width: 40%;
}
.crew-holder h2 {
  margin-left: 10%;
}
.crew {
  padding-bottom: 2em;
  margin-left: 10%;
}

.crew p {
  font-size: 1.3em;
  line-height: 1.4em;
  margin: 0.5em;

}

/* ---------------  MEDIA QUERY: 639 --------------------- */
@media screen and (max-width: 639px) {

section.poster2 {
  margin-bottom: 1rem;
}
section.poster2 img {
  width: 100%;
  height: auto;
}
.slogan-m {
  display: flex;
  justify-content: center;
  background: none;
  margin-bottom: 2rem;
}
.slogan-m blockquote {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.5em;
  letter-spacing: .3rem;
  /* font-style: italic; */
  text-align: center;
  text-transform: uppercase;
  padding: 0.5rem;
}
.slogan-m span {
  display: block;
  margin-bottom: -.8em;
}
  .credits {
    display: block;
  }
  .credits .crew-holder {
    width: auto;
  }
  section {
    background-color: #0009;
  }
  section h2 {
    margin: 1rem;
  }
  section p {
  font-size: 1.3rem;
  line-height: 1.2em;
  margin-bottom: 1.5rem;
  color: lightgray;
}
  section.poster {
    background-image: url("../img/evil-poster-1706x2560_orig.jpg");
    background-size: 120%;
    /* background-size: contain; */
    background-repeat: no-repeat;
    background-position-x: center;
    margin-bottom: 4rem;
  }
  section.slogan {
    display: none;
  }
  .summary, .crew {
  margin: auto 1rem;
  padding-bottom: 2rem;
  }
  section.credits {
    font-size: 0.75rem;
  }
  section.credits .crew {
    padding-bottom: 1em;
  }
}
/* ---------------  END MEDIA QUERY --------------------- */   

.video-holder-responsive {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.video-holder-responsive > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}

.footer-image {
  /* width: 100%; */
  margin-bottom: 0;
  /* margin-top: 80vh; */
}
.footer-image img {
  width: 100%;
}