body {
    background: #A9CCE3
}

.box {
    border: 0;
    position: relative;
    display: block;
    width: 600px;
    height: 300px;
    background: 0;
    margin: auto;
    margin-top: 5%
}

.cakeOval {
    position: absolute;
    width: 25%;
    height: 20%;
    background-color: #A93226;
    border-radius: 50%
}

.cakeFilling {
    background-color: #A93226;
    top: 45%;
    left: 37.5%;
    z-index: 3
}

.cakeRect {
    position: absolute;
    width: 25%;
    height: 8%;
    background-color: #FCF3CF
}

.layer1 {
    top: 56%;
    left: 37.5%;
    z-index: 2
}

.cakeBottom {
    background-color: #FCF3CF;
    z-index: 1;
    top: 54%;
    left: 37.5%
}

.cakeMiddle {
    background-color: #FCF3CF;
    z-index: 4;
    top: 43%;
    left: 37.5%
}

.layer2 {
    z-index: 5;
    top: 45%;
    left: 37.5%
}

.cakeTop {
    background-color: #FADBD8;
    z-index: 6;
    top: 35%;
    left: 37.25%;
    width: 25.5%
}

.candle {
    position: absolute;
    height: 10%;
    width: 1.5%;
    background-color: #AF7AC5;
    z-index: 7
}

.flameCir {
    position: absolute;
    width: 200%;
    height: 70%;
    z-index: 8;
    -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    border-radius: 50%;
    top: -70%;
    left: -50%;
    background-color: #E67E22
}

.flameInner {
    position: absolute;
    z-index: 9;
    border-radius: 50%;
    width: 40%;
    height: 40%;
    background-color: rgba(244, 208, 63);
    left: 25%;
    top: 40%;
    opacity: 40%;
    box-shadow: 0 0 1px 1px rgba(244, 208, 63);
    animation-name: flicker;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.can1 {
    top: 30%;
    left: 49.5%
}

.can1 .flameInner {
    animation-duration: 4s
}

.can2 {
    top: 33%;
    left: 57%
}

.can2 .flameInner {
    left: 30%;
    animation-duration: 3s;
    animation-delay: -1s
}

.can3 {
    top: 33%;
    left: 42%
}

.can3 .flameInner {
    left: 29%;
    animation-duration: 5s;
    animation-delay: .5s
}

.can4 {
    top: 38%;
    left: 46%
}

.can4 .flameInner {
    left: 23%;
    animation-duration: 3s;
    animation-delay: -.5s
}

.can5 {
    top: 38%;
    right: 45%
}

.can5 .flameInner {
    left: 24%;
    animation-duration: 4s;
    animation-delay: 1s
}

@keyframes flicker {
    0% {
        box-shadow: 0 0 1px 1px rgba(244, 208, 63)
    }
    10% {
        box-shadow: 0 0 1px .9px rgba(244, 208, 63)
    }
    20% {
        box-shadow: 0 0 1px 1px rgba(244, 208, 63)
    }
    30% {
        box-shadow: 0 0 1px .9px rgba(244, 208, 63)
    }
    40% {
        box-shadow: -1px 0 1px .1px rgba(244, 208, 63);
        opacity: 15%
    }
    50% {
        box-shadow: -.5px 0 1px .5px rgba(244, 208, 63)
    }
    60% {
        box-shadow: .5px 0 1px .3px rgba(244, 208, 63)
    }
    70% {
        box-shadow: 0 0 1px .9px rgba(244, 208, 63)
    }
    80% {
        box-shadow: 0 0 1px 1px rgba(244, 208, 63)
    }
}

/* 90% {
    box-shadow: 0 0 1px .9px rgba(244, 208, 63)
}


}
100% {
    box-shadow: 0 0 1px 1px rgba(244, 208, 63)
}

} */