-8.times do
 %div
  %label

$t: rgba(255, 255, 255, 0.001);

html {
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: mandatory;
  &::-webkit-scrollbar {
    display: none;
  }
}

body {
  height: 800vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  --center: translate(-50%, -50%);
  div {
    position: relative;
    transform-style: preserve-3d;
    label {
      position: absolute;
      font: "Futura", sans-serif;
      font-size: 12px;
      bottom: 10px;
      right: 10px;
    }
    &:before,
    &:after {
      content: "";
      position: absolute;
      transform-style: preserve-3d;
    }
  }
}

div:nth-of-type(1) {
  //fall
  background: radial-gradient(
    circle at bottom,
    lighten(#b7a476, 15%),
    #b7a476 150%
  );
  perspective: 200vmin;
  overflow: hidden;
  label {
    &:before {
      content: "Fall";
    }
  }
  &:before,
  &:after {
    --r: #da3743;
    --r-dark: #85483b;
    --r-light: #b8442b;
    width: 170px;
    height: 100px;
    background: linear-gradient(
          to right,
          var(--r-dark) 40px,
          var(--r-light) 20px
        )
        0px 100% / 100% 1px no-repeat,
      radial-gradient(circle at center, var(--r) 35px, $t 25px) -20px 30px / 100%
        no-repeat,
      linear-gradient(30deg, var(--r) 42.5px, $t 25px) 87.5px 0px / 75% 100%
        no-repeat,
      linear-gradient(-25deg, var(--r) 42.5px, $t 25px) 55px -25px / 40px 100% no-repeat,
      linear-gradient(-10deg, var(--r) 42.5px, $t 25px) 80px -5px / 40px 100% no-repeat;
    -webkit-box-reflect: below;
    top: -200px;
    left: calc(50% - 85px);
    animation: falling 8s ease-out infinite,
      waving 2s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
    --scale: 1;
    @keyframes falling {
      from {
        translate: 0 0;
      }
      to {
        translate: 0 calc(100vh + 200px);
      }
    }
    @keyframes waving {
      from {
        rotate: 20deg;
        transform: rotateX(-140deg) translateZ(200px) scaleX(var(--scale));
      }
      to {
        rotate: -20deg;
        transform: rotateX(0deg) translateZ(200px) scaleX(var(--scale));
      }
    }
  }
  &:after {
    --r: #deb84d;
    --r-light: #bc9c44;
    z-index: 9;
    --scale: -1;

    animation: falling 6s ease-out infinite,
      waving 2s ease-in-out infinite alternate;
    animation-delay: -4s, -2s;
  }
}

div:nth-of-type(2) {
  // Impossible
  background: #000;
  label {
    &:before {
      content: "Impossible";
      color: #fff;
    }
  }
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    background: linear-gradient(62deg, #444 22px, $t 15px) 128px 88px / 100%
        52px no-repeat,
      linear-gradient(
        to bottom,
        #000 15px,
        $t 15px,
        $t calc(100% - 15px),
        #000 calc(100% - 15px)
      ),
      linear-gradient(60deg, #000 30px, $t 10px),
      linear-gradient(-61deg, #000 30px, $t 30px),
      linear-gradient(119deg, #000 120px, $t 50px),
      linear-gradient(-119deg, #000 120px, $t 50px),
      linear-gradient(-119deg, #ccc 160px, $t 50px) 50% 0px / 100%
        calc(100% - 55px) no-repeat,
      linear-gradient(61deg, #ccc 100px, $t 50px) 140px 205px / 160px 40px
        no-repeat,
      linear-gradient(-61deg, #ccc 100px, $t 50px) 50px 205px / 160px 40px
        no-repeat,
      linear-gradient(-61deg, #444 50px, #444 275px, $t 275px) -60px 245px / 400px
        40px no-repeat,
      linear-gradient(-62deg, #000 30px, $t 10px) 82.5px 50% / 70px 107.5px
        no-repeat,
      linear-gradient(61deg, #000 30px, $t 10px) 152.5px 50% / 70px 107.5px
        no-repeat,
      linear-gradient(118deg, $t 50px, #444 50px, #444 93px, $t 75px) 47px 140px /
        100% 150px no-repeat,
      linear-gradient(-61deg, #444 25px, $t 10px) -171px 96px / 100% 50px no-repeat;
    z-index: 9;
  }
  &:after {
    background: linear-gradient(
      to bottom,
      #4158d0 20%,
      #c850c0,
      #ffcc70,
      #c850c0,
      #4158d0 80%
    );
    background-size: 100% 600%;
    animation: bgshift 2s linear infinite;
    box-shadow: inset 0 0 0 2px #000, 0 0 0 2px #000;
    @keyframes bgshift {
      from {
        background-position: 50% 0%;
      }
      to {
        background-position: 50% 100%;
      }
    }

    z-index: 0;
  }
}

div:nth-of-type(3) {
  background: #76c5d6;
  label {
    &:before {
      content: "Artist";
    }
  }
  &:before {
    width: 150px;
    height: 150px;
    background: radial-gradient(
          ellipse at bottom,
          $t 10px,
          #845431 10px,
          #845431 15px,
          $t 12px
        )
        calc(50% - 40px) 10px / 80px 20px no-repeat,
      radial-gradient(
          ellipse at bottom,
          $t 10px,
          #845431 10px,
          #845431 15px,
          $t 12px
        )
        calc(50% + 40px) 10px / 80px 20px no-repeat,
      radial-gradient(circle at top, darken(#ffecde, 5%) 10px, $t 10px) 50% 70px,
      radial-gradient(ellipse at center, #000 5px, $t 5px) 25px 25px / 25px 40px
        no-repeat,
      radial-gradient(ellipse at center, #000 5px, $t 5px) 100px 25px / 25px
        40px no-repeat,
      radial-gradient(
          circle at top,
          #fff 15px,
          darken(#ffecde, 7.5%) 15px,
          darken(#ffecde, 5%) 22px,
          $t 20px
        )
        50% 100px,
      radial-gradient(circle at bottom, #845431 80px, $t 50px),
      darken(#ffecde, 5%);
    left: calc(50% - 75px);
    top: calc(50% - 75px);
    border-radius: 100px 100px 100px 100px / 65px 65px 100px 100px;
    box-shadow: 0 -65px 0 35px #845431, 60px 0 0 -42px darken(#ffecde, 10%),
      -60px 0 0 -42px darken(#ffecde, 10%), inset 0px -20px 0 #845431,
      0 50px 0 -30px darken(#ffecde, 10%), 0 80px 0 -40px darken(#efefef, 10%);
  }
  &:after {
    width: 40px;
    height: 100px;
    background: linear-gradient(
      -35deg,
      $t 50px,
      #efefef 50px,
      #efefef 75px,
      $t 50px
    );
    left: calc(50% + 2.5px);
    top: calc(50% + 55px);
    z-index: 9;
    -webkit-box-reflect: left 5px;
  }
}

div:nth-of-type(4) {
  // crawl
  label {
    &:before {
      content: "Crawl";
    }
  }
  background: #f7eddb;
  z-index: 9;
  &:before {
    width: 300px;
    height: 75px;
    transform: var(--center);
    top: 50%;
    left: 50%;
    --move: 0px;
    --move2: -80px;
    --move3: -30px;
    --move4: -17.5px;
    --move5: -40px;
    background-image: radial-gradient(circle at center, #392f2d 2px, $t 2px),
      radial-gradient(
        ellipse at bottom,
        #cb8d40 15px,
        #392f2d 15px,
        #392f2d 17px,
        $t 12px
      ),
      radial-gradient(
        ellipse at top,
        #fff 15px,
        #392f2d 15px,
        #392f2d 17px,
        $t 12px
      ),
      linear-gradient(to left, #f7eddb 35px, $t 5px),
      radial-gradient(
        circle at bottom,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #fff 32px,
        #fff 38px,
        #cb8d40 38px,
        #cb8d40 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at top,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #cb8d40 32px,
        #cb8d40 42px,
        #fff 42px,
        #fff 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at bottom,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #fff 32px,
        #fff 38px,
        #cb8d40 38px,
        #cb8d40 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at top,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #cb8d40 32px,
        #cb8d40 42px,
        #fff 42px,
        #fff 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at bottom,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #fff 32px,
        #fff 38px,
        #cb8d40 38px,
        #cb8d40 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at top,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #cb8d40 32px,
        #cb8d40 42px,
        #fff 42px,
        #fff 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at bottom,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #fff 32px,
        #fff 38px,
        #cb8d40 38px,
        #cb8d40 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at top,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #cb8d40 32px,
        #cb8d40 42px,
        #fff 42px,
        #fff 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at bottom,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #fff 32px,
        #fff 38px,
        #cb8d40 38px,
        #cb8d40 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      ),
      radial-gradient(
        circle at top,
        $t 30px,
        #392f2d 30px,
        #392f2d 32px,
        #cb8d40 32px,
        #cb8d40 42px,
        #fff 42px,
        #fff 48px,
        #392f2d 48px,
        #392f2d 50px,
        $t 15px
      );
    background-size: 10px 10px, 70px 36px, 60px 20px, 100%, 40px 50px, 40px 50px,
      40px 50px, 40px 50px, 40px 50px, 40px 50px, 40px 50px, 40px 50px,
      40px 50px;
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) calc(50% + var(--move3) + 10px),
      100% calc(50% + var(--move3)),
      calc(100% - 5px) calc(50% + 27px + var(--move3)), 50% 50%,
      calc(0px + var(--move)) 50%, calc(40px + var(--move)) calc(50% - 18.5px),
      calc(80px + var(--move)) 50%, calc(120px + var(--move)) calc(50% - 18.5px),
      calc(160px + var(--move)) 50%,
      calc(200px + var(--move)) calc(50% - 18.5px),
      calc(240px + var(--move)) 50%,
      calc(280px + var(--move)) calc(50% - 18.5px),
      calc(320px + var(--move)) 50%,
      calc(360px + var(--move)) calc(50% - 18.5px);
    animation: slither 1s linear infinite;
    @keyframes slither {
      50% {
        background-position: calc(100% - 25px) calc(50% + var(--move4) + 10px),
          100% calc(50% + var(--move4)),
          calc(100% - 5px) calc(50% + 27px + var(--move4)), 50% 50%,
          calc(0px + var(--move5)) 50%,
          calc(40px + var(--move5)) calc(50% - 18.5px),
          calc(80px + var(--move5)) 50%,
          calc(120px + var(--move5)) calc(50% - 18.5px),
          calc(160px + var(--move5)) 50%,
          calc(200px + var(--move5)) calc(50% - 18.5px),
          calc(240px + var(--move5)) 50%,
          calc(280px + var(--move5)) calc(50% - 18.5px),
          calc(320px + var(--move5)) 50%,
          calc(360px + var(--move5)) calc(50% - 18.5px);
      }
      100% {
        background-position: calc(100% - 25px) calc(50% + var(--move3) + 10px),
          100% calc(50% + var(--move3)),
          calc(100% - 5px) calc(50% + 27px + var(--move3)), 50% 50%,
          calc(0px + var(--move2)) 50%,
          calc(40px + var(--move2)) calc(50% - 18.5px),
          calc(80px + var(--move2)) 50%,
          calc(120px + var(--move2)) calc(50% - 18.5px),
          calc(160px + var(--move2)) 50%,
          calc(200px + var(--move2)) calc(50% - 18.5px),
          calc(240px + var(--move2)) 50%,
          calc(280px + var(--move2)) calc(50% - 18.5px),
          calc(320px + var(--move2)) 50%,
          calc(360px + var(--move2)) calc(50% - 18.5px);
      }
    }
  }
  &:after {
    width: 60px;
    height: 20px;
    background: repeating-linear-gradient(
      65deg,
      lighten(#cb8d40, 20%) 5px,
      #392f2d 5px,
      #392f2d 7px,
      lighten(#cb8d40, 20%) 7px,
      #fff 12px
    );
    box-shadow: inset 0 0 0 2px #392f2d, 0 3px 0 #f7eddb, 0 -3px 0 #f7eddb;
    top: calc(50% - 27.5px);
    left: calc(50% - 200px);
    border-radius: 120px 18px 18px 120px / 50px 28px 28px 50px;
    animation: slither2 0.5s linear infinite alternate 0.25s;
    transform-origin: 50% 100%;
    transform: translateY(0px) rotate(7.5deg);
    @keyframes slither2 {
      to {
        transform: translateY(15px) rotate(-7.5deg);
      }
    }
  }
}

div:nth-of-type(5) {
  // Lost
  label {
    &:before {
      content: "Lost";
      color: #fff;
    }
  }
  background: radial-gradient(
      circle at center,
      rgba(0, 0, 0, 1),
      rgba(0, 0, 0, 0.5)
    ),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0.5px, $t 0.5px)
      50% 50% / 30vw 70vw,
    radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 0.5px, $t 0.5px)
      calc(50% - 60vw) calc(50% - 40vw) / 20vw 20vw,
    radial-gradient(circle at center, rgba(255, 255, 255, 0.45) 0.5px, $t 0.5px)
      calc(50% - 15vw) calc(50% - 30vw) / 20vw 20vw,
    radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0.5px, $t 0.5px)
      calc(50% - 25vw) calc(50% - 80vw) / 60vw 30vw,
    #222;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 300px;
    background: radial-gradient(circle at center, #b8c4ce 15px, $t 15px) -40px 40px,
      radial-gradient(circle at center, #b8c4ce 10px, $t 10px) 5px 90px,
      radial-gradient(
          circle at bottom left,
          $t 40px,
          #b8c4ce 40px,
          #b8c4ce 60px,
          $t 60px
        )
        30px -60px / 100% no-repeat,
      radial-gradient(circle at center, #b8c4ce 10px, $t 10px) -15px 50%,
      radial-gradient(circle at center, #b8c4ce 10px, $t 10px) -45px -30px,
      radial-gradient(
          circle at top right,
          $t 20px,
          #b8c4ce 20px,
          #b8c4ce 40px,
          $t 40px
        ) -90px 120px / 100% no-repeat,
      radial-gradient(circle at center, #ff5c6d 5px, $t 5px) -20px -30px,
      linear-gradient(to right, #3293e2, #3293e2) 65px 117.5px / 7px 5px
        no-repeat,
      linear-gradient(to right, #ccc, #ccc) 28px 90px / 44px 5px no-repeat,
      radial-gradient(ellipse at bottom, #a4ddea 50%, $t 50%) 20px 50px / 60px
        40px no-repeat,
      radial-gradient(circle at center, #fff 50%, $t 50%) -2.5px 40px / 90px 90px
        no-repeat,
      linear-gradient(to right, #fff, #fff) 10px 50% / 65px 100px no-repeat,
      radial-gradient(ellipse at bottom, #fff 70%, $t 66%) 10px 75px / 65px 25px
        no-repeat,
      radial-gradient(ellipse at top, #fff 70%, $t 66%) 10px 200px / 65px 25px
        no-repeat,
      linear-gradient(to right, #ccc 30px, #ccc 30px) 0px 50% / 55px 80px
        no-repeat,
      radial-gradient(
          circle at top right,
          $t 20px,
          darken(#b8c4ce, 5%) 20px,
          darken(#b8c4ce, 5%) 40px,
          $t 40px
        ) -60px 110px / 100% no-repeat,
      radial-gradient(circle at center, darken(#b8c4ce, 5%) 10px, $t 10px) 15px -10px,
      radial-gradient(circle at center, darken(#b8c4ce, 5%) 10px, $t 10px) 25px
        70px,
      radial-gradient(
          circle at bottom left,
          $t 40px,
          darken(#b8c4ce, 5%) 40px,
          darken(#b8c4ce, 5%) 60px,
          $t 60px
        )
        50px -80px / 100% no-repeat,
      radial-gradient(ellipse at center, #b8c4ce 50%, $t 50%) 66px 227px / 40px
        30px no-repeat,
      radial-gradient(ellipse at center, darken(#b8c4ce, 5%) 50%, $t 50%) 86px
        207px / 40px 30px no-repeat;
    left: 50%;
    top: 50%;
    transform: var(--center);
  }
  &:after {
    left: -50vw;
    top: -50vh;
    width: 200vw;
    height: 200vh;
    background: radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.35) 0.5px,
          $t 0.5px
        )
        50% 50% / 30vw 70vw,
      radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.75) 0.5px,
          $t 0.5px
        )
        calc(50% - 60vw) calc(50% - 40vw) / 20vw 20vw,
      radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.45) 0.5px,
          $t 0.5px
        )
        calc(50% - 15vw) calc(50% - 30vw) / 20vw 20vw,
      radial-gradient(
          circle at center,
          rgba(255, 255, 255, 0.5) 0.5px,
          $t 0.5px
        )
        calc(50% - 25vw) calc(50% - 80vw) / 60vw 30vw;
    animation: float 15s linear infinite;
    @keyframes float {
      to {
        transform: rotate(360deg);
      }
    }
  }
}

div:nth-of-type(6) {
  // Bounce
  label {
    &:before {
      content: "Bounce";
    }
  }
  background: radial-gradient(
      ellipse at center,
      lighten(#d0b982, 10%),
      #d0b982 25%
    )
    50% calc(50% + 12.5vh) / 200% 100%;
  &:before,
  &:after {
    width: 75px;
    height: 75px;
    left: calc(50% - 37.5px);
  }
  &:after {
    top: 50%;
    background: radial-gradient(
          ellipse at center,
          $t 40px,
          #000 40px,
          #000 45px,
          $t 35px
        )
        50% calc(50% + 0px) / 325% 200%,
      linear-gradient(to bottom, #000, #000) 50% 50% / 100% 3px no-repeat,
      radial-gradient(
        circle at 75% 25%,
        lighten(#ff8b27, 10%),
        darken(#ff8b27, 10%) 30%
      );
    border-radius: 100%;
    animation: bounce 0.75s cubic-bezier(0.76, 0, 0.24, 1) infinite;
    transform-origin: 50% 100%;
    @keyframes bounce {
      0%,
      100% {
        translate: 0 25px;
        transform: scaleY(0.8);
      }
      50% {
        translate: 0px -175px;
        transform: scaleX(0.8);
      }
    }
  }
  &:before {
    background: rgba(0, 0, 0, 0.125);
    top: calc(50% + 60px);
    border-radius: 100%;
    height: 37.5px;
    animation: squish 0.75s ease-in-out infinite;
    transform-origin: 50% 100%;
    @keyframes squish {
      50% {
        transform: scale(0.65, 0.5);
        opacity: 0.5;
      }
    }
  }
}

div:nth-of-type(7) {
  // Treat
  label {
    &:before {
      content: "Treat";
    }
  }
  background: radial-gradient(circle at center, pink 8px, $t 2px) 50%
      calc(50% - 40px),
    radial-gradient(circle at center, #e8f7f2 100px, darken(#e8f7f2, 15%));
  &:before {
    width: 50px;
    height: 35px;
    left: 50%;
    top: 50%;
    transform: var(--center);
    background: radial-gradient(
        circle at calc(50% - 10px) 30%,
        #000 2px,
        $t 1px
      ),
      radial-gradient(circle at calc(50% + 10px) 30%, #000 2px, $t 1px),
      radial-gradient(circle at top, $t 3px, #000 3px, #000 5px, $t 5px) 50%
        calc(50% + 17.5px),
      pink;
    border-radius: 80px;
    box-shadow: 0 -20px 0 -7.5px darken(pink, 2%),
      0 -30px 0 -10px darken(pink, 4%);
  }
  &:after {
    width: 50px;
    height: 60px;
    left: 50%;
    top: calc(50% + 40px);
    transform: var(--center);
    background: linear-gradient(to bottom, #d9caa2 20px, $t 10px),
      linear-gradient(85deg, #e8f7f2 10px, $t 5px) 0% 50% / 50% 100% no-repeat,
      linear-gradient(-85deg, #e8f7f2 10px, $t 5px) 100% 50% / 50% 100%
        no-repeat,
      repeating-linear-gradient(
        45deg,
        darken(#d9caa2, 10%),
        darken(#d9caa2, 10%) 1px,
        $t 1px,
        $t 10px,
        darken(#d9caa2, 10%) 10px,
        darken(#d9caa2, 10%) 11px
      ),
      repeating-linear-gradient(
        -45deg,
        darken(#d9caa2, 10%),
        darken(#d9caa2, 10%) 1px,
        #d9caa2 1px,
        #d9caa2 10px,
        darken(#d9caa2, 10%) 10px,
        darken(#d9caa2, 10%) 11px
      );
  }
}

@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");

div:nth-of-type(8) {
  // Mix
  label {
    &:before {
      content: "Mix";
    }
  }
  background: radial-gradient(
    circle at center,
    #e6e6b7 10px,
    darken(#e6e6b7, 5%)
  );
  &:after {
    z-index: 9;
    width: 25px;
    height: 25px;
    top: calc(50% - 22.5px);
    left: calc(50% - 72.5px);
    background: radial-gradient(
        circle at center,
        darken(#e6e6b7, 10%) 6px,
        $t 5px
      ),
      linear-gradient(
        45deg,
        $t calc(50% - 1px),
        #fff calc(50% - 1px),
        #fff calc(50% + 1px),
        $t calc(50% + 1px)
      ),
      linear-gradient(
        -45deg,
        $t calc(50% - 1px),
        #fff calc(50% - 1px),
        #fff calc(50% + 1px),
        $t calc(50% + 1px)
      ),
      linear-gradient(
        90deg,
        $t calc(50% - 1px),
        #fff calc(50% - 1px),
        #fff calc(50% + 1px),
        $t calc(50% + 1px)
      ),
      linear-gradient(
        0deg,
        $t calc(50% - 1px),
        #fff calc(50% - 1px),
        #fff calc(50% + 1px),
        $t calc(50% + 1px)
      ),
      darken(#e6e6b7, 10%);
    box-shadow: inset 0 0 0 3px #fff;
    border-radius: 100%;
    -webkit-box-reflect: right 95px;
  }
  &:before {
    content: "Tight Jamz";
    padding-top: 25px;
    box-sizing: border-box;
    font-size: 25px;
    font-family: "Caveat";
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 190px;
    width: 300px;
    left: 50%;
    top: 50%;
    transform: var(--center);
    border-radius: 6px;
    background: linear-gradient(-135deg, #222 30px, $t 10px),
      linear-gradient(135deg, #222 30px, $t 10px),
      linear-gradient(
          to bottom,
          #fff 10px,
          #222 10px,
          #222 11px,
          #fff 11px,
          #fff 20px,
          #222 20px,
          #222 21px,
          #fff 21px
        )
        50% 25px / 230px 30px no-repeat,
      linear-gradient(
          to right,
          #222 40px,
          $t 40px,
          $t calc(100% - 40px),
          #222 calc(100% - 40px)
        )
        50% calc(50% - 10px) / 160px 40px no-repeat,
      linear-gradient(
          to bottom,
          #222 10px,
          $t 10px,
          $t calc(100% - 10px),
          #222 calc(100% - 10px)
        )
        50% calc(50% - 10px) / 160px 40px no-repeat,
      radial-gradient(circle at right, #624e28 40px, $t 40px) calc(50% - 110px)
        calc(50% - 10px) / 100% 40px no-repeat,
      radial-gradient(
          circle at left,
          #624e28 40px,
          #e6e6b7 40px,
          #e6e6b7 80px,
          $t 80px
        )
        calc(50% + 90px) calc(50% - 10px) / 100% 40px no-repeat,
      linear-gradient(
          to bottom,
          #838383 50px,
          #838383 75px,
          #c42657 75px,
          #c42657 85px,
          #3f93c1 85px,
          #3f93c1 95px,
          #d4bd2b 95px,
          #d4bd2b 105px,
          #838383 105px
        )
        50% 15px / calc(100% - 30px) calc(100% - 70px) no-repeat,
      linear-gradient(-80deg, $t 50px, #000 50px, #000 52px, $t 52px) -180px 50%,
      linear-gradient(80deg, $t 50px, #000 50px, #000 52px, $t 52px) 180px 50%,
      radial-gradient(circle at 100px 170px, #000 5px, $t 5px),
      radial-gradient(circle at 200px 170px, #000 5px, $t 5px),
      radial-gradient(circle at 50% 160px, #000 5px, $t 5px), #222;
  }
}