* {
  box-sizing: border-box;
}
:root {
  --tongue: #c12115;
  --pupil: #fff;
  --icing: #f2f2f2;
  --stroke: #1a1a1a;
}
body {
  --frosting: hsl(var(--frosting-hue, 0), 100%, 55%);
  --lightness: 50;
  --flame: 0;
  --glow-hue: 40;
  --glow-saturation: 50;
  --glow-lightness: 35;
  --glow-alpha: 0.4;
  --transparency-alpha: 0;
  --glow: hsla(var(--glow-hue), calc(var(--glow-saturation) * 1%), calc(var(--glow-lightness) * 1%), var(--glow-alpha));
  --transparent: hsla(0, 0%, 0%, var(--transparency-alpha));
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

}
.whitespace {
  width: 7px;
}
.birthday-button {
  position: relative;
  transform: scale(0.6);
  cursor: pointer;
}
.birthday-button__text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: bold;
}
.birthday-button__text .char {
  display: inline-block;
  color: hsl(var(--hue, 0), calc(var(--char-sat, 0) * 1%), calc(var(--char-light, 0) * 1%));
}
.birthday-button:before {
  content: '';
  position: absolute;
  height: 240px;
  width: 240px;
  background: radial-gradient(var(--glow), var(--transparent) 30%), radial-gradient(var(--glow), var(--transparent) 50%);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%) scale(calc(var(--flame) * 3));
  z-index: 2;
  filter: blur(15px);
  opacity: var(--flame);
}
.birthday-button:after {
  content: '';
  height: 30px;
  width: 400px;
  filter: blur(15px);
  position: absolute;
  background: radial-gradient(var(--glow), var(--transparent) 20%), radial-gradient(var(--glow), var(--transparent));
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(var(--flame) * 1));
  opacity: var(--flame);
}
.birthday-button__button {
  width: 400px;
  height: 150px;
  position: relative;
  border: 0;
  background: var(--icing);
  border-radius: 14px;
  cursor: pointer;
}
.birthday-button__cake {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 489.5px;
  display: none;
}
.cake__eye-body {
  fill: var(--stroke);
}
.cake__eye-pupil {
  fill: var(--pupil);
}
.cake__tongue {
  fill: var(--tongue);
}
.cake__mouth-opening {
  fill: var(--stroke);
  stroke: var(--stroke);
}
.cake__sprinkle {
  --sprinkle: hsl(var(--sprinkle-hue, 0), 100%, 75%);
  fill: var(--sprinkle);
}
.cake__frosting--start {
  fill: var(--frosting);
}
.cake__frosting--duplicate {
  fill: var(--frosting);
}
.candle__flame {
  opacity: var(--flame, 0);
}
.candle__flame-outer {
  fill: #ff711f;
}
.candle__flame-inner {
  fill: #edca1d;
}
.face__stroke {
  stroke: var(--stroke);
}
.cake__candle:nth-of-type(1) {
  --flame: 0;
}
.cake__candle:nth-of-type(2) {
  --flame: 0;
}
.cake__candle:nth-of-type(3) {
  --flame: 0;
}
label {
  height: 44px;
  width: 44px;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  cursor: pointer;
}
label > svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
label path {
  fill: #476b6b;
}
label svg:nth-of-type(1) {
  display: none;
}
[type='checkbox'] {
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  left: 100%;
}
:checked ~ label svg:nth-of-type(1) {
  display: block;
}
:checked ~ label svg:nth-of-type(2) {
  display: none;
}