:root {
    --candle-color-top: #e0cbb3;
    --candle-color-mid: #e6be87;
    --candle-color-low: #b69071;
    --candle-color-deep: #5f493f;
    --candle-color-base: #1c0900;
    --wax-border: #bc944f;
    --thread-dark: #121212;
    --flame-glow: #f78000;
}

.theme-default{
    background: linear-gradient(45deg,rgba(49, 50, 72, 1) 25%, rgba(64, 49, 72, 1) 75%);
    background-attachment: fixed;
}

.theme-berry{
    background: linear-gradient(45deg, rgba(79,21,74,1) 0%, rgba(71,94,102,1) 33%, rgba(73,32,32,1) 66%, rgba(88,40,73,1) 100%);
    background-attachment: inherit;
}

.theme-black-white{
    background: linear-gradient(45deg, rgba(33,33,33,1) 0%, rgba(111,111,111,1) 100%);
    background-attachment: inherit;
}

.theme-blood-moon-particle{
    background: linear-gradient(180deg, rgba(60,32,32,1) 0%, rgba(44,0,0,1) 51%, rgba(8,0,0,1) 100%);
    background-attachment: fixed;
}

.theme-coral{
    background: linear-gradient(45deg, rgba(106,23,32,1) 0%, rgba(6,102,100,1) 51%, rgba(106,23,32,1) 100%);
    background-attachment: inherit;
}

.theme-cozy {
    background: linear-gradient(38deg, rgba(43,43,43,1) 3%, rgba(75,46,69,1) 31%, rgba(122,103,128,1) 44%, rgba(93,93,93,1) 55%, rgba(74,106,106,1) 69%, rgba(43,43,43,1) 97%);
    background-attachment: fixed;
}

.theme-dusk{
    background: linear-gradient(45deg, rgba(75,98,102,1) 0%, rgba(68,55,83,1) 100%);
    background-attachment: inherit;
}

.theme-frost{
    background: linear-gradient(45deg, rgba(44,68,88,1) 0%, rgba(92,89,89,1) 50%, rgba(44,68,88,1) 100%);
    background-attachment: inherit;
}

.theme-halloween{
    background: linear-gradient(45deg, rgba(62,85,63,1) 0%, rgba(82,68,50,1) 50%, rgba(68,55,83,1) 100%);
    background-attachment: inherit;
}

.theme-holiday-animated{
    background: linear-gradient(45deg, rgb(44,85,39) 0%, rgb(53,14,14) 50%, rgb(61,61,61) 100%);
    background-attachment: inherit;
}

.theme-northern-lights{
    background: linear-gradient(45deg, rgba(45,47,75,1) 0%, rgba(44,73,72,1) 33%, rgba(56,39,69,1) 66%, rgba(45,47,75,1) 100%);
    background-attachment: inherit;
}

.theme-pride{
    background: linear-gradient(45deg, rgba(65,39,39,1) 0%, rgba(74,58,40,1) 20%, rgba(92,92,50,1) 40%, rgba(46,74,46,1) 60%, rgba(44,48,77,1) 80%, rgba(71,44,88,1) 100%);
    background-attachment: inherit;
}

.theme-snow-particle{
    background: linear-gradient(45deg, rgba(26,44,57,1) 0%, rgba(83,83,83,1) 100%);
    background-attachment: inherit;
}

.theme-spruce{
    background: linear-gradient(45deg, rgba(26,57,57,1) 0%, rgba(64,53,30,1) 100%);
    background-attachment: inherit;
}

.theme-steel{
    background: linear-gradient(46deg, rgba(55,80,99,1) 0%, rgba(49,50,72,1) 50%, rgba(55,80,99,1) 100%);
    background-attachment: inherit;
}

.theme-sunset{
    background: linear-gradient(45deg, rgba(71,49,0,1) 0%, rgba(65,45,88,1) 100%);
    background-attachment: inherit;
}

.theme-twilight{
    background: linear-gradient(45deg, rgba(4,32,51,1) 0%, rgba(103,94,117,1) 100%);
    background-attachment: inherit;
}

.theme-zn{
    background: linear-gradient(45deg, rgba(66,49,72,1) 0%, rgba(55,89,99,1) 100%);
    background-attachment: inherit;
}



#body-spacer{
    opacity: 0;
    width: 90%;
}

.c-light-div{
    margin: 25px !important;
}

.c-light-t{
    position: absolute;
    width: 7px;
    height: 10px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.8;
}

.c-light-b-t{
    background-color: rgb(160, 160, 160);
    width: 5px;
    height: 4px;
    border-radius: 0% 0% 25% 25%;
    position: absolute;
    bottom: -3px;
    left: 1px;
}

