CSS Shapes Forest Collection Spring Summer 2020

By | October 11, 2020

Paulina Hetman crafts a forest full of one-div CSS shapes. Click the button to assemble them into a scene!

See the Pen CSS Shapes Forest Collection spring summer 2020 by Paulina Hetman (@pehaa) on CodePen.

Created on April 3, 2020 Updated on April 3, 2020. A Pen by Paulina Hetman on CodePen. License.

index.html

<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>
<footer><button id="click-me">Click me!</button></footer>

script.js

const clickMe = document.getElementById("click-me");
const body = document.querySelector("body");
clickMe.addEventListener("click", () => {
  if (body.classList.contains("hover")) {
    body.classList.remove("hover");
  } else {
    body.classList.add("hover");
  }
});
:root {
  --bear: #5d4037;
  --leaf: #432f29;
  --green: #74875d;
  --flower: wheat;
  --fox: #bf360c;
  --cloud-base: 4vw;
  --bear-base: 3vw;
  --cat-base: 6vw;
  --apple-base: 2.5vw;
  --mushroom-base: 3vw;
  --deer-base: 3.25vw;
  --fox-base: 3vw;
  --wolf-base: 4.5vw;
  --flower-base: 2.5vw;
  --bird-base: 4vw;
  --pine-base: 1.5vw;
  --sq-base: 4vw;
  --light: wheat;
  --white: white;
}
$base-width: 6vw;
body {
  background: wheat;
  margin: 0;
  align-items: center;
  height: 100vh;
}
.featured {
  margin: 2rem 0;
  pointer-events: none;
  list-style: none;
  display: grid;
  grid-gap: 1vw;
  grid-template-columns: repeat(5, 1fr);
  li {
    border: 2px solid var(--fox);
    height: 20vw;
    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: 7vw;
  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),
      calc(2.5 * var(--sq-base)) calc(-0.46 * var(--sq-base)) 0
        calc(0.7 * var(--sq-base));
  }
}
.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;
}
.hover {
  .featured li {
    border-color: transparent;
    background: transparent;
    transition: transform 0.5s, border 0.3s 0s;
  }

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

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

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

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

  .cloud-li .cloud-5 {
    transform: translate3d(32vw, 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(11vw, 29vw, 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(32vw, 27.6vw, 0) scale(4)
      translateX(calc(-1.3 * var(--cloud-base)))
      translateY(calc(-0.75 * var(--cloud-base)));
  }
  .pine-li {
    transform: translate3d(-0.75vw, 8vw, 0) scale(2.6);
  }
  .wolf-li {
    transform: translate3d(-29vw, 43vw, 0) scale(0.9);
  }
  .fox-li {
    transform: translate3d(-32vw, 44vw, 0) scale(1.1);
  }
  .owl-li {
    transform: translate3d(-34vw, -3vw, 0) scale(0.55);
  }
  .deer-li {
    transform: translate3d(64vw, 18vw, 0) scale(1.1);
    --white: var(--light);
  }
  .squirrel-li {
    transform: translate3d(-50vw, -17.5vw, 0) scale(0.6);
  }
  .mush-li {
    transform: translate3d(-34vw, 47vw, 0) scale(0.45);
    --leaf: var(--fox);
  }
  .flo-li {
    transform: translate3d(34vw, 2.5vw, 0) scale(0.8);
  }
  .cat-li {
    transform: translate3d(40.5vw, 0.5vw, 0) scale(1);
  }
  .bird-li .bird-1 {
    transform: translate3d(80vw, 43vw, 0) scale(0.55)
      translateX(calc(-1 * var(--bird-base)))
      translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
  }
  .bird-li .bird-2 {
    --light: var(--green);
    color: wheat;
    transform: translate3d(74vw, 44vw, 0) scale(0.35)
      translateX(calc(-1 * var(--bird-base)))
      translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
  }
  .bird-li .bird-3 {
    --light: var(--green);
    color: wheat;
    transform: translate3d(70vw, 44vw, 0) scale(0.35)
      translateX(calc(-1 * var(--bird-base)))
      translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
  }
  .apples-li {
    transform: translate3d(-20vw, 45.5vw, 0) scale(0.8);
  }
  .apple-li {
    transform: translate3d(-46vw, 26.5vw, 0) scale(0.6);
  }
}
footer {
  text-align: center;
}
button {
  font-family: "Holtwood One SC", serif;
  font-size: 2rem;
  margin-top: 2rem;
  background: transparent;
  border: 3px solid;
  color: var(--leaf);
  cursor: pointer;
  transition: 0.6s;
}
button:hover {
  color: var(--fox);
}

button:focus {
  outline: 2px dashed;
  outline-offset: 2px;
}
:root {
  --bear: #5d4037;
  --leaf: #432f29;
  --green: #74875d;
  --flower: wheat;
  --fox: #bf360c;
  --cloud-base: 4vw;
  --bear-base: 3vw;
  --cat-base: 6vw;
  --apple-base: 2.5vw;
  --mushroom-base: 3vw;
  --deer-base: 3.25vw;
  --fox-base: 3vw;
  --wolf-base: 4.5vw;
  --flower-base: 2.5vw;
  --bird-base: 4vw;
  --pine-base: 1.5vw;
  --sq-base: 4vw;
  --light: wheat;
  --white: white;
}

body {
  background: wheat;
  margin: 0;
  -webkit-box-align: center;
          align-items: center;
  height: 100vh;
}

.featured {
  margin: 2rem 0;
  pointer-events: none;
  list-style: none;
  display: grid;
  grid-gap: 1vw;
  grid-template-columns: repeat(5, 1fr);
}
.featured li {
  border: 2px solid var(--fox);
  height: 20vw;
  position: relative;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: border 0.3s 0.5s, -webkit-transform 0.5s;
  transition: border 0.3s 0.5s, -webkit-transform 0.5s;
  transition: transform 0.5s, border 0.3s 0.5s;
  transition: transform 0.5s, border 0.3s 0.5s, -webkit-transform 0.5s;
}
.featured div {
  position: absolute;
  left: 50%;
  top: 50%;
}
.featured div:before, .featured div: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;
}
.bird: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);
}
.bird: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 {
  -webkit-transform: translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
          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));
}
.mushroom:before {
  left: 50%;
  -webkit-transform: translateX(-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));
}
.mushroom: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%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.featured .mushroom {
  -webkit-transform: translateX(calc(-0.1 * var(--mushroom-base))) translateY(calc(-0.15 * var(--wolf-base)));
          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));
}
.deer: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));
}
.deer: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 {
  -webkit-transform: translateX(calc(-1.2 * var(--deer-base))) translateY(calc(-2.5 * var(--deer-base)));
          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;
}
.wolf: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;
}
.wolf: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 {
  -webkit-transform: translateX(calc(-1.25 * var(--wolf-base))) translateY(calc(-0.5 * var(--wolf-base))) rotateY(180deg);
          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;
}
.fox: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;
}
.fox: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 {
  -webkit-transform: translateX(calc(-1.75 * var(--fox-base))) translateY(calc(-0.25 * var(--fox-base)));
          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;
}
.pine: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;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.pine: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;
  -webkit-filter: drop-shadow(0 calc(1.5 * var(--pine-base)) 0 currentcolor) drop-shadow(0 calc(1.5 * var(--pine-base)) 0 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 {
  -webkit-transform: translateX(calc(-0.5 * var(--pine-base))) translateY(calc(-0.5 * var(--pine-base)));
          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;
}
.apple:before, .apple: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%;
  -webkit-transform: rotate(-32deg);
          transform: rotate(-32deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.apple:after {
  -webkit-transform: translateX(calc(-0.4 * var(--apple-base))) rotate(32deg);
          transform: translateX(calc(-0.4 * var(--apple-base))) rotate(32deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.featured .apple {
  -webkit-transform: translateX(calc(-0.125 * var(--apple-base))) translateY(calc(-1 * var(--apple-base)));
          transform: translateX(calc(-0.125 * var(--apple-base))) translateY(calc(-1 * var(--apple-base)));
}

.featured .apples {
  -webkit-transform: translateX(calc(-0.75 * var(--apple-base))) translateY(calc(-1 * var(--apple-base)));
          transform: translateX(calc(-0.75 * var(--apple-base))) translateY(calc(-1 * var(--apple-base)));
  -webkit-filter: drop-shadow(calc(1.5 * var(--apple-base)) 0 0 var(--leaf));
          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 {
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  color: inherit;
}

.cloud:before {
  -webkit-transform: translate3d(calc(0.8 * var(--cloud-base)), 0, 0) scale(1.2);
          transform: translate3d(calc(0.8 * var(--cloud-base)), 0, 0) scale(1.2);
}

.cloud:after {
  -webkit-transform: translate3d(calc(1.25 * var(--cloud-base)), 0, 0) scale(0.8);
          transform: translate3d(calc(1.25 * var(--cloud-base)), 0, 0) scale(0.8);
}

.featured .cloud {
  -webkit-transform: translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          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;
  -webkit-filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
          filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
}
.flower:before {
  width: 2px;
  height: calc(4.5 * var(--flower-base));
  background: currentcolor;
  top: calc(-0.5 * var(--flower-base));
  left: -1px;
  z-index: -10;
}
.flower: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));
  -webkit-filter: drop-shadow(0 calc(1.4 * var(--flower-base)) 0 currentcolor);
          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;
}
.bear: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);
}
.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 {
  -webkit-transform: translateX(calc(-0.125 * var(--bear-base))) translateY(calc(-0.5 * var(--bear-base)));
          transform: translateX(calc(-0.125 * var(--bear-base))) translateY(calc(-0.5 * var(--bear-base)));
}

