*, *:before, *:after {
	margin: 0;
	padding: 0;
	word-break: break-all;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 2vmin; /* Responsive font size based on viewport */
  height: 100%;
}

body {
	font-family: 'Ubuntu', sans-serif;
	color: #6e6e6e;
	font-size: 1.6rem;
  background: black;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#text{
  font-family: cursive;
  font-size: 1.2rem;
  text-align: center;
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  z-index: 10;
}

.holder {
  width: 20vmin; /* Responsive width */
  height: 60vmin; /* Responsive height */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

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

.candle {
  bottom: 0;
  width: 20vmin; /* Responsive width */
  height: 40vmin; /* Responsive height */
  border-radius: 20vmin / 5.3vmin; /* Responsive border radius */
  box-shadow: inset 2.7vmin -4vmin 6.7vmin 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  background: linear-gradient(#e48825, #e78e0e, #833c03, #1c0900);
}

.candle:before {
  width: 100%;
  height: 5.3vmin; /* Responsive height */
  border-radius: 50%;
  border: 0.27vmin solid #d47401; /* Responsive border */
  background: #b86409;
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
  width: 4.5vmin; /* Responsive width */
  height: 1.3vmin; /* Responsive height */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 1.9vmin; /* Responsive top */
  box-shadow: 0 0 2.7vmin 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {  
  width: 0.8vmin; /* Responsive width */
  height: 4.8vmin; /* Responsive height */
  top: -2.3vmin; /* Responsive top */
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  transform: translateX(-50%);
  background: #121212;
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 3.2vmin; /* Responsive width */
  height: 16vmin; /* Responsive height */
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite, moveFlameExtra 5s linear infinite, enlargeFlameExtra 8s linear infinite;
}

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

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

@keyframes enlargeFlame {
  0%, 100% {
    height: 16vmin; /* Responsive height */
  }
  50% {
    height: 18.7vmin; /* Responsive height */
  }
}

.moveFlameExtra{
  animation: moveFlameExtra 5s linear infinite;
}

.enlargeFlameExtra{
  animation: enlargeFlameExtra 8s linear infinite;
}


@keyframes moveFlameExtra{
  0%, 100%{
    transform: translateX(-50%) rotate(-10deg);
  }
  25%{
    transform: translateX(-50%) rotate(10deg);
  }
}

@keyframes enlargeFlameExtra{
  0%, 100%{
    height: 16vmin; /* Responsive height */
  }
  50%{
    height: 6.7vmin; /* Responsive height */
  }
}

.glow {
  width: 3.5vmin; /* Responsive width */
  height: 8vmin; /* Responsive height */
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -6.4vmin; /* Responsive top */
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow: 0 -5.3vmin 4vmin 0 #dc8a0c, 0 5.3vmin 6.7vmin 0 #dc8a0c, inset 0.4vmin 0 0.27vmin 0 rgba(0, 133, 255, .6), inset -0.4vmin 0 0.27vmin 0 rgba(0, 133, 255, .6);
}

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


.blinking-glow {
  width: 13.3vmin; /* Responsive width */
  height: 24vmin; /* Responsive height */
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  filter: blur(8vmin); /* Responsive blur */
  animation: blinkIt .1s infinite;
}

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