html,
body {
  height: 100%;
	margin: 0;
	padding: 0;
}

body {
  font-size: 100.01%;
  min-height: 100%;
}

body {
  background-color: rgb(135, 112, 70);
  background-image: url('/wp-content/static/images/filme-von-quentin-tarantino/background.jpg');
  background-repeat: repeat-y;
  background-position: center;
  font-family: 'PT Serif', serif;
}

p {
  hyphens: auto;
  a {
    hyphens: none;
  }
}

a {
  color: #107FC9;
  text-decoration: none;
}

a:hover {
  color: #ff6600;
  text-decoration: underline;
}

.blogheader {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid #fff;
  display: flex;
  font-family: Helvetica, Arial, sans-serif;
  font-size: .9375rem;
  font-weight: 100;
  gap: .5em;
  padding: .5em .75em;
  div {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: #600;
    text-decoration: none;
  }
}

.page {
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) minmax(auto, 58.75rem) minmax(1.5rem, 1fr);
  header, .content, aside {
    grid-column: 2;
  }
  h1 {
    font-family: 'Ultra', serif;
    font-size:1.75rem;
    font-weight: 400;
    text-shadow: 1px 1px 0px #eee;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.content {
  background-color: #fff;
  border-radius: 10px;
  box-shadow:0px 5px 10px rgba(0,0,0,0.5);
  padding: 20px;
  margin-bottom: 40px;
}

section {
  margin: 0 0 20px;
}

.video-embed {
  position: relative;
    &[open]{
      .video-summary{
        visibility: hidden;
      }
    }
    & > .video-summary{
      list-style: none;
    }
}

.video-summary{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  place-items: center;
}

.video-playicon{
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  height: clamp(4rem, 5vw, 8rem);
  width: clamp(4rem, 5vw, 8rem);
  z-index: 1;
  filter: drop-shadow(6px 6px 15px rgba(0, 0, 0, 1));
  fill: white;
}

.video-thumbnail{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  aspect-ration: 16 / 9;
}


.video-content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 16 / 9;
  & > iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9;
  }
}

.prevnext {
  border-top: 1px solid #ccc;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 5px 20px;
  margin-top: 40px;
  padding: 20px 0;
  svg {
    fill: currentColor;
    height: 12px;
    width: 15px;
  }
  h3 {
    grid-column: 1 / -1;
    margin: 0;
  }
  & div {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .next {
    justify-self: end;
    text-align: right;
  }
}

.reservoir-dogs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: -20px -20px 20px;
  padding: 20px;

  .text-1 h2 {
    font-family: Arial-Black, "Arial Black", "Arial Black Standard", Arial, sans-serif;
    font-size: 2.4rem;
    margin-block: 0 1rem;
    text-transform: lowercase;
  }
  .image {
    margin: 0;
    img {
      height: auto;
      max-width: 100%;
    }
  }
  .image-1 {
    margin-top: -56px;
    & img {
      aspect-ratio: 630 / 464;
      display: block;
      margin: 0 auto;
    }
  }
  .image-2 {
    grid-column: 1/-1;
    grid-row: 3;
    margin: 0 -20px;
    padding: 0 0 20px;
    & img {
      aspect-ratio: 460 / 195;
      border: 10px solid #fff;
      box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
      transform: rotate(4deg);
      width: calc(100% - 20px);
    }
  }
}

.pulp-fiction {
  .pulp-fiction-header {
    background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/pulpfiction.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 940 / 390;
    width: 100%;
    h2 {
      height: 1px;
      overflow: hidden;
      position: absolute;
      top: env(safe-area-inset-top, 0);
      width: 1px;
    }
  }
  .text-1 p::first-letter {
    font-size: 6em;
    font-weight: 900;
    float: left;
    margin: 0.11em 0.05em 0 0;
  }
}

.jackie-brown {
  color: gold;
  background-color: #2b1600;
  margin: 0 -20px;
  padding: inherit;
  & h2 {
    & img {
      aspect-ratio: 300/141;
      display: block;
      margin: 0 auto;
      max-width: 400px;
    }
  }
  .video {
    iframe {
      width: 100%;
      height: auto;
    }
  }
}

.kill-bill {
  background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/killbill-blood.svg);
  background-repeat: no-repeat;
  background-position: 1px 300px;
  margin: 0 -20px;
  padding: 0 20px 70px;

  header {
    background-color: #ffc317;
    margin: 0px -20px 0;
  }
  h2 {
    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
    font-size: 2.8125rem;
    font-weight: 900;
    border-left: 80px solid #000;
    display: flex;
    margin: 0 0 0 80px;
    padding: 170px 20px 10px;
    text-align: center;
    text-transform: uppercase;
    span {
      align-self: end;
    }
  }
  .text  {
    text-shadow: 0 1px 1px #fff;
  }
}

.interlude {
  background-color: #091938;
  color: #fff;
  margin: 0 -20px 20px;
  padding: 20px;
}

.death-proof {
  padding-bottom: 40px;
  position: relative;
  z-index: 1;
  header {
    aspect-ratio: 460 / 91;
    background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/deathproof.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    h2 {
      height: 1px;
      overflow: hidden;
      position: absolute;
      top: env(safe-area-inset-top, 0);
      width: 1px;
    }
  }
  .text {
    text-shadow: 1px 1px 0px #eee;
  }
  .text::before {
    background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/deathproof-car.png);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.3;
    width: 100%;
    position: absolute;
    z-index: -1;
  }
  .text:hover::before {
    opacity: 0.5;
  }
}

