* {
    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;
    background: hsl(180, 30%, calc(var(--lightness, 50) * 1%));
}

.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: 240px;
    height: 100px;
    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: 289.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;
}