body {
    background-color: #5A6581;
    color: #FAFBFF;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.audioContainer {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.base {
    width: 300px;
    height: 300px;
    background-color: #733A27;
    border-radius: 16px;
}

.birthdayContainer {
    position: relative;
    transform-origin: center 0;
    transform: scale(0.8);

}

.cake {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.cakeContainer {
    display: flex;
    justify-content: center;
    padding-top: 95px;
}

.candle {
    position: absolute;
    top: -95px;
    background-color: #2F4274;
    width: 23px;
    height: 95px;
    border-top: 8px;
}

.card {
    background-color: #FAFBFF;
    width: 40%;
    border-radius: 50px;
    color: #2F4274;
}

.cardContainer {
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.layer {
    background-color: #FEF4D0;
    width: 300px;
}

.message {
    padding: 25px 70px;
}

.messageTo {
    padding-bottom: 10px;
}

.messageFrom {
    text-align: right;
    padding-top: 10px;
}

.layerOne {
    height: 126px;
    position: absolute;
}

.layerTwo {
    position: absolute;
    height: 70px;
    top: 200px;
}

.top {
    position: absolute;
    background-color: #733A27;
    height: 29px;
    width: 334px;
    z-index: 10;
    border-radius: 16px;
}

.nameContainer {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.titleContainer {
    display: flex;
    justify-content: center;
}

.plate {
    background-color: #FAFBFF;
    border-radius: 50%;
    width: 562px;
    height: 263px;
    position: absolute;
    z-index: -1;
    top: 145px;
}

/* Flame code from https://codepen.io/fazlurr/pen/gPMJMK */
.flame {
    position: absolute;
    background-color: orange;
    width: 20px;
    height: 35px;
    border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
    top: -34px;
    left: 50%;
    margin-left: -10px;
    z-index: 10;
    box-shadow:
        0 0 10px rgba(orange, 0.5),
        0 0 20px rgba(orange, 0.5),
        0 0 60px rgba(orange, 0.5),
        0 0 80px rgba(orange, 0.5);
    transform-origin: 50% 90%;
    animation: flicker 1s ease-in-out alternate infinite;
}

.out {
    display: none;
}


@keyframes flicker {
    0% {
        transform: skewX(5deg);
        box-shadow:
            0 0 10px rgba(orange, 0.2),
            0 0 20px rgba(orange, 0.2),
            0 0 60px rgba(orange, 0.2),
            0 0 80px rgba(orange, 0.2)
    }

    25% {
        transform: skewX(-5deg);
        box-shadow:
            0 0 10px rgba(orange, 0.5),
            0 0 20px rgba(orange, 0.5),
            0 0 60px rgba(orange, 0.5),
            0 0 80px rgba(orange, 0.5)
    }

    50% {
        transform: skewX(10deg);
        box-shadow:
            0 0 10px rgba(orange, 0.3),
            0 0 20px rgba(orange, 0.3),
            0 0 60px rgba(orange, 0.3),
            0 0 80px rgba(orange, 0.3)
    }

    75% {
        transform: skewX(-10deg);
        box-shadow:
            0 0 10px rgba(orange, 0.4),
            0 0 20px rgba(orange, 0.4),
            0 0 60px rgba(orange, 0.4),
            0 0 80px rgba(orange, 0.4)
    }

    100% {
        transform: skewX(5deg);
        box-shadow:
            0 0 10px rgba(orange, 0.5),
            0 0 20px rgba(orange, 0.5),
            0 0 60px rgba(orange, 0.5),
            0 0 80px rgba(orange, 0.5)
    }
}