.c-light-r{
    position: absolute;
    width: 10px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.8;
}

.c-light-b-r{
    background-color: rgb(160, 160, 160);
    width: 5px;
    height: 4px;
    border-radius: 25% 0% 0% 25%;
    position: absolute;
    left: -3px;
    top: 1px;
}

.c-light-b{
    position: absolute;
    width: 7px;
    height: 10px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    opacity: 0.8;
}

.c-light-b-b{
    background-color: rgb(160, 160, 160);
    width: 5px;
    height: 4px;
    border-radius: 25% 25% 0% 0%;
    position: absolute;
    top: -3px;
    left: 1px;
}

.c-light-l{
    position: absolute;
    width: 10px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.8;
}

.c-light-b-l{
    background-color: rgb(160, 160, 160);
    width: 4px;
    height: 5px;
    border-radius: 0% 25% 25% 0%;
    position: absolute;
    right: -3px;
    top: 1px;
}

#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.bm-particle {
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    animation: bm-float-up 5s linear infinite, fade-out 5s ease-in infinite;
}

.bm-particle-top {
    position: absolute;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    animation: bm-float-down 5s linear infinite, fade-out 5s ease-in infinite;
}

.snow-particle{
    position: absolute;
    top: -5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    animation: float-down 40s linear infinite, fade-out 5s ease-in infinite;
}

@keyframes bm-float-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20vh);
        opacity: 0;
    }
}

@keyframes bm-float-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(20vh);
        opacity: 0;
    }
}

@keyframes float-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#candle-group {
    position: absolute;
    bottom: 0;
    left: 0;
}

.holder {
    position: absolute;
    width: 50px;
    height: 150px;
}

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

.candle {
    bottom: 0;
    width: 50px;
    height: 100px;
    border-radius: 150px / 40px;
    background: linear-gradient(
    var(--candle-color-top), 
    var(--candle-color-mid), 
    var(--candle-color-low), 
    var(--candle-color-deep) 50%, 
    var(--candle-color-base)
    );
    box-shadow:
    inset 20px -30px 50px rgba(0, 0, 0, 0.4),
    inset -20px 0 50px rgba(0, 0, 0, 0.4);
}

.candle::before {
    width: calc(100% - 4px);
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--wax-border);
    background: radial-gradient(var(--wax-border), #886239 45%, #a47644 80%);
}

.candle::after {
    width: 34px;
    height: 10px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.thread {
    width: 3px;
    height: 15px;
    top: -10px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    border-radius: 40% 40% 0 0;
    background: linear-gradient(#d6994a, #4b232c, var(--thread-dark), black, #e8bb31 90%);
}

.flame {
    width: 10px;
    height: 20px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    border-radius: 50% 50% 20% 20%;
    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 rgba(247, 93, 0, 0.4),
    0 -6px 4px rgba(247, 128, 0, 0.7);
}

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

@keyframes enlargeFlame {
    0%, 100% { height: 20px; }
    50%      { height: 26px; }
}

.glow {
    width: 10px;
    height: 16px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 35% 35%;
    background: rgba(0, 133, 255, 0.7);
    box-shadow:
    0 -40px 30px #dc8a0c,
    0 40px 50px #dc8a0c,
    inset 3px 0 2px rgba(0, 133, 255, 0.6),
    inset -3px 0 2px rgba(0, 133, 255, 0.6);
}

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

.blinking-glow {
    width: 50px;
    height: 50px;
    top: -55%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #ff6000;
    filter: blur(60px);
    animation: candlePulse 10s infinite;
}

@keyframes candlePulse {
    50% { opacity: 0.8; }
}

.string-lights{
    position: absolute;
    top: 0px;
    left: 60%;
    width: 40%;
    height: 40px;
    transform: rotate(5deg);
    background: none;
    border-bottom: 2px solid #373737;
    border-radius: 50%;
}

.light{
    --spacing: 10;
    position: absolute;
    left: calc(var(--i) * 18%);
    width: 12px;
    height: 12px;
    background-color: rgb(255, 242, 255);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(250, 182, 255, 0.7);
    animation: twinkle 3s infinite ease-in-out alternate;
    animation-delay: calc(var(--i) * 0.2s);
}

.light:nth-child(1){bottom:2px;}
.light:nth-child(2){bottom:-8px;}
.light:nth-child(3){bottom:-13px;}
.light:nth-child(4){bottom:-13px;}
.light:nth-child(5){bottom:-10px;}
.light:nth-child(6){bottom:-4px;}

@keyframes twinkle {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}