.owl {
  --light: wheat;
  --bear: #5d4037;
  --owl-base: 7vw;
  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));
}
.owl:before, .owl:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
}
.owl: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));
}
.owl: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 {
  -webkit-transform: translateX(calc(-0.5 * var(--owl-base))) translateY(calc(-0.85 * var(--owl-base)));
          transform: translateX(calc(-0.5 * var(--owl-base))) translateY(calc(-0.85 * var(--owl-base)));
}

.flower {
  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;
  -webkit-filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
          filter: drop-shadow(calc(2 * var(--flower-base)) 0 0 currentcolor);
}
.flower:before, .flower:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
}
.flower:before {
  width: 2px;
  height: calc(4.5 * var(--flower-base));
  background: currentcolor;
  top: calc(-0.5 * var(--flower-base));
  left: -1px;
  z-index: -10;
}
.flower: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));
  -webkit-filter: drop-shadow(0 calc(1.4 * var(--flower-base)) 0 currentcolor);
          filter: drop-shadow(0 calc(1.4 * var(--flower-base)) 0 currentcolor);
}

.featured .flower {
  -webkit-transform: translateX(calc(-1.5 * var(--flower-base))) translateY(calc(-1.75 * var(--flower-base)));
          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));
}
.squirrel:before {
  bottom: 0;
  left: -100%;
  width: 0;
  height: 0;
  border-bottom: calc(2 * var(--sq-base)) solid;
  border-right: var(--sq-base) solid transparent;
  -webkit-filter: drop-shadow(calc(0.1 * var(--sq-base)) 0 0);
          filter: drop-shadow(calc(0.1 * var(--sq-base)) 0 0);
}
.squirrel: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), calc(2.5 * var(--sq-base)) calc(-0.46 * var(--sq-base)) 0 calc(0.7 * var(--sq-base));
}