.inglourious-basterds {
  .image {
    margin: 0;
    img {
      height: auto;
      max-width: 100%;
    }
  }

  .image-1 {
    & img {
      aspect-ratio: 300/458;
      display: block;
      margin: 0 auto;
    }
  }

  .image-2 {
    margin: 0 -20px;
    padding: 0 0 20px;
    & img {
      aspect-ratio: 460 / 195;
      border: 10px solid #fff;
      box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
      transform: rotate(-6deg);
      width: calc(100% - 20px);
    }
  }
}

.continued {
  font-family: 'Ultra', serif;
  font-size:1.75rem;
  font-weight: 400;
  margin: 20px 0;
  text-align: center;
  &::before {
    color: #600;
    content: "★★★";
    display: block;
  }
}

@media screen and (min-width: 36em) {
  .page {
    grid-template-columns: minmax(6vw, 1fr) minmax(auto, 58.75rem) minmax(6vw, 1fr);
  }
}

@media screen and (min-width: 41.25em) {
  .reservoir-dogs {
    & .image-2 {
      padding: 20px 0;
    }
  }
}

@media screen and (min-width: 56.25em) {
  .page {
    grid-template-columns: minmax(10vw, 1fr) minmax(auto, 58.75rem) minmax(10vw, 1fr);
    h1 {
      text-align: center;
    }
  }

  .reservoir-dogs {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    .image-1 {
      margin-top: 0;
    }
    .image-1 img {
      display: block;
      margin: 0 0 0 -11.5vw;
      width: 50vw;
      max-width: 500px;
    }
    .image-2 {
      grid-row: 2;
      grid-column: 2/-1;
      margin: 42px -80px 0 0;
      padding: 0 0 20px;
    }
  }

  .jackie-brown {
    border-radius: 10px;
    box-shadow:0px 5px 10px rgba(0,0,0,0.5);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr .5fr .5fr 1fr;
    grid-template-rows: auto auto auto;
    margin: 40px -60px 0;
    position: relative;
    transform: rotate(1.5deg);
    z-index: 2;
    & p {
      margin: 0;
    }
    .jackie-brown-header {
      align-content: end;
      grid-column: 1/1;
    }
    .text-1 {
      grid-column: 1/3;
      grid-row: 2/2;
    }
    .video {
      grid-column: 2/5;
      grid-row: 1/1;
    }
    .text-2 {
      grid-column: 1/3;
      grid-row: 3/3;
    }
    .text-3 {
      grid-column: 3/5;
      grid-row: 2/4;
    }
  }

  .kill-bill {
    background-position: 1px 300px;
    & header {
    margin-top: -20px;
    }
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 -20px;
  }
  .interlude {
    margin: 0;
  }
  .death-proof {
    padding: 20px 20px 60px 0;
    margin: 0;
  }

  .inglourious-basterds {
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    p {
      margin-top: 0;
    }
    header {
      grid-column: 1/4;
      grid-row: 1;
    }
    .image-1 {
      grid-column: 1/2;
      grid-row: 2 span;
    }
    .text-1, .image-2, .text-2 {
      grid-column: 2/4;
    }
  }

}

@media screen and (min-width: 63.75em) {
  .page header h1 {
    font-size: 3.5rem;
  }
  .reservoir-dogs {
    background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/blood.png);
    background-size: 50%;
    background-position: 100% 0;
    background-repeat: no-repeat;

    & .image-1 {
      margin-top: -70px;
    }
    & .image-1 img {
      margin: 0 0 0 -100px;
      max-width: 580px;
    }
    & .text {
      text-shadow: 1px 1px 0px #eee;
    }
    & .text-1 {
      align-content: end;
    }
    & .text-2 p {
      margin-top: 0;
    }
    & .image-2 {
      margin-top: 0px;
    }
  }
  .kill-bill {
    background-position: 0 558px;
    padding-bottom: 140px;
     & header {
       padding: 0;
       & h2 {
         background-image: url(/wp-content/static/images/filme-von-quentin-tarantino/bride.png);
         background-position: 34% 95%;
         background-repeat: no-repeat;
         background-size: 40%;

         display: flex;

         padding: 470px 20px 10px;
         span {
           align-self: end;
         }
       }
     }
  }
}

.comments {
  font-family: sans-serif;
  margin: 40px 0;
  padding: 0 20px;
  header {
    margin-bottom: 40px;
    h2 {
      font-family: Ultra, serif;
      font-size: 2rem;
      font-weight: 400;
    }
  }
  .allcomments {
    list-style: none;
    margin: 0;
    padding: 0;
    & > li {
      margin-bottom: 40px;
    }
  }
  .comment {
    display: grid;
    grid-template-columns: 150px 60px auto;
    gap: 20px;
    &:has(.image:empty) {
      grid-template-columns: 150px auto;
      & .image {
        display: none;
      }
    }
    & p {
      line-height: 1.4;
      margin-top: 0;
    }
  }
  .meta {
    text-align: right;
  }
}

@media screen and (max-width: 37.5em) {
  .allcomments .comment {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    .meta {
      grid-column: 2/2;
      text-align: left;
    }
    .image {
      grid-column: 1/2;
      grid-row: 1;
    }
    .comment-content {
      grid-column: 1/3;
    }
    &:has(.image:empty) {
      grid-template-columns: auto;
      & .image {
        display: none;
      }
      & .meta {
        grid-column: 1;
      }
    }


  }
}