Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                -8.times do
 %div
  %label
              
            
!

CSS

              
                $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;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console