.candles {
  width: 500px;
  height: 200px;
  position: absolute;
  left: -30px;
  bottom: 0;
}

.candles-left {
  width: 200px;
  height: 500px;
  position: absolute;
  left: 0;
  bottom: -20px;
}

.candle {
  font-size: inherit;
  width: 2em;
  height: 5em;
  background: radial-gradient(circle at top, rgb(255, 238, 141) 20%, rgb(250, 147, 121) 120%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: -5px;
  left: 50px;
  margin-left: -0.5em;
  border-radius: 0.2em 0.6em 0 0;
}
.candle .wick {
  border: 3px solid #332;
  border-color: #332 transparent transparent #332;
  border-radius: 100% 0%;
  width: 0.4em;
  height: 0.9em;
  transform: rotate(-7deg);
}
.candle .wick, .candle .wick:before {
  position: absolute;
  bottom: 100%;
  left: 35%;
}
.candle .wick .flame-intensity {
  -webkit-animation: flicker-flame 5s infinite alternate;
          animation: flicker-flame 5s infinite alternate;
  transform-origin: 50% 100%;
  width: 1em;
  height: 1em;
  position: absolute;
  bottom: 50%;
  left: 0%;
  margin-left: -0.8em;
}
.candle .wick .flame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle 2em at bottom, rgba(255, 251, 22, 0.5), rgba(180, 103, 21, 0.5), rgba(255, 240, 30, 0.5));
  transform: skewX(50deg) rotate(45deg) scale(0.6, 7) rotate(15deg) skewX(-50deg);
  transform-origin: 50% 100%;
  border-radius: 0 1em 1em 1em;
  -webkit-animation: flame-dance 5s infinite alternate;
          animation: flame-dance 5s infinite alternate;
}
.candle .wick .flame:before {
  content: "";
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 5%;
  background: inherit;
  border-radius: inherit;
}

@-webkit-keyframes flicker-light {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.3;
  }
  30% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
}

@keyframes flicker-light {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.3;
  }
  30% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
}
@-webkit-keyframes flicker-flame {
  0% {
    opacity: 0;
    transform: scale(1, 0);
  }
  10% {
    opacity: 0.5;
    transform: scale(1, 0.9);
  }
  20% {
    opacity: 0.3;
    transform: scale(0.8, 0.6);
  }
  23% {
    opacity: 0.4;
    transform: scale(0.9, 0.7);
  }
  26% {
    opacity: 0.3;
    transform: scale(0.8, 0.6);
  }
  30% {
    opacity: 0.6;
    transform: scale(1, 1);
  }
  40% {
    opacity: 0.4;
    transform: scale(0.9, 0.7);
  }
}
@keyframes flicker-flame {
  0% {
    opacity: 0;
    transform: scale(1, 0);
  }
  10% {
    opacity: 0.5;
    transform: scale(1, 0.9);
  }
  20% {
    opacity: 0.3;
    transform: scale(0.8, 0.6);
  }
  23% {
    opacity: 0.4;
    transform: scale(0.9, 0.7);
  }
  26% {
    opacity: 0.3;
    transform: scale(0.8, 0.6);
  }
  30% {
    opacity: 0.6;
    transform: scale(1, 1);
  }
  40% {
    opacity: 0.4;
    transform: scale(0.9, 0.7);
  }
}
@-webkit-keyframes flame-dance {
  0% {
    transform: skewX(50deg) rotate(45deg) scale(0.6, 7) rotate(15deg) skewX(-50deg);
  }
  50% {
    transform: skewX(42deg) rotate(45deg) scale(0.6, 7) rotate(15deg) skewX(-50deg);
  }
  100% {
    transform: skewX(46deg) rotate(45deg) scale(0.6, 7) rotate(19deg) skewX(-50deg);
  }
}
@keyframes flame-dance {
  0% {
    transform: skewX(50deg) rotate(45deg) scale(0.6, 7) rotate(15deg) skewX(-50deg);
  }
  50% {
    transform: skewX(42deg) rotate(45deg) scale(0.6, 7) rotate(15deg) skewX(-50deg);
  }
  100% {
    transform: skewX(46deg) rotate(45deg) scale(0.6, 7) rotate(19deg) skewX(-50deg);
  }
}
.candle2 {
  height: 100px;
  width: 200px;
  position: absolute;
  left: 40px;
  bottom: 10px;
}

.candle3 {
  height: 100px;
  width: 200px;
  position: absolute;
  left: 80px;
  bottom: 3px;
}

.light {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(245, 233, 68) 0%, rgba(242, 142, 57, 0) 100%);
  position: absolute;
  top: -35px;
  left: 2px;
  filter: blur(14px);
}

.candles-right {
  width: 150px;
  height: 500px;
  position: absolute;
  right: 0;
  bottom: -20px;
}

.candle4 {
  position: absolute;
  right: 75px;
  bottom: 10px;
}

.candle5 {
  position: absolute;
  right: 115px;
  bottom: 3px;
}

.candle6 {
  position: absolute;
  right: 155px;
  bottom: 10px;
}/*# sourceMappingURL=candles.css.map */