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

              
                <input id="layout" type="checkbox" checked />
<label for="layout">Click me</label>
<ul class="featured">
  <li class="bird-li">
    <div class="bird bird-1"></div>
    <div class="bird bird-2"></div>
    <div class="bird bird-3"></div>
  </li>
  <li class="apples-li">
    <div class="apple apples"></div>
  </li>
  <li class="wolf-li">
    <div class="wolf"></div>
  </li>
  <li class="fox-li">
    <div class="fox"></div>
  </li>
  <li class="mush-li">
    <div class="mushroom"></div>
  </li>
  <li class="deer-li">
    <div class="deer"></div>
  </li>
  <li class="pine-li">
    <div class="pine"></div>
  </li>
  <li class="cloud-li">
    <div class="cloud cloud-1"></div>
    <div class="cloud cloud-2"></div>
    <div class="cloud cloud-3"></div>
    <div class="cloud cloud-4"></div>
    <div class="cloud cloud-5"></div>
    <div class="cloud bush-1"></div>
    <div class="cloud bush-2"></div>
  </li>

  <li class="owl-li">
    <div class="owl"></div>
  </li>
  <li class="apple-li">
    <div class="apple"></div>
  </li>
  <li class="cat-li">
    <div class="cat"></div>
  </li>
  <li class="flo-li">
    <div class="flower"></div>
  </li>
  <li class="bear-li">
    <div class="bear"></div>
  </li>
  <li class="squirrel-li">
    <div class="squirrel"></div>
  </li>
</ul>
              
            
!

CSS

              
                :root {
  --bear: #5d4037;
  --leaf: #432f29;
  --green: #74875d;
  --flower: wheat;
  --fox: #bf360c;
  --cloud-base: 4vmin;
  --bear-base: 3vmin;
  --cat-base: 6vmin;
  --apple-base: 2.5vmin;
  --mushroom-base: 3vmin;
  --deer-base: 3.25vmin;
  --fox-base: 3vmin;
  --wolf-base: 4.5vmin;
  --flower-base: 2.5vmin;
  --bird-base: 4vmin;
  --pine-base: 1.5vmin;
  --sq-base: 4vmin;
  --light: wheat;
  --white: white;
}
$base-width: 6vmin;
body {
  background: wheat;
  margin: 0;
  align-items: center;
  height: 100vh;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}