.featured .squirrel {
  -webkit-transform: translateX(calc(-0.8 * var(--sq-base))) translateY(calc(-0.5 * var(--sq-base))) rotateY(180deg);
          transform: translateX(calc(-0.8 * var(--sq-base))) translateY(calc(-0.5 * var(--sq-base))) rotateY(180deg);
}

.cat {
  position: absolute;
  color: var(--leaf);
  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;
}
.cat:before, .cat:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
}
.cat:before, .cat:after {
  top: calc(-0.45 * var(--cat-base));
}
.cat: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));
}
.cat: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 {
  -webkit-transform: translateX(calc(-0.75 * var(--cat-base))) translateY(calc(0 * var(--cat-base)));
          transform: translateX(calc(-0.75 * var(--cat-base))) translateY(calc(0 * var(--cat-base)));
}

.featured .cats {
  color: var(--leaf);
  -webkit-transform: translateX(calc(-1 * var(--cat-base))) translateY(calc(0 * var(--cat-base)));
          transform: translateX(calc(-1 * var(--cat-base))) translateY(calc(0 * var(--cat-base)));
  -webkit-filter: drop-shadow(calc(0.6 * var(--cat-base)) 0 0 var(--light));
          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 {
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

.hover .featured li {
  border-color: transparent;
  background: transparent;
  -webkit-transition: border 0.3s 0s, -webkit-transform 0.5s;
  transition: border 0.3s 0s, -webkit-transform 0.5s;
  transition: transform 0.5s, border 0.3s 0s;
  transition: transform 0.5s, border 0.3s 0s, -webkit-transform 0.5s;
}
.hover .cloud {
  color: white;
}
.hover .bear-li {
  -webkit-transform: translate3d(0.5vw, -10.5vw, 0) scale(1.8);
          transform: translate3d(0.5vw, -10.5vw, 0) scale(1.8);
}
.hover .cloud-li .cloud-1 {
  -webkit-transform: translate3d(-25vw, -15vw, 0) scale(0.8) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(-25vw, -15vw, 0) scale(0.8) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .cloud-li .cloud-2 {
  -webkit-transform: translate3d(-10vw, -20vw, 0) scale(1.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(-10vw, -20vw, 0) scale(1.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .cloud-li .cloud-3 {
  -webkit-transform: translate3d(4vw, -10vw, 0) scale(1.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(4vw, -10vw, 0) scale(1.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .cloud-li .cloud-4 {
  -webkit-transform: translate3d(19vw, -20vw, 0) scale(0.8) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(19vw, -20vw, 0) scale(0.8) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .cloud-li .cloud-5 {
  -webkit-transform: translate3d(32vw, 0, 0) scale(1.5) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(32vw, 0, 0) scale(1.5) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .cloud-li .bush-1 {
  color: #4f5d41;
  -webkit-transform: translate3d(11vw, 29vw, 0) scale(3.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(11vw, 29vw, 0) scale(3.2) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
  z-index: 2;
}
.hover .cloud-li .bush-2 {
  color: var(--green);
  -webkit-transform: translate3d(32vw, 27.6vw, 0) scale(4) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
          transform: translate3d(32vw, 27.6vw, 0) scale(4) translateX(calc(-1.3 * var(--cloud-base))) translateY(calc(-0.75 * var(--cloud-base)));
}
.hover .pine-li {
  -webkit-transform: translate3d(-0.75vw, 8vw, 0) scale(2.6);
          transform: translate3d(-0.75vw, 8vw, 0) scale(2.6);
}
.hover .wolf-li {
  -webkit-transform: translate3d(-29vw, 43vw, 0) scale(0.9);
          transform: translate3d(-29vw, 43vw, 0) scale(0.9);
}
.hover .fox-li {
  -webkit-transform: translate3d(-32vw, 44vw, 0) scale(1.1);
          transform: translate3d(-32vw, 44vw, 0) scale(1.1);
}
.hover .owl-li {
  -webkit-transform: translate3d(-34vw, -3vw, 0) scale(0.55);
          transform: translate3d(-34vw, -3vw, 0) scale(0.55);
}
.hover .deer-li {
  -webkit-transform: translate3d(64vw, 18vw, 0) scale(1.1);
          transform: translate3d(64vw, 18vw, 0) scale(1.1);
  --white: var(--light);
}
.hover .squirrel-li {
  -webkit-transform: translate3d(-50vw, -17.5vw, 0) scale(0.6);
          transform: translate3d(-50vw, -17.5vw, 0) scale(0.6);
}
.hover .mush-li {
  -webkit-transform: translate3d(-34vw, 47vw, 0) scale(0.45);
          transform: translate3d(-34vw, 47vw, 0) scale(0.45);
  --leaf: var(--fox);
}
.hover .flo-li {
  -webkit-transform: translate3d(34vw, 2.5vw, 0) scale(0.8);
          transform: translate3d(34vw, 2.5vw, 0) scale(0.8);
}
.hover .cat-li {
  -webkit-transform: translate3d(40.5vw, 0.5vw, 0) scale(1);
          transform: translate3d(40.5vw, 0.5vw, 0) scale(1);
}
.hover .bird-li .bird-1 {
  -webkit-transform: translate3d(80vw, 43vw, 0) scale(0.55) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
          transform: translate3d(80vw, 43vw, 0) scale(0.55) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
}
.hover .bird-li .bird-2 {
  --light: var(--green);
  color: wheat;
  -webkit-transform: translate3d(74vw, 44vw, 0) scale(0.35) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
          transform: translate3d(74vw, 44vw, 0) scale(0.35) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
}
.hover .bird-li .bird-3 {
  --light: var(--green);
  color: wheat;
  -webkit-transform: translate3d(70vw, 44vw, 0) scale(0.35) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
          transform: translate3d(70vw, 44vw, 0) scale(0.35) translateX(calc(-1 * var(--bird-base))) translateY(calc(-1.5 * var(--bird-base))) rotateY(180deg);
}
.hover .apples-li {
  -webkit-transform: translate3d(-20vw, 45.5vw, 0) scale(0.8);
          transform: translate3d(-20vw, 45.5vw, 0) scale(0.8);
}
.hover .apple-li {
  -webkit-transform: translate3d(-46vw, 26.5vw, 0) scale(0.6);
          transform: translate3d(-46vw, 26.5vw, 0) scale(0.6);
}

footer {
  text-align: center;
}

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

button:hover {
  color: var(--fox);
}

button:focus {
  outline: 2px dashed;
  outline-offset: 2px;
}
Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.