@font-face {
  font-family: "recital";
  src: url("../fonts/Recital-Regular.otf") format("opentype");
}

@font-face {
  font-family: "recital-italic";
  src: url("../fonts/Recital-Italic.otf") format("opentype");
}

@font-face {
  font-family: "recital-bold-italic";
  src: url("../fonts/Recital-Bold-Italic.otf") format("opentype");
}

.onlyImg {
  pointer-events: none;
}

.textCheckYear {
  font-size: 350% !important;
  font-family: "recital-italic";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 100%;
  color: #00327c;
}

@keyframes zoom-in {
  0% {
    transform: translateZ(-1000px);
    opacity: 0;
    filter: blur(3px);
    z-index: 0;
  }

  50% {
    transform: translateZ(0px);
    opacity: 1;
    filter: blur(0px);
    z-index: 1;
  }

  100% {
    transform: translateZ(1000px);
    opacity: 0;
    filter: blur(3px);
    z-index: 0;
  }
}

.special {
  position: fixed;
  font-family: "recital-italic";
  font-size: 3vw;
  white-space: nowrap;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.stuck-grid {
  block-size: 100svh;
  perspective: 1000px;
  transform-style: preserve-3d;

  display: grid;
  grid: repeat(4, 25dvh) / repeat(4, 25dvw);
  place-items: center;

  position: sticky;
  top: 0;

  overflow: clip;

  > .grid-item {
    transform-style: preserve-3d;

    font-size: 3vmin;
    font-weight: lighter;

    text-wrap: nowrap;

    @supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        animation: zoom-in linear both;
        animation-timeline: scroll(root block);
        will-change: transform, opacity, filter;
      }
    }

    label {
      cursor: pointer;
    }

    /* Hier definiere ich die Checkbox für mein img in der spezifischen Klasse! */

    .grid-item {
      position: relative;
    }

    .imgCheck {
      display: inline-block;
      position: relative;
      width: auto;
      height: 30vh;
    }

    .bigImg {
      height: auto;
      width: 60vw;
      object-fit: contain;
      pointer-events: none;
    }

    .hidden-content {
      position: absolute;
      top: 250%;
      left: 200%;
      transform: translateY(-50%) translateX(-50%);
    }

    input {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;

      & + div {
        display: none;
      }

      &:checked + div {
        display: block;
      }
    }

    input[type="checkbox"] ~ .hidden-content {
      display: none;
    }

    input[type="checkbox"]:checked ~ .hidden-content {
      display: block;
    }

    .img-styling {
      position: absolute;
    }

    /* Hier sind Positionen von Headlines, die reinfahren */

    .pos1 {
      top: 30vh;
      left: 40vw;
      height: fit-content;
    }

    .pos2 {
      top: -50vh;
      left: 0vw;
      height: fit-content;
    }

    .pos3 {
      top: 50vh;
      left: 0vw;
      width: auto;
      height: fit-content;
    }

    .pos4 {
      top: 20vh;
      left: 0;
      width: 20vw;
      height: fit-content;
    }

    .pos5 {
      top: -20vh;
      left: 30vw;
      width: 20vw;
      height: fit-content;
    }

    .pos6 {
      top: 20vh;
      left: 20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos7 {
      top: 20vh;
      left: -10vw;
      width: 20vw;
      height: fit-content;
    }

    .pos8 {
      top: -10vh;
      left: -10vw;
      width: 20vw;
      height: fit-content;
    }

    .pos9 {
      top: 30vh;
      left: 20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos10 {
      top: -20vh;
      left: -30vw;
      width: 20vw;
      height: fit-content;
    }

    .pos11 {
      top: 40vh;
      left: -20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos12 {
      top: -20vh;
      left: 20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos13 {
      top: -20vh;
      left: -60vw;
      width: 20vw;
      height: fit-content;
    }

    .pos14 {
      top: 20vh;
      left: 30vw;
      width: 20vw;
      height: fit-content;
    }

    .pos15 {
      top: -5vh;
      left: -40vw;
      width: 20vw;
      height: fit-content;
    }

    .pos16 {
      top: -50vh;
      left: 20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos17 {
      top: -30vh;
      left: 20vw;
      width: 20vw;
      height: fit-content;
    }

    .pos18 {
      top: 30vh;
      left: -15vw;
      width: 20vw;
      height: fit-content;
    }

    .pos19 {
      top: -40vh;
      left: -25vw;
      width: 20vw;
      height: fit-content;
    }
    .pos20 {
      top: 25vh;
      left: -10vw;
      width: 25vw;
      height: fit-content;
    }

    .pos21 {
      top: -35vh;
      left: -25vw;
      width: 20vw;
      height: fit-content;
    }

    .pos22 {
      top: 50vh;
      left: 25vw;
      width: 20vw;
      height: fit-content;
    }

    .pos23 {
      top: -50vh;
      left: -35vw;
      width: 20vw;
      height: fit-content;
    }

    .pos24 {
      top: 50vh;
      left: 25vw;
      width: 20vw;
      height: fit-content;
    }

    .pos25 {
      top: -15vh;
      left: -25vw;
      width: 20vw;
      height: fit-content;
    }

    img {
      width: auto;
      height: 30vh;
      object-fit: contain;
      pointer-events: none;
    }

    > b {
      font-size: 15vmin;
    }

    &:nth-of-type(1) {
      animation-range: 16% 26%;
    }
    &:nth-of-type(2) {
      animation-range: 18% 28%;
    }
    &:nth-of-type(3) {
      animation-range: 21% 31%;
    }
    &:nth-of-type(4) {
      animation-range: 23% 33%;
    }
    &:nth-of-type(5) {
      animation-range: 25% 36%;
    }
    &:nth-of-type(27) {
      animation-range: 25% 36%;
    }
    &:nth-of-type(6) {
      animation-range: 28% 39%;
    }
    &:nth-of-type(7) {
      animation-range: 30% 41%;
    }
    &:nth-of-type(32) {
      animation-range: 32% 43%;
    }
    &:nth-of-type(8) {
      animation-range: 33% 44%;
    }
    &:nth-of-type(9) {
      animation-range: 36% 47%;
    }
    &:nth-of-type(10) {
      animation-range: 39% 50%;
    }
    &:nth-of-type(28) {
      animation-range: 39% 50%;
    }
    &:nth-of-type(11) {
      animation-range: 43% 54%;
    }
    &:nth-of-type(12) {
      animation-range: 46% 58%;
    }
    &:nth-of-type(33) {
      animation-range: 46% 58%;
    }
    &:nth-of-type(13) {
      animation-range: 49% 61%;
    }
    &:nth-of-type(31) {
      animation-range: 50% 62%;
    }
    &:nth-of-type(14) {
      animation-range: 52% 65%;
    }
    &:nth-of-type(15) {
      animation-range: 55% 69%;
    }
    &:nth-of-type(29) {
      animation-range: 56% 70%;
    }
    &:nth-of-type(16) {
      animation-range: 58% 72%;
    }
    &:nth-of-type(17) {
      animation-range: 62% 76%;
    }
    &:nth-of-type(18) {
      animation-range: 65% 80%;
    }
    &:nth-of-type(34) {
      animation-range: 66% 81%;
    }
    &:nth-of-type(19) {
      animation-range: 69% 84%;
    }
    &:nth-of-type(20) {
      animation-range: 73% 88%;
    }
    &:nth-of-type(30) {
      animation-range: 75% 90%;
    }
    &:nth-of-type(21) {
      animation-range: 78% 93%;
    }
    &:nth-of-type(22) {
      animation-range: 83% 98%;
    }
    &:nth-of-type(23) {
      animation-range: 93% 99%;
    }
    &:nth-of-type(24) {
      animation-range: 95% 98%;
    }
    &:nth-of-type(25) {
      animation-range: 0% 15%;
    }
    &:nth-of-type(26) {
      animation-range: 94% 97%;
    }
        &:nth-of-type(35) {
      animation-range: 96% 100%;
    }

    @supports (animation-timeline: scroll()) {
      &:nth-of-type(1) {
        grid-area: 2 / 2;
      }
      &:nth-of-type(2) {
        grid-area: 3 / 2;
      }
      &:nth-of-type(3) {
        grid-area: 2 / 3;
      }
      &:nth-of-type(4) {
        grid-area: 3 / 3;
      }
      &:nth-of-type(5) {
        grid-area: 2 / 1;
      }
      &:nth-of-type(27) {
        grid-area: 2 / 3;
      }
      &:nth-of-type(6) {
        grid-area: 3 / 2;
      }
      &:nth-of-type(7) {
        grid-area: 1 / 2;
      }
      &:nth-of-type(8) {
        grid-area: 4 / 3;
      }
      &:nth-of-type(9) {
        grid-area: 2 / 2;
      }
      &:nth-of-type(10) {
        grid-area: 3 / 3;
      }
      &:nth-of-type(11) {
        grid-area: 1 / 3;
      }
      &:nth-of-type(12) {
        grid-area: 4 / 2;
      }
      &:nth-of-type(13) {
        grid-area: 2 / 4;
      }
      &:nth-of-type(14) {
        grid-area: 3 / 1;
      }
      &:nth-of-type(15) {
        grid-area: 1 / 4;
      }
      &:nth-of-type(16) {
        grid-area: 4 / 2;
      }
      &:nth-of-type(17) {
        grid-area: 3 / 2;
      }
      &:nth-of-type(18) {
        grid-area: 2 / 3;
      }
      &:nth-of-type(19) {
        grid-area: 3 / 3;
      }
      &:nth-of-type(20) {
        grid-area: 2 / 2;
      }
      &:nth-of-type(21) {
        grid-area: 4 / 3;
      }
      &:nth-of-type(22) {
        grid-area: 1 / 2;
      }
      &:nth-of-type(23) {
        grid-area: 3 / 3;
      }
      &:nth-of-type(24) {
        grid-area: 2 / 1;
      }
      &:nth-of-type(25) {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
      }
      &:nth-of-type(26) {
        grid-area: 2 / 3;
      }
      &:nth-of-type(27) {
        grid-area: 4 / 1;
      }
      &:nth-of-type(28) {
        grid-area: 3 / 1;
      }
      &:nth-of-type(29) {
        grid-area: 1 / 1;
      }
      &:nth-of-type(30) {
        grid-area: 1 / 4;
      }
      &:nth-of-type(31) {
        grid-area: 1 / 4;
      }
      &:nth-of-type(32) {
        grid-area: 1 / 4;
      }
      &:nth-of-type(33) {
        grid-area: 2 / 1;
      }
      &:nth-of-type(34) {
        grid-area: 2 / 1;
      }
      &:nth-of-type(35) {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
      }
    }
  }
}

@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 400vh;
    font-family: "recital";
    background-color: rgb(#e7e4e0);
  }
}

@media (max-width: 500px) {
  .pos1 {
    top: 30vh !important;
    left: 20vw !important;
  }

  .pos2 {
    top: -50vh !important;
    left: 20vw !important;
  }

  .pos3 {
    left: 10vw !important;
  }

  .pos4 {
    bottom: -120vh !important;
  }
  .pos7 {
    left: 20vw !important;
  }
  .pos12 {
    left: 0vw !important;
  }
  .pos15 {
    top: 50vw !important;
  }

  .pos15 {
    left: 20vw !important;
  }
  .pos20 {
    left: -5vw !important;
  }

  .pos21 {
    left: -15vw !important;
  }

  .pos22 {
    top: 50vh;
    left: 25vw;
    width: 20vw;
    height: auto;
  }

  .pos23 {
    left: -15vw !important;
  }
}