*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: black;
}
#main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}
#candle{
    margin-top: 10rem;
    width: 7.5rem;
    height: 20rem;
    position: relative;
    display: grid;
}
#flame,
#thread,
#blue-part,
#glow,
#candle-bottom{
    position: absolute;
    justify-self: center;
}
#thread::after,
#blue-part::after,
#wax::before{
    content: '';
    display: block;
}
#flame{
    bottom: 104%;
    border-radius: 50% 50% 20% 20%;
    height: 30%;
    z-index: 3;
    background: linear-gradient(white 80%, transparent);
    width: 14.8%;
    box-shadow: 0px -5px 7px 0px orange;
    transform-origin: bottom;
    animation:flame-animation 4s linear infinite, grow-flame 4s linear infinite ;
}
#thread{
    width: .35rem;
    height: 8%;
    margin: 0 auto;
    border-radius: 40% 40% 0 0;
    background: linear-gradient(#ff7800, black 40%);
    bottom: 100%;
    z-index: 2;
}
#thread::after{
    width: 100%;
    height: 30%;
    top: 71%;
    position: absolute;
    background: linear-gradient(0deg, #898989, #000000);
}
#blue-part{
    width: 16%;
    height: 13%;
    background: rgba(0, 133, 255, .7);
    z-index: 2;
    bottom: 101%;
    border-radius: 50% 50% 35% 35%; 
}
#blue-part::after{
    width: 75%;
    border-radius: 50%;
    background: rgb(0 0 0 / 39%);
    position: relative;
    height: 70%;
    margin: 0 auto;
    top: 30%;
}
#wax{
    width: 100%;
    z-index: 1;
    height: 70%;
    position: absolute;
    background: linear-gradient(180deg, #a7a2a2, #212121);
    box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0px 50px 0 rgba(0, 0, 0, 0.4);
}
#wax::before{
    width: 100%;
    height: 10%;
    bottom: 95%;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(#d1c3ac, #6f6f6f 46%, #817e7c 67%);
}
#candle-bottom{
    top:67%;
    height: 10%;
    width: 115%;
    border-radius: 50%;
    background: radial-gradient(#121212, #101010);
}
 #glow{ 
    border-radius: 100%;
    width: 5rem;
    filter: blur(2.25rem);
    background: #ff6000;
    height: 8rem;
    bottom: 100%;
    z-index: 2;
    animation: flicker_animation .1s infinite;
}
@keyframes flicker_animation{
    50%{
        opacity: 0.8;
    }
}
/* here is some error which i can not fixed ; if some fixed it please inform me in my gmail: nathkaran327@gmail.com */
@keyframes flame_animation{ 
    0%,
    100% {
        transform: rotate(-2deg);
    }
    50%{
        transform: rotate(2deg);
    }
}
@keyframes glow_flame{
    0%,
    100%{
        height:30%;
    }
    50%{
        height:33%;
    }
}