@-webkit-keyframes blinky {
  0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
    transform: scaleY(1);
  }
  10%, 20%, 70% {
    transform: scaleY(0);
  }
}
@keyframes blinky {
  0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
    transform: scaleY(1);
  }
  10%, 20%, 70% {
    transform: scaleY(0);
  }
}
:root {
  --black: #8f3632;
  --white: #fff;
  --primary-color: #ff9441;
  --primary-color-dark: #dd814b;
  --primary-color-tint: #ffc562;
  --secondary-color: #697f31;
  --secondary-color-tint: #98b847;
  --tertiary-color: #ebd24c;
  --tertiary-color-dark: #d3b35a;
  --tertiary-color-tint: #fcf691;
  --accent-color: #e63900;
  --background: #ebd5f6;
  --background-shadow: #d8ade3;
  --pumpkin-inside-color: var(--black);
  --darkness-color: #753f8e;
  --stroke-width: 0.3125rem;
  --transition-dur: 0.5s;
  --flip: 1;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: var(--background);
  line-height: 1;
}

.pumpkin {
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.pumpkin *,
.pumpkin *::before,
.pumpkin *::after {
  position: absolute;
  transition: background-color var(--transition-dur);
}
.pumpkin::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  height: 3rem;
  width: 70%;
  border-radius: 100%;
  background-color: var(--background-shadow);
  transition: background-color var(--transition-dur);
}
.pumpkin-ear {
  border-top-left-radius: 50% 80%;
  border-top-right-radius: 50% 80%;
  border-bottom-right-radius: 50% 20%;
  border-bottom-left-radius: 50% 20%;
  --ear-position-x: 2.75rem;
  --ear-tip-position-x: -1.5rem;
  z-index: 4;
  bottom: calc(100% - 4rem);
  height: 10rem;
  width: 5.5rem;
  transform-origin: center bottom;
  transform: rotate(calc(40deg * var(--flip)));
  background-color: var(--primary-color);
  overflow: hidden;
}
.pumpkin-ear::before {
  content: "";
  top: -0.5rem;
  left: var(--ear-tip-left);
  right: var(--ear-tip-right);
  height: 4rem;
  width: 140%;
  transform: rotate(calc(20deg * var(--flip)));
  border-radius: 100%;
  border: var(--stroke-width) solid var(--black);
  transition: border-color var(--transition-dur);
}
.pumpkin-ear-left {
  --flip: -1;
  --ear-tip-left: var(--ear-tip-position-x);
  left: var(--ear-position-x);
}
.pumpkin-ear-right {
  --ear-tip-right: var(--ear-tip-position-x);
  right: var(--ear-position-x);
}
.pumpkin-eye {
  --eye-position-x: 4.5em;
  --eye-inner-position-x: 0.375em;
  --eye-light-position-x: 35%;
  --eye-br-bottom-y: 40%;
  top: 0;
  height: 3.5em;
  width: 3.25em;
}
.pumpkin-eye::before {
  content: "";
  z-index: 5;
  top: 0;
  left: var(--eye-inner-left);
  right: var(--eye-inner-right);
  height: 1.5em;
  width: 1.5em;
  border-radius: 100%;
  background-color: var(--primary-color);
}
.pumpkin-eye-inner {
  height: 100%;
  width: 100%;
  transform: translateZ(0);
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: var(--eye-br-bottom-left);
  border-bottom-right-radius: var(--eye-br-bottom-right);
  box-shadow: var(--eye-box-shadow);
  background-color: var(--pumpkin-inside-color);
  overflow: hidden;
}
.pumpkin-eye-inner::before, .pumpkin-eye-inner::after {
  content: "";
  bottom: -6em;
  left: var(--eye-light-left);
  right: var(--eye-light-right);
  height: 300%;
  width: 300%;
  border-radius: 100%;
  opacity: var(--eye-light-opacity, 0);
  transition: opacity var(--transition-dur);
}
.pumpkin-eye-inner::before {
  transform: scale(1.1);
  background-color: var(--tertiary-color);
  -webkit-animation: var(--pumpkin-light-animation);
          animation: var(--pumpkin-light-animation);
}
.pumpkin-eye-inner::after {
  transform: scale(0.9);
  background-color: var(--tertiary-color-tint);
  -webkit-animation: var(--pumpkin-light-inner-animation);
          animation: var(--pumpkin-light-inner-animation);
}
.pumpkin-eye-left {
  --eye-inner-right: var(--eye-inner-position-x);
  --eye-br-bottom-left: 55% var(--eye-br-bottom-y);
  --eye-br-bottom-right: 45% var(--eye-br-bottom-y);
  --eye-box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);
  --eye-light-left: var(--eye-light-position-x);
  left: var(--eye-position-x);
}
.pumpkin-eye-right {
  --eye-inner-left: var(--eye-inner-position-x);
  --eye-br-bottom-left: 45% var(--eye-br-bottom-y);
  --eye-br-bottom-right: 55% var(--eye-br-bottom-y);
  --eye-box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);
  --eye-light-right: var(--eye-light-position-x);
  right: var(--eye-position-x);
}
.pumpkin-nose {
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom-right-radius: 50% 70%;
  border-bottom-left-radius: 50% 70%;
  top: 2.5em;
  left: 50%;
  height: 0.5em;
  width: 0.75em;
  transform: translateX(-50%);
  background-color: var(--black);
}
.pumpkin-mouth {
  top: 3.5em;
  left: 50%;
  height: 0.625em;
  width: 4.75em;
  transform: translateX(-50%);
  overflow: hidden;
}
.pumpkin-mouth::before, .pumpkin-mouth::after {
  content: "";
  bottom: 0;
  height: 200%;
  width: calc(50% - var(--stroke-width) * 2);
  border-radius: 100%;
  border: var(--stroke-width) solid var(--black);
  transition: border-color var(--transition-dur);
}
.pumpkin-mouth::before {
  left: calc(50% - var(--stroke-width) / 2);
  border-right: 0;
}
.pumpkin-mouth::after {
  right: calc(50% - var(--stroke-width) / 2);
  border-left: 0;
}
.pumpkin-cheek {
  --cheek-position-x: 2rem;
  --cheek-light-position-x: 117%;
  top: 2.5rem;
  height: 3.75rem;
  width: 3rem;
  transform: rotate(calc(15deg * var(--flip)));
  border-radius: 100%;
  background-color: var(--pumpkin-inside-color);
  overflow: hidden;
}
.pumpkin-cheek::before {
  content: "";
  left: var(--cheek-light-left);
  right: var(--cheek-light-right);
  top: -1.75em;
  height: 280%;
  width: 320%;
  border-radius: 100%;
  background-color: var(--tertiary-color);
  opacity: var(--cheek-light-opacity, 0);
  transition: opacity var(--transition-dur);
  -webkit-animation: var(--pumpkin-light-animation);
          animation: var(--pumpkin-light-animation);
}
.pumpkin-cheek-left {
  --flip: -1;
  --cheek-light-left: var(--cheek-light-position-x);
  left: var(--cheek-position-x);
  box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-cheek-right {
  --cheek-light-right: var(--cheek-light-position-x);
  right: var(--cheek-position-x);
  box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-face {
  z-index: 5;
  width: 100%;
  top: 8rem;
}
.pumpkin-body {
  position: relative;
  z-index: 1;
  height: 16rem;
  width: 21rem;
}
.pumpkin-body-front {
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-right-radius: 45% 40%;
  border-bottom-left-radius: 45% 40%;
  position: absolute;
  z-index: 2;
  left: 50%;
  height: 100%;
  width: 65%;
  transform: translateX(-50%);
  background-color: var(--primary-color-dark);
  overflow: hidden;
}
.pumpkin-body-front::before {
  content: "";
  top: -10%;
  left: 50%;
  height: 100%;
  width: 90%;
  transform: translateX(-50%);
  border-radius: inherit;
  background-color: var(--primary-color);
}
.pumpkin-body-side {
  --side-br-top-y: 55%;
  --side-highlight-position-x: 0;
  z-index: 1;
  bottom: 1%;
  height: 100%;
  width: 70%;
  border-bottom-left-radius: 50% 45%;
  border-bottom-right-radius: 50% 45%;
  background-color: var(--primary-color-dark);
  overflow: hidden;
}
.pumpkin-body-side::before {
  content: "";
  top: -10%;
  left: var(--side-highlight-left);
  right: var(--side-highlight-right);
  height: 100%;
  width: 120%;
  border-radius: inherit;
  background-color: var(--primary-color);
}
.pumpkin-body-side-left {
  --side-highlight-left: var(--side-highlight-position-x);
  left: 0;
  border-top-left-radius: 65% var(--side-br-top-y);
  border-top-right-radius: 35% var(--side-br-top-y);
}
.pumpkin-body-side-right {
  --side-highlight-right: var(--side-highlight-position-x);
  right: 0;
  border-top-left-radius: 35% var(--side-br-top-y);
  border-top-right-radius: 65% var(--side-br-top-y);
}
.pumpkin-body-smol {
  position: relative;
  z-index: 2;
  height: 10rem;
  width: 12rem;
  margin-bottom: -2rem;
}
.pumpkin-body-smol::after {
  content: "";
  bottom: -1rem;
  left: 50%;
  height: 3rem;
  width: 80%;
  transform: translateX(-50%);
  border-radius: 100%;
  background-color: var(--primary-color-dark);
}
.pumpkin-leaves {
  z-index: 4;
  bottom: 2.5rem;
  left: 50%;
  width: 6.5rem;
  transform: translateX(-50%);
}
.pumpkin-leaf {
  height: 3rem;
  width: 3rem;
  transform: rotate(calc(-15deg * var(--flip))) rotateY(var(--leaf-rotate-y, 0deg));
  border-top-right-radius: 100%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 50%;
  background-color: var(--accent-color);
}
.pumpkin-leaf::before {
  content: "";
  left: 75%;
  bottom: -0.5rem;
  height: 70%;
  width: var(--stroke-width);
  transform: rotate(-45deg);
  border-radius: var(--stroke-width);
  background-color: var(--black);
}
.pumpkin-leaf-right {
  --leaf-rotate-y: 180deg;
  --flip: -1;
  right: 0;
}
.pumpkin-stem {
  z-index: 3;
  top: -1%;
  left: 50%;
  width: 25%;
  height: 10%;
  transform: translateX(-50%);
}
.pumpkin-stem-base {
  height: 100%;
  width: 100%;
  border-radius: 100%;
  background-color: var(--secondary-color);
}
.pumpkin-stem-stick {
  z-index: 2;
  bottom: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: var(--secondary-color);
  transform: translateX(-50%);
}
.pumpkin-stem-stick::before, .pumpkin-stem-stick::after {
  content: "";
  width: 100%;
  height: 50%;
  border-radius: 100%;
}
.pumpkin-stem-stick::before {
  top: -25%;
  background-color: var(--secondary-color-tint);
}
.pumpkin-stem-stick::after {
  bottom: -25%;
}

.darkness {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  max-width: 100%;
  background-color: var(--darkness-color);
  opacity: var(--darkness-opacity, 0);
  transition: var(--transition-dur);
}

.pumpkin-control {
  position: absolute;
  opacity: 0;
}
.pumpkin-control:checked + .pumpkin {
  --black: #3a0f1d;
  --primary-color: #6c2728;
  --primary-color-dark: #5d212c;
  --secondary-color: #2c1c1c;
  --secondary-color-tint: #402c2a;
  --accent-color: #601709;
  --background-shadow: #31154c;
  --pumpkin-inside-color: var(--tertiary-color-dark);
  --eye-light-opacity: 0.7;
  --cheek-light-opacity: 0.7;
  --pumpkin-light-animation: flicker 7s var(--transition-dur) infinite;
  --pumpkin-light-inner-animation: flickerPulse 6s var(--transition-dur) infinite;
}
.pumpkin-control:checked ~ .darkness {
  --darkness-opacity: 1;
}

@-webkit-keyframes flicker {
  0%, 20%, 50%, 60%, 90%, 100% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  40% {
    transform: scale(1.2) translateX(0.75rem);
    opacity: 0.4;
  }
  80% {
    transform: scale(1.3) translateX(-0.5rem);
    opacity: 0.2;
  }
}

@keyframes flicker {
  0%, 20%, 50%, 60%, 90%, 100% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  40% {
    transform: scale(1.2) translateX(0.75rem);
    opacity: 0.4;
  }
  80% {
    transform: scale(1.3) translateX(-0.5rem);
    opacity: 0.2;
  }
}
@-webkit-keyframes flickerPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}
@keyframes flickerPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}