@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');


.holder {
    display: flex;
    bottom: 85px;
    position: absolute;
    right: 190px;
}

.holder *, .holder *:before, .holder *:after {
    position: absolute;
    content: "";
}

.candle {
    width: 30vmin;
    aspect-ratio: 1;


    /* demo */
    position: absolute;
    top: 0%;
    left: 0%;

}

.candle:before {
    content: "";
    display: block;
    width: 7vmin;
    height: 1.5vmin;
    background: linear-gradient(to right, #d605, #321, #251c27);
    top: 60px;
    right: 56px;
    position: absolute;
    transform: translate(-50%, -50%) rotate(90deg);
    box-shadow: 0 0 5vmin 3vmin #251c27aa, inset -1vmin 0 1.5vmin #251c27aa
}

.candle:after {
    content: "";
    display: block;
    width: 3vmin;
    height: 2vmin;
    background: linear-gradient(45deg, #f002, #fff0),
    linear-gradient(to right, #d68356, #e5653e 3%, #d0363b 20%, #251c27);
    top: 33px;
    left: 14.9vmin;
    border-radius: 100% / 120% 80% 80% 120%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(90deg);
    box-shadow: 0 0 5vmin 3vmin #251c27aa, inset -1vmin 0 1.5vmin #251c27
}



.flame {
    width: 24px;
    height: 70px !important;
    left: 50%;
    transform-origin: 50% 100%;
    transform: translateX(-50%);
    bottom: 85%;
    border-radius: 50% 50% 20% 20%;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(white 80%, transparent);
    background: -webkit-linear-gradient(white 80%, transparent);
    background: -o-linear-gradient(white 80%, transparent);
    background: -ms-linear-gradient(white 80%, transparent);
    background: linear-gradient(white 80%, transparent);
    animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
    0%, 100% {
        transform: translateX(-50%) rotate(-2deg);
    }
    50% {
        transform: translateX(-50%) rotate(2deg);
    }
}

@keyframes enlargeFlame {
    0%, 100% {
        height: 120px;
    }
    50% {
        height: 140px;
    }
}

.glow {
    width: 26px;
    height: 60px;
    border-radius: 50% 50% 35% 35%;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    background: rgba(0, 133, 255, .7);
    box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}

.glow:before {
    width: 70%;
    height: 60%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
    width: 100px;
    height: 180px;
    left: 50%;
    top: -55%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #ff6000;
    -webkit-filter: blur(50px);
    -moz-filter: blur(60px);
    -o-filter: blur(60px);
    -ms-filter: blur(60px);
    filter: blur(60px);
    animation: blinkIt .1s infinite;
}

@keyframes blinkIt {
    50% {
        opacity: .8;
    }
}




@keyframes burn {
    0%, 100% {
        border-radius: 5% 87% 45% 85%;
        width: 30vmin;
    }
    10% {
        border-radius: 5% 85% 49% 82%;
    }
    20% {
        border-radius: 0% 85% 45% 87%;
        width: 31vmin;
    }
    30%, 90% {
        border-radius: 5% 85% 49% 82%;
    }
    40% {
        border-radius: 0% 85% 45% 87%;
        width: 32vmin;
    }
    50% {
        border-radius: 2% 87% 42% 90%;
    }
    60% {
        border-radius: 5% 97% 45% 88%;
    }
    70% {
        border-radius: 2% 87% 42% 90%;
        width: 31vmin
    }
    80% {
        border-radius: 5% 97% 45% 88%;
    }
}

/* see comment below */
#animation:checked ~ .match {
    animation: burn 4s infinite;
    width: 50vmin;
}

.match {
    /*
    The animation is disabled because it can be CPU-consuming.
    Uncomment the next CSS line to re-enable it.
    */
    /* animation: burn 4s infinite; */
    width: 30vmin;
    aspect-ratio: 1;
    background: radial-gradient(100% 100% at 90% 90%, #251c27, #251c2733 20%, #251c2700 50%),
    radial-gradient(farthest-side at 110% 120%, #251c27, #631, #cb6c3b88, #0000),
    radial-gradient(at 100% 100%, #fc08, #cb6c3b, #eebd7600 60%),
    linear-gradient(135deg, #fff0 20%, #ff0);
    background-color: #ffe;
    border-radius: 2% 87% 45% 85%;
    box-shadow: inset 2vmin 2vmin 2vmin -1.5vmin #f808,
    inset -1vmin -1vmin 5vmin -3vmin #00f7,
    inset 0vmin -1vmin 5vmin -3vmin #00f8,
    inset -1vmin -1vmin 2vmin -2vmin #251c27,
    inset -1vmin -1vmin 3vmin -1vmin #251c27,
    inset -1vmin -1vmin 2vmin #fc08,
    -0.5vmin -0.5vmin 1vmin #ff08,
    -1vmin -1vmin 2vmin #ce8c47,
    -2vmin -2vmin 10vmin 1vmin #251c27,
    -6vmin -6vmin 35vmin 3vmin #fa06;
    filter: blur(0.1vmin);
    transform: rotate(45deg);
    /* demo */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -15vmin) rotate(45deg);
}

.match::after {
    content: "";
    display: block;
    width: 6vmin;
    height: 5vmin;
    background: linear-gradient(45deg, #f002, #fff0),
    linear-gradient(to right, #d68356, #e5653e 3%, #d0363b 20%, #251c27);
    top: 24vmin;
    left: 24vmin;
    border-radius: 100% / 120% 80% 80% 120%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 5vmin 3vmin #251c27aa, inset -1vmin 0 1.5vmin #251c27;
}

.match::before {
    content: "";
    display: block;
    width: 20vmin;
    height: 3vmin;
    background: linear-gradient(to right, #d605, #321, #251c27);
    top: 32vmin;
    left: 32vmin;
    position: absolute;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 5vmin 3vmin #251c27aa, inset -1vmin 0 1.5vmin #251c27aa
}