.featured {
  width: 100vmin;
  margin: 2rem auto;
  pointer-events: none;
  list-style: none;
  display: grid;
  grid-gap: 1vmin;
  grid-template-columns: repeat(5, 1fr);
  li {
    border: 2px solid var(--fox);
    height: 20vmin;
    position: relative;
    transform-origin: center center;
    transition: transform 0.5s, border 0.3s 0.5s;
  }
  div {
    position: absolute;
    left: 50%;
    top: 50%;
    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

.bird {
  margin-left: var(--bird-base);
  color: var(--leaf);
  width: var(--bird-base);
  height: var(--bird-base);
  border-radius: 50% 50% calc(0.25 * var(--bird-base))
    calc(0.25 * var(--bird-base));
  background: currentcolor;
  box-shadow: calc(0.5 * var(--bird-base)) calc(1.4 * var(--bird-base)) 0
    calc(0.5 * var(--bird-base)) currentcolor;
  &:after {
    left: calc(0.3 * var(--bird-base));
    width: calc(0.4 * var(--bird-base));
    height: calc(0.4 * var(--bird-base));
    border-radius: 50%;
    top: calc(0.3 * var(--bird-base));
    border: calc(0.1 * var(--bird-base)) solid var(--light);
  }
  &:before {
    left: calc(-0.25 * var(--bird-base));
    top: calc(0.3 * var(--bird-base));
    border-left: calc(0.25 * var(--bird-base)) solid transparent;
    border-top: calc(0.22 * var(--bird-base)) solid currentcolor;
    border-bottom: calc(0.22 * var(--bird-base)) solid currentcolor;
    width: var(--bird-base);
    box-shadow: calc(0.25 * var(--bird-base)) calc(0.5 * var(--bird-base)) 0 0
        currentcolor,
      calc(0.25 * var(--bird-base)) calc(0.9 * var(--bird-base)) 0 0
        currentcolor,
      calc(0.25 * var(--bird-base)) calc(1.1 * var(--bird-base)) 0 0
        currentcolor,
      calc(0.45 * var(--bird-base)) calc(2.5 * var(--bird-base)) 0
        calc(-0.125 * var(--bird-base)) currentcolor;
  }
}

.featured .bird {
  transform: translateX(calc(-1 * var(--bird-base)))
    translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
}

.mush-li,
.cloud-li {
  background: var(--fox);
}
.featured .flo-li {
  background: var(--green);
  border-color: var(--green);
  z-index: 1;
}
.mushroom {
  color: var(--light);
  height: calc(2 * var(--mushroom-base));
  width: calc(0.7 * var(--mushroom-base));
  background: currentcolor;
  border-radius: 50% 50% calc(0.2 * var(--mushroom-base))
    calc(0.2 * var(--mushroom-base)) / 100% 100%
    calc(0.2 * var(--mushroom-base)) calc(0.2 * var(--mushroom-base));
  &:before {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    border-bottom: calc(0.5 * var(--mushroom-base)) solid transparent;
    border-left: calc(0.5 * var(--mushroom-base)) solid currentcolor;
    border-right: calc(0.5 * var(--mushroom-base)) solid currentcolor;
    height: calc(0.5 * var(--mushroom-base));
  }
  &:after {
    color: var(--leaf);
    width: calc(3.2 * var(--mushroom-base));
    height: calc(1.6 * var(--mushroom-base));
    background: currentcolor;
    border-radius: 50% 50% 50% 50%/ 75% 75% 22% 22%;
    top: calc(-1.5 * var(--mushroom-base));
    left: 50%;
    transform: translateX(-50%);
  }
}

.featured .mushroom {
  transform: translateX(calc(-0.1 * var(--mushroom-base)))
    translateY(calc(-0.15 * var(--wolf-base)));
}

.deer {
  color: var(--leaf);
  background: currentcolor;
  width: var(--deer-base);
  height: calc(1.5 * var(--deer-base));
  border-radius: 100% 100% calc(0.1 * var(--deer-base))
    calc(0.5 * var(--deer-base)) / calc(0.5 * var(--deer-base))
    calc(0.5 * var(--deer-base)) calc(0.1 * var(--deer-base))
    calc(0.5 * var(--deer-base));
  box-shadow: calc(0.25 * var(--deer-base)) calc(1.2 * var(--deer-base)) 0
      calc(-0.25 * var(--deer-base)),
    calc(0.25 * var(--deer-base)) calc(-0.5 * var(--deer-base)) 0
      calc(-0.4 * var(--deer-base)),
    calc(-0.25 * var(--deer-base)) calc(-0.5 * var(--deer-base)) 0
      calc(-0.4 * var(--deer-base)),
    calc(0.1 * var(--deer-base)) calc(3.25 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(0 * var(--deer-base)) calc(4 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(0.55 * var(--deer-base)) calc(3.25 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(0.55 * var(--deer-base)) calc(4 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(1.5 * var(--deer-base)) calc(3.25 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(1.5 * var(--deer-base)) calc(4 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(1.85 * var(--deer-base)) calc(3.25 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base)),
    calc(1.95 * var(--deer-base)) calc(4 * var(--deer-base)) 0
      calc(-0.35 * var(--deer-base));
  &:before {
    top: calc(0 * var(--deer-base));
    left: calc(-0.75 * var(--deer-base));
    border-top: calc(0.4 * var(--deer-base)) solid transparent;
    border-left: calc(0.8 * var(--deer-base)) solid;
    border-right: calc(0.8 * var(--deer-base)) solid;
    width: calc(2.5 * var(--deer-base));
    height: calc(0.9 * var(--deer-base));
    border-radius: calc(0.45 * var(--deer-base));
    box-shadow: calc(1 * var(--deer-base)) calc(2.56 * var(--deer-base)) 0
      calc(0.2 * var(--deer-base));
  }
  &:after {
    color: wheat;
    width: calc(0.15 * var(--deer-base));
    height: calc(0.15 * var(--deer-base));
    background: currentcolor;
    border-radius: 50%;
    top: calc(0.7 * var(--deer-base));
    left: calc(0.15 * var(--deer-base));
    box-shadow: calc(0.25 * var(--deer-base)) 0 0 calc(0 * var(--deer-base)),
      calc(1.1 * var(--deer-base)) calc(1.7 * var(--deer-base)) 0
        calc(-0.02 * var(--deer-base)),
      calc(1.3 * var(--deer-base)) calc(1.9 * var(--deer-base)) 0
        calc(-0.03 * var(--deer-base)),
      calc(1.5 * var(--deer-base)) calc(1.7 * var(--deer-base)) 0
        calc(-0.04 * var(--deer-base)),
      calc(1.85 * var(--deer-base)) calc(1.7 * var(--deer-base)) 0
        calc(-0.04 * var(--deer-base)),
      calc(1.65 * var(--deer-base)) calc(1.9 * var(--deer-base)) 0
        calc(-0.04 * var(--deer-base)),
      calc(2.8 * var(--deer-base)) calc(1.9 * var(--deer-base)) 0
        calc(0.1 * var(--deer-base)) var(--white);
  }
}

.featured .deer {
  transform: translateX(calc(-1.2 * var(--deer-base)))
    translateY(calc(-2.5 * var(--deer-base)));
}
.wolf {
  color: var(--leaf);
  width: calc(2.25 * var(--wolf-base));
  height: var(--wolf-base);
  border-radius: 0 0 100% 0 / 0 0 calc(0.8 * var(--wolf-base)) 0;
  background: currentcolor;
  box-shadow: calc(-0.5 * var(--wolf-base)) calc(-1 * var(--wolf-base)) 0
      calc(-0.2 * var(--wolf-base)) currentcolor,
    calc(0.95 * var(--wolf-base)) calc(-0.3 * var(--wolf-base)) 0
      calc(-0.3 * var(--wolf-base)) currentcolor;
  &:after {
    left: calc(0.2 * var(--wolf-base));
    width: calc(0.12 * var(--wolf-base));
    height: calc(0.12 * var(--wolf-base));
    background: wheat;
    border-radius: 50%;
    top: calc(-0.7 * var(--wolf-base));
    box-shadow: calc(0.2 * var(--wolf-base)) 0 0 wheat,
      calc(1.3 * var(--wolf-base)) calc(-0.1 * var(--wolf-base)) 0
        calc(0.1 * var(--wolf-base)) currentcolor;
  }
  &:before {
    left: calc(-0.33 * var(--wolf-base));
    top: calc(-1.3 * var(--wolf-base));
    border-top: calc(0.45 * var(--wolf-base)) solid transparent;
    border-left: calc(0.55 * var(--wolf-base)) solid currentcolor;
    border-right: calc(0.4 * var(--wolf-base)) solid currentcolor;
    height: calc(2 * var(--wolf-base));
    box-shadow: calc(-0.3 * var(--wolf-base)) calc(1.6 * var(--wolf-base)) 0
        calc(-0.3 * var(--wolf-base)) currentcolor,
      calc(0.3 * var(--wolf-base)) calc(1.6 * var(--wolf-base)) 0
        calc(-0.3 * var(--wolf-base)) currentcolor,
      calc(1.93 * var(--wolf-base)) calc(1.1 * var(--wolf-base)) 0
        calc(-0.3 * var(--wolf-base)) currentcolor,
      calc(1.93 * var(--wolf-base)) calc(1.6 * var(--wolf-base)) 0
        calc(-0.3 * var(--wolf-base)) currentcolor,
      calc(1.53 * var(--wolf-base)) calc(1.6 * var(--wolf-base)) 0
        calc(-0.3 * var(--wolf-base)) currentcolor;
  }
}

.featured .wolf {
  transform: translateX(calc(-1.25 * var(--wolf-base)))
    translateY(calc(-0.5 * var(--wolf-base))) rotateY(180deg);
}

.fox {
  bottom: calc(0.6 * var(--fox-base));
  color: var(--fox);
  width: calc(2.25 * var(--fox-base));
  height: var(--fox-base);
  border-radius: 0 0 100% 0 / 0 0 calc(0.8 * var(--fox-base)) 0;
  background: currentcolor;
  box-shadow: calc(-0.5 * var(--fox-base)) calc(-1 * var(--fox-base)) 0
      calc(-0.3 * var(--fox-base)) currentcolor,
    calc(1.9 * var(--fox-base)) calc(-0.3 * var(--fox-base)) 0
      calc(-0.3 * var(--fox-base)) currentcolor;
  &:after {
    left: calc(0.2 * var(--fox-base));
    width: calc(0.12 * var(--fox-base));
    height: calc(0.12 * var(--fox-base));
    background: wheat;
    border-radius: 50%;
    top: calc(-0.7 * var(--fox-base));
    box-shadow: calc(0.2 * var(--fox-base)) 0 0 wheat,
      calc(1.3 * var(--fox-base)) calc(-0.1 * var(--fox-base)) 0
        calc(0.08 * var(--fox-base)) currentcolor;
  }
  &:before {
    left: calc(-0.3 * var(--fox-base));
    top: calc(-1.3 * var(--fox-base));
    border-top: calc(0.45 * var(--fox-base)) solid transparent;
    border-left: calc(0.55 * var(--fox-base)) solid currentcolor;
    border-right: calc(0.4 * var(--fox-base)) solid currentcolor;
    height: calc(2 * var(--fox-base));
    box-shadow: calc(-0.32 * var(--fox-base)) calc(1.2 * var(--fox-base)) 0
        calc(-0.32 * var(--fox-base)) currentcolor,
      calc(0.32 * var(--fox-base)) calc(1.2 * var(--fox-base)) 0
        calc(-0.32 * var(--fox-base)) currentcolor,
      calc(1.93 * var(--fox-base)) calc(1.1 * var(--fox-base)) 0
        calc(-0.32 * var(--fox-base)) currentcolor,
      calc(1.93 * var(--fox-base)) calc(1.2 * var(--fox-base)) 0
        calc(-0.32 * var(--fox-base)) currentcolor,
      calc(1.53 * var(--fox-base)) calc(1.2 * var(--fox-base)) 0
        calc(-0.32 * var(--fox-base)) currentcolor;
  }
}
.featured .fox {
  transform: translateX(calc(-1.75 * var(--fox-base)))
    translateY(calc(-0.25 * var(--fox-base)));
}

.pine {
  color: var(--green);
  height: calc(5 * var(--pine-base));
  width: var(--pine-base);
  background: currentcolor;
  &:before {
    width: 50%;
    height: var(--pine-base);
    background: currentcolor;
    bottom: calc(0.5 * var(--pine-base));
    left: calc(0.5 * var(--pine-base));
    border-radius: calc(0.15 * var(--pine-base)) calc(0.25 * var(--pine-base)) 0
      0;
    transform: rotate(40deg);
    transform-origin: bottom right;
  }
  &:after {
    bottom: 100%;
    left: calc(-2.5 * var(--pine-base));
    width: 0;
    height: 0px;
    border-left: calc(3 * var(--pine-base)) solid transparent;
    border-right: calc(3 * var(--pine-base)) solid transparent;
    border-bottom: calc(4 * var(--pine-base)) solid currentcolor;
    filter: drop-shadow(0 calc(1.5 * var(--pine-base)) 0 currentcolor)
      drop-shadow(0 calc(1.5 * var(--pine-base)) 0 currentcolor);
  }
}
.featured .pine {
  transform: translateX(calc(-0.5 * var(--pine-base)))
    translateY(calc(-0.5 * var(--pine-base)));
}

.apple {
  color: var(--green);
  border-left: calc(0.1 * var(--apple-base)) solid transparent;
  border-right: calc(0.1 * var(--apple-base)) solid transparent;
  border-top: calc(0.5 * var(--apple-base)) solid currentcolor;
  &:before,
  &:after {
    left: calc(-0.55 * var(--apple-base));
    width: calc(1.5 * var(--apple-base));
    height: calc(1.8 * var(--apple-base));
    background: currentcolor;
    border-radius: 50% 50% 30% 30% / var(--apple-base) var(--apple-base) 30% 30%;
    transform: rotate(-32deg);
    transform-origin: 0 100%;
  }
  &:after {
    transform: translateX(calc(-0.4 * var(--apple-base))) rotate(32deg);
    transform-origin: 100% 100%;
  }
}

.featured .apple {
  transform: translateX(calc(-0.125 * var(--apple-base)))
    translateY(calc(-1 * var(--apple-base)));
}
.featured .apples {
  transform: translateX(calc(-0.75 * var(--apple-base)))
    translateY(calc(-1 * var(--apple-base)));
  filter: drop-shadow(calc(1.5 * var(--apple-base)) 0 0 var(--leaf));
}
.apples {
  color: var(--fox);
}
.cloud {
  color: var(--light);
}
.cloud,
.cloud:before,
.cloud:after {
  width: var(--cloud-base);
  height: calc(1.1 * var(--cloud-base));
  background: currentcolor;
  border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
}
.cloud:before,
.cloud:after {
  transform-origin: right bottom;
  color: inherit;
}
.cloud:before {
  transform: translate3d(calc(0.8 * var(--cloud-base)), 0, 0) scale(1.2);
}
.cloud:after {
  transform: translate3d(calc(1.25 * var(--cloud-base)), 0, 0) scale(0.8);
}

.featured .cloud {
  transform: translateX(calc(-1.3 * var(--cloud-base)))
    translateY(calc(-0.75 * var(--cloud-base)));
}

.flower {
  color: var(--flower);
  border-top: calc(0.5 * var(--flower-base)) solid transparent;
  border-left: calc(0.5 * var(--flower-base)) solid currentcolor;
  border-right: calc(0.5 * var(--flower-base)) solid currentcolor;
  height: calc(1.25 * var(--flower-base));
  width: 0;
  border-radius: 50% / 50% 50% 50% 50%;
  box-shadow: 0 calc(-0.5 * var(--flower-base)) 0
    calc(-0.35 * var(--flower-base)) currentcolor;
  filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
  &:before {
    width: 2px;
    height: calc(4.5 * var(--flower-base));
    background: currentcolor;
    top: calc(-0.5 * var(--flower-base));
    left: -1px;
    z-index: -10;
  }
  &:after {
    border-top: var(--flower-base) solid transparent;
    border-left: calc(0.8 * var(--flower-base)) solid currentcolor;
    border-right: calc(0.8 * var(--flower-base)) solid currentcolor;
    height: calc(1.2 * var(--flower-base));
    width: 0;
    left: 50%;
    margin: auto 0 0 calc(-0.8 * var(--flower-base));
    top: calc(0.8 * var(--flower-base));
    border-radius: 0 0 calc(0.125 * var(--flower-base))
      calc(0.125 * var(--flower-base));
    filter: drop-shadow(0 calc(1.4 * var(--flower-base)) 0 currentcolor);
  }
}

.bear {
  width: calc(3 * var(--bear-base));
  height: calc(3.4 * var(--bear-base));
  color: var(--bear);
  background: currentcolor;
  margin: 0 calc(-1.5 * var(--bear-base));
  border-radius: 50% 100% 0 0;
  &:after {
    color: var(--light);
    width: calc(0.1 * var(--bear-base));
    height: calc(0.1 * var(--bear-base));
    background: currentcolor;
    border-radius: 50%;
    left: calc(0.45 * var(--bear-base));
    top: calc(-0.5 * var(--bear-base));
    position: absolute;
    box-shadow: calc(0.72 * var(--bear-base)) 0 0 0 currentcolor,
      calc(0.375 * var(--bear-base)) calc(0.7 * var(--bear-base)) 0
        calc(0.1 * var(--bear-base)) var(--bear),
      calc(-0.47 * var(--bear-base)) calc(-0.55 * var(--bear-base)) 0
        calc(0.225 * var(--bear-base)) var(--bear),
      calc(1.4 * var(--bear-base)) calc(-0.55 * var(--bear-base)) 0
        calc(0.225 * var(--bear-base)) var(--bear);
  }
  &:before {
    width: calc(0.5 * var(--bear-base));
    left: calc(0.6 * var(--bear-base));
    top: calc(-0.6 * var(--bear-base));
    color: wheat;
    background: var(--bear);
    border-bottom: var(--bear-base) solid currentcolor;
    border-left: calc(0.125 * var(--bear-base)) solid transparent;
    border-right: calc(0.125 * var(--bear-base)) solid transparent;
    box-shadow: 0 calc(0.3 * var(--bear-base)) 0 calc(0.6 * var(--bear-base))
      var(--bear);
  }
}
.featured .bear {
  transform: translateX(calc(-0.125 * var(--bear-base)))
    translateY(calc(-0.5 * var(--bear-base)));
}

.owl {
  --light: wheat;
  --bear: #5d4037;
  --owl-base: 7vmin;
  position: absolute;
  &:before,
  &:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
  }
  width: var(--owl-base);
  height: calc(1.7 * var(--owl-base));
  color: var(--leaf);
  background: currentcolor;
  border-radius: 0 0 0 100% / 0 0 0 50%;
  box-shadow: calc(0.35 * var(--owl-base)) calc(0.65 * var(--owl-base)) 0
      calc(-0.4 * var(--owl-base)),
    calc(0.13 * var(--owl-base)) calc(0.55 * var(--owl-base)) 0
      calc(-0.4 * var(--owl-base)),
    calc(-0.09 * var(--owl-base)) calc(0.4 * var(--owl-base)) 0
      calc(-0.4 * var(--owl-base));
  &:before {
    left: calc(0.12 * var(--owl-base));
    top: calc(0.25 * var(--owl-base));
    width: calc(0.3 * var(--owl-base));
    height: calc(0.3 * var(--owl-base));
    border-radius: 50%;
    background: currentcolor;
    box-shadow: 0 0 0 calc(0.08 * var(--owl-base)) var(--light),
      calc(0.45 * var(--owl-base)) 0 0,
      calc(0.45 * var(--owl-base)) 0 0 calc(0.08 * var(--owl-base)) var(--light),
      calc(0.23 * var(--owl-base)) 0 0 calc(0.4 * var(--owl-base));
  }
  &:after {
    top: calc(0.55 * var(--owl-base));
    left: calc(0.435 * var(--owl-base));
    width: 0;
    height: 0;
    border-left: calc(0.06 * var(--owl-base)) solid transparent;
    border-right: calc(0.06 * var(--owl-base)) solid transparent;
    border-top: calc(0.1 * var(--owl-base)) solid var(--light);
  }
}

.featured .owl {
  transform: translateX(calc(-0.5 * var(--owl-base)))
    translateY(calc(-0.85 * var(--owl-base)));
}

.flower {
  position: absolute;
  &:before,
  &:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
  }

  color: var(--flower);
  border-top: calc(0.5 * var(--flower-base)) solid transparent;
  border-left: calc(0.5 * var(--flower-base)) solid currentcolor;
  border-right: calc(0.5 * var(--flower-base)) solid currentcolor;
  height: calc(1.25 * var(--flower-base));
  width: 0;
  border-radius: 50% / 50% 50% 50% 50%;
  box-shadow: 0 calc(-0.5 * var(--flower-base)) 0
    calc(-0.35 * var(--flower-base)) currentcolor;
  filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
  &:before {
    width: 2px;
    height: calc(4.5 * var(--flower-base));
    background: currentcolor;
    top: calc(-0.5 * var(--flower-base));
    left: -1px;
    z-index: -10;
  }
  &:after {
    border-top: var(--flower-base) solid transparent;
    border-left: calc(0.8 * var(--flower-base)) solid currentcolor;
    border-right: calc(0.8 * var(--flower-base)) solid currentcolor;
    height: calc(1.2 * var(--flower-base));
    width: 0;
    left: 50%;
    margin: auto 0 0 calc(-0.8 * var(--flower-base));
    top: calc(0.8 * var(--flower-base));
    border-radius: 0 0 calc(0.125 * var(--flower-base))
      calc(0.125 * var(--flower-base));
    filter: drop-shadow(0 calc(1.4 * var(--flower-base)) 0 currentcolor);
  }
}

.featured .flower {
  transform: translateX(calc(-1.5 * var(--flower-base)))
    translateY(calc(-1.75 * var(--flower-base)));
}

.squirrel {
  position: absolute;
  color: var(--fox);
  width: calc(1 * var(--sq-base));
  height: calc(1.35 * var(--sq-base));
  background: currentcolor;
  border-radius: 80% 0 80% 0 / 80% 0 80% 0;
  box-shadow: 0 calc(-0.27 * var(--sq-base)) 0, 0 calc(-0.54 * var(--sq-base)) 0,
    0 calc(-0.81 * var(--sq-base)) 0,
    calc(-1.6 * var(--sq-base)) calc(-0.6 * var(--sq-base)) 0
      calc(-0.25 * var(--sq-base)),
    calc(-1.62 * var(--sq-base)) calc(-0.6 * var(--sq-base)) 0
      calc(-0.25 * var(--sq-base)),
    calc(-1.64 * var(--sq-base)) calc(-0.6 * var(--sq-base)) 0
      calc(-0.25 * var(--sq-base)),
    calc(-1.66 * var(--sq-base)) calc(-0.6 * var(--sq-base)) 0
      calc(-0.25 * var(--sq-base)),
    calc(-1.68 * var(--sq-base)) calc(-0.6 * var(--sq-base)) 0
      calc(-0.25 * var(--sq-base));
  &:before {
    bottom: 0;
    left: -100%;
    width: 0;
    height: 0;
    border-bottom: calc(2 * var(--sq-base)) solid;
    border-right: var(--sq-base) solid transparent;
    filter: drop-shadow(calc(0.1 * var(--sq-base)) 0 0);
  }
  &:after {
    left: calc(-1.53 * var(--sq-base));
    width: calc(0.15 * var(--sq-base));
    height: calc(0.15 * var(--sq-base));
    background: currentcolor;
    top: calc(0.35 * var(--sq-base));
    border-radius: 50%;
    box-shadow: calc(0.45 * var(--sq-base)) calc(0.2 * var(--sq-base)) 0
        calc(0.05 * var(--sq-base)),
      calc(0.12 * var(--sq-base)) calc(-0.3 * var(--sq-base)) 0
        calc(-0.025 * var(--sq-base)) var(--light),
      calc(0.26 * var(--sq-base)) calc(-0.3 * var(--sq-base)) 0
        calc(-0.025 * var(--sq-base)) var(--light);
  }
}
.featured .squirrel {
  transform: translateX(calc(-0.8 * var(--sq-base)))
    translateY(calc(-0.5 * var(--sq-base))) rotateY(180deg);
}

.cat {
  position: absolute;
  color: var(--leaf);
  &:before,
  &:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
  }
  background: currentcolor;
  width: var(--cat-base);
  height: var(--cat-base);
  border-radius: 0 calc(0.5 * var(--cat-base)) 0 calc(0.1 * var(--cat-base));
  box-shadow: calc(0.125 * var(--cat-base)) 0 0 currentcolor,
    calc(-0.25 * var(--cat-base)) calc(-0.55 * var(--cat-base)) 0
      calc(-0.25 * var(--cat-base)) currentcolor,
    calc(0.68 * var(--cat-base)) calc(0.42 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor,
    calc(0.76 * var(--cat-base)) calc(0.42 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor,
    calc(0.86 * var(--cat-base)) calc(0.42 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor,
    calc(0.96 * var(--cat-base)) calc(0.42 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor,
    calc(1.06 * var(--cat-base)) calc(0.42 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor,
    calc(1.06 * var(--cat-base)) calc(0.32 * var(--cat-base)) 0
      calc(-0.42 * var(--cat-base)) currentcolor;
  &:before,
  &:after {
    top: calc(-0.45 * var(--cat-base));
  }
  &:before {
    border-left: calc(0.25 * var(--cat-base)) solid currentcolor;
    border-bottom: 0 solid transparent;
    border-top: calc(0.25 * var(--cat-base)) solid transparent;
    height: calc(0.25 * var(--cat-base));
  }
  &:after {
    left: calc(0.125 * var(--cat-base));
    border-right: calc(0.25 * var(--cat-base)) solid currentcolor;
    border-bottom: 0 solid transparent;
    border-top: calc(0.25 * var(--cat-base)) solid transparent;
    height: calc(0.25 * var(--cat-base));
  }
}

.featured .cat {
  transform: translateX(calc(-0.75 * var(--cat-base)))
    translateY(calc(0 * var(--cat-base)));
}
.featured .cats {
  color: var(--leaf);
  transform: translateX(calc(-1 * var(--cat-base)))
    translateY(calc(0 * var(--cat-base)));
  filter: drop-shadow(calc(0.6 * var(--cat-base)) 0 0 var(--light));
}

.cloud-li {
  z-index: 1;
}
.wolf-li,
.deer-li,
.cat-li,
.bird-li,
.fox-li,
.apples-li {
  z-index: 2;
}
.mush-li,
.apple-li {
  z-index: 3;
}
.cloud-li div,
.bird-li div {
  transition: transform 0.6s;
}

input:not(:checked) ~ .featured {
  max-width: calc(100vmin - 2rem);
}
:checked ~ .featured {
  li {
    border-color: transparent;
    background: transparent;
    transition: transform 0.5s, border 0.3s 0s;
  }

  .cloud {
    color: white;
  }
  .bear-li {
    transform: translate3d(0.5vmin, -10.5vmin, 0) scale(1.8);
  }

  .cloud-li .cloud-1 {
    transform: translate3d(-25vmin, -15vmin, 0) scale(0.8)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }

  .cloud-li .cloud-2 {
    transform: translate3d(-10vmin, -20vmin, 0) scale(1.2)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }

  .cloud-li .cloud-3 {
    transform: translate3d(4vmin, -10vmin, 0) scale(1.2)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }
  .cloud-li .cloud-4 {
    transform: translate3d(19vmin, -20vmin, 0) scale(0.8)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }

  .cloud-li .cloud-5 {
    transform: translate3d(32vmin, 0, 0) scale(1.5)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }

  .cloud-li .bush-1 {
    color: #4f5d41;
    transform: translate3d(11vmin, 29vmin, 0) scale(3.2)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
    z-index: 2;
  }

  .cloud-li .bush-2 {
    color: var(--green);
    transform: translate3d(32vmin, 27.6vmin, 0) scale(4)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }
  .pine-li {
    transform: translate3d(-0.75vmin, 8vmin, 0) scale(2.6);
  }
  .wolf-li {
    transform: translate3d(-29vmin, 43vmin, 0) scale(0.9);
  }
  .fox-li {
    transform: translate3d(-32vmin, 44vmin, 0) scale(1.1);
  }
  .owl-li {
    transform: translate3d(-34vmin, -3vmin, 0) scale(0.55);
  }
  .deer-li {
    transform: translate3d(64vmin, 18vmin, 0) scale(1.1);
    --white: var(--light);
  }
  .squirrel-li {
    transform: translate3d(-50vmin, -17.5vmin, 0) scale(0.6);
  }
  .mush-li {
    transform: translate3d(-34vmin, 47vmin, 0) scale(0.45);
    --leaf: var(--fox);
  }
  .flo-li {
    transform: translate3d(34vmin, 2.5vmin, 0) scale(0.8);
  }
  .cat-li {
    transform: translate3d(40.5vmin, 0.5vmin, 0) scale(1);
  }
  .bird-li {
    transform: translate3d(80vmin, 43vmin, 0) scale(0.55)
      translateX(calc(-1 * var(--bird-base)))
      translateY(calc(-1.5 * var(--bird-base)));
  }
  .bird-li .bird-1 {
    transform: translateX(1vmin) translateY(2vmin) rotateY(180deg);
  }
  .bird-li :where(.bird-2, .bird-3) {
    --light: var(--green);
    color: wheat;
  }
  .bird-li .bird-2 {
    transform: translateX(-8vmin) translateY(4vmin) rotateY(180deg) scale(0.8);
  }
  .bird-li .bird-3 {
    transform: translateX(-16vmin) translateY(4vmin) rotateY(180deg) scale(0.8);
  }
  .apples-li {
    transform: translate3d(-20vmin, 45.5vmin, 0) scale(0.8);
  }
  .apple-li {
    transform: translate3d(-46vmin, 26.5vmin, 0) scale(0.6);
  }
}

label {
  font-family: "Holtwood One SC", serif;
  font-size: 2rem;
  margin-top: 2rem;
  padding: 1rem;
  border: 3px solid;
  color: var(--leaf);
  cursor: pointer;
  transition: 0.6s;
}
button:hover {
  color: var(--fox);
}

:focus + label {
  outline: 2px dashed;
  outline-offset: 2px;
}

input {
  opacity: 0;
}

              
            
!

JS

              
                
              
            
!
999px

Console