html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #252432;
  overflow: hidden;
}

.egg-switch {
  --background: #171827;
  --shadow: rgba(246, 248, 255, 0.08);
  --shadow-inner: rgba(13, 15, 24, 0.8);
  --egg: #fff;
  --egg-back: #f4d2ad;
  --egg-yellow: linear-gradient(
    135deg,
    rgba(239, 202, 51, 1) 50%,
    rgba(237, 139, 2, 1) 100%
  );
  --egg-shadow: rgba(13, 15, 24, 0.25);
  --flipper: #f6f8ff;
  --flipper-hand: #8a91b4;
  --flipper-shadow: #646b8c;
  perspective: 160px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.egg-switch input {
  display: none;
}
.egg-switch input + div {
  width: 64px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  background: var(--background);
  box-shadow:
    inset 0 1px 3px 0 var(--shadow-inner),
    0 1px 0 0 var(--shadow);
}
.egg-switch input + div .egg {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  -webkit-animation: egg 2s linear forwards;
  animation: egg 2s linear forwards;
  transform-style: preserve-3d;
}
.egg-switch input + div .egg .front:before,
.egg-switch input + div .egg .front:after,
.egg-switch input + div .egg .back:before,
.egg-switch input + div .egg .back:after {
  content: "";
}
.egg-switch input + div .egg .front:before,
.egg-switch input + div .egg .front:after,
.egg-switch input + div .egg .back:before,
.egg-switch input + div .egg .back:after,
.egg-switch input + div .egg .back {
  position: absolute;
  border-radius: var(--border-radius, 50%);
  width: var(--width, var(--size, 24px));
  height: var(--height, var(--size, 24px));
  left: var(--left, var(--spacing, 0));
  top: var(--top, var(--spacing, 0));
  background: var(--background, var(--egg));
}
.egg-switch input + div .egg .front {
  width: 24px;
  height: 24px;
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.egg-switch input + div .egg .front:before {
  --background: var(--egg);
}
.egg-switch input + div .egg .front:after {
  --size: 12px;
  --spacing: 6px;
  --background: var(--egg-yellow);
  transform: translateZ(0);
  box-shadow: 1px 1px 3px var(--egg-shadow);
}
.egg-switch input + div .egg .back {
  --background: none;
}
.egg-switch input + div .egg .back:before,
.egg-switch input + div .egg .back:after {
  --height: 14px;
  --background: var(--egg-back);
}
.egg-switch input + div .egg .back:before {
  --border-radius: 12px 12px 0 0;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 90%,
    75% 100%,
    50% 90%,
    25% 100%,
    0 80%
  );
  clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
}
.egg-switch input + div .egg .back:after {
  --border-radius: 0 0 12px 12px;
  --top: 10px;
  -webkit-clip-path: polygon(
    0 0,
    25% 20%,
    50% 10%,
    75% 20%,
    100% 10%,
    100% 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    25% 20%,
    50% 10%,
    75% 20%,
    100% 10%,
    100% 100%,
    0 100%
  );
}
.egg-switch input + div .flipper {
  position: absolute;
  display: flex;
  align-items: center;
  top: 7px;
  left: 100%;
  opacity: 0;
  transform-origin: 20px 50%;
  transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(0.8);
  -webkit-animation: flipper 2s linear;
  animation: flipper 2s linear;
}
.egg-switch input + div .flipper:after {
  content: "";
  width: 20px;
  height: 6px;
  border-radius: 2px 1px 1px 2px;
  display: block;
  background: var(--flipper-hand);
  box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
}
.egg-switch input + div .flipper svg {
  width: 39px;
  height: 18px;
  display: block;
  color: var(--flipper);
}
.egg-switch input:checked + div .flipper {
  -webkit-animation: none;
  animation: none;
}
.egg-switch input:checked + div .egg {
  -webkit-animation: crack 2s linear forwards;
  animation: crack 2s linear forwards;
}
.egg-switch input:checked + div .egg .front:before {
  -webkit-animation: egg-white 0.8s linear forwards 1.4s;
  animation: egg-white 0.8s linear forwards 1.4s;
}
.egg-switch input:checked + div .egg .back:before,
.egg-switch input:checked + div .egg .back:after {
  --animate-y: -16px;
  transform: translateZ(-2px);
  -webkit-animation: egg-crack 0.8s linear forwards 1.4s;
  animation: egg-crack 0.8s linear forwards 1.4s;
}
.egg-switch input:checked + div .egg .back:after {
  --animate-y: 16px;
}

@-webkit-keyframes egg {
  0%,
  40% {
    transform: rotateY(180deg) translateX(-32px);
  }
  50% {
    transform: rotateY(180deg) translateX(-33px);
  }
  75% {
    transform: translateZ(32px);
  }
  90% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(0.8);
  }
}

@keyframes egg {
  0%,
  40% {
    transform: rotateY(180deg) translateX(-32px);
  }
  50% {
    transform: rotateY(180deg) translateX(-33px);
  }
  75% {
    transform: translateZ(32px);
  }
  90% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(0.8);
  }
}
@-webkit-keyframes egg-white {
  0% {
    opacity: 0.4;
    transform: scale(0.4);
  }
  60%,
  100% {
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@keyframes egg-white {
  0% {
    opacity: 0.4;
    transform: scale(0.4);
  }
  60%,
  100% {
    transform: scale(1);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes egg-crack {
  0% {
    transform: translateZ(-2px);
  }
  70% {
    transform: translateZ(-2px) scale(0.8) rotate(4deg)
      translateY(var(--animate-y));
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateZ(-2px) scale(0.8) rotate(8deg)
      translateY(calc(var(--animate-y) * 1.5));
  }
}
@keyframes egg-crack {
  0% {
    transform: translateZ(-2px);
  }
  70% {
    transform: translateZ(-2px) scale(0.8) rotate(4deg)
      translateY(var(--animate-y));
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateZ(-2px) scale(0.8) rotate(8deg)
      translateY(calc(var(--animate-y) * 1.5));
  }
}
@-webkit-keyframes crack {
  0% {
    transform: rotateY(180deg) scaleX(0.8);
  }
  30% {
    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
      translateZ(-24px) scaleX(0.8);
  }
  40% {
    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
      scaleX(0.8);
  }
  60%,
  80% {
    transform: rotateY(180deg) translateX(-32px) scaleX(0.8);
  }
  100% {
    transform: rotateY(180deg) translateX(-32px);
  }
}
@keyframes crack {
  0% {
    transform: rotateY(180deg) scaleX(0.8);
  }
  30% {
    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
      translateZ(-24px) scaleX(0.8);
  }
  40% {
    transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px)
      scaleX(0.8);
  }
  60%,
  80% {
    transform: rotateY(180deg) translateX(-32px) scaleX(0.8);
  }
  100% {
    transform: rotateY(180deg) translateX(-32px);
  }
}
@-webkit-keyframes flipper {
  30% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(-16px);
  }
  50% {
    transform: translateX(-24px);
  }
  60% {
    transform: translateX(-32px) rotateY(50deg) translateZ(16px);
  }
  70% {
    transform: translateX(14px);
  }
  85%,
  100% {
    transform: translateX(60px);
  }
  15%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes flipper {
  30% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(-16px);
  }
  50% {
    transform: translateX(-24px);
  }
  60% {
    transform: translateX(-32px) rotateY(50deg) translateZ(16px);
  }
  70% {
    transform: translateX(14px);
  }
  85%,
  100% {
    transform: translateX(60px);
  }
  15%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}