.cake {
    --color-base: #6b5e4f;
    --color-top: #a83b3b;
    --color-candle: #0f0202;
    --color-candle-tip: #ff7634;

    scale: 0.7;

    position: relative;
    min-width: 200px;
    min-height: 150px;
    background-color: var(--color-base);

    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.cake::before {
    position: absolute;
    display: block;
    content: "";

    width: 200px;
    height: 100px;
    top: -50px;

    background-color: var(--color-top);
    border-radius: 40px;
}

.cake::after {
    position: absolute;
    display: block;
    content: "";

    width: 20px;
    height: 90px;
    bottom: 90%;
    left: 50%;

    /* box-shadow: 0 -8px 0 4px var(--color-candle-tip); */
    /* border-top: 20px solid var(--color-candle-tip); */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    transform: translateX(-50%);

    /* background-color: var(--color-candle); */
    background-image: linear-gradient(
        to bottom,
        var(--color-candle-tip) 0%,
        /* var(--color-candle-tip) 20px, */ /* var(--color-candle) 20px, */
            var(--color-candle) 100%
    );
}

.skewer-dance {
    --sign: 1;
    --skewer-factor: 12deg;
    --skewer-rotate: 8deg;

    /* transform: skew(calc(16deg * var(--sign))); */
    animation: skewer-dance 400ms ease-in-out infinite alternate;

    /* transform: rotateX(var(--rot)) rotateY(var(--rot)); */
    /* rotate: x var(--rot), y var(--rot); */
}

@keyframes skewer-dance {
    0% {
        transform: skewY(calc(var(--skewer-factor) * var(--sign)));
        rotate: calc(var(--skewer-rotate) * var(--sign) * -1);
    }
    100% {
        transform: skewY(calc(var(--skewer-factor) * var(--sign) * -1));
        rotate: calc(var(--skewer-rotate) * var(--sign));
    }
}