
/* submitting loader */
.overlay_submit { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.75); z-index: 4; cursor:auto; }
.overlay_text{ position: absolute; top: 50%; left: 50%; font-size: 20px; color: rgb(21, 34, 3);
transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.dot:nth-child(2) { animation-delay: -1.1s; background-color: blue; }
.dot:nth-child(3) { animation-delay: -0.9s; background-color: magenta;}
.wave { position:relative; margin-top:50vh; text-align:center; width:100%; height:100%; margin-left: auto; margin-right: auto; font-size: 24px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:3px; background:#303131; animation: wave 1.3s linear infinite; }
@keyframes wave { 0%, 60%, 100% { transform: initial; } 30% { transform: translateY(-15px); } }
@media only screen and (max-width: 576px){ #overlay_text{font-size: 20px;} }

/* digital loader */
.overlay_loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); display: none; justify-content: center; align-items: center; z-index: 99; }
.loader { width: 220px; height: 220px; position: relative; perspective: 800px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.digit { color: #00ff88; font-family: monospace; font-size: 28px; text-align: center; text-shadow: 0 0 5px #00ff88; animation: fall 2s infinite, flicker 0.5s infinite; opacity: 0; }
.digit:nth-child(1) { animation-delay: 0.1s; }
.digit:nth-child(2) { animation-delay: 0.2s; }
.digit:nth-child(3) { animation-delay: 0.3s; }
.digit:nth-child(4) { animation-delay: 0.4s; }
.digit:nth-child(5) { animation-delay: 0.5s; }
.digit:nth-child(6) { animation-delay: 0.6s; }
.digit:nth-child(7) { animation-delay: 0.7s; }
.digit:nth-child(8) { animation-delay: 0.8s; }
.glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: pulse 2s infinite; background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%); }
@keyframes fall { 
    0% { transform: translateY(-50px) rotateX(90deg); opacity: 0; }
    20%, 80% { transform: translateY(0) rotateX(0deg); opacity: 0.8; }
    100% { transform: translateY(50px) rotateX(-90deg); opacity: 0; } 
}
@keyframes flicker { 0%, 19%, 21%, 100% { opacity: 0.8; } 20% { opacity: 0.2; } }
@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }


/* comet loader */
.overlay_loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); display: none; justify-content: center; align-items: center; z-index: 99; }
#loader_container { display: flex; justify-content: center; align-items: center; position: relative; }
#loader_container #h3 { color: rgb(82, 79, 79); }
#ring { width: 190px; height: 190px; border: 1px solid transparent; border-radius: 50%; position: absolute; }
#ring:nth-child(1) { border-bottom: 8px solid rgb(240, 42, 230); animation: rotate1 2s linear infinite; }
@keyframes rotate1 { 
    from { transform: rotateX(50deg) rotateZ(110deg); }
    to { transform: rotateX(50deg) rotateZ(470deg); }
}

#ring:nth-child(2) { border-bottom: 8px solid rgb(240, 19, 67); animation: rotate2 2s linear infinite; }
@keyframes rotate2 { 
    from { transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg); }
    to { transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg); }
}

#ring:nth-child(3) { border-bottom: 8px solid rgb(3, 170, 170); animation: rotate3 2s linear infinite; }
@keyframes rotate3 { 
    from { transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg); }
    to { transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg); }
}

#ring:nth-child(4) { border-bottom: 8px solid rgb(207, 135, 1); animation: rotate4 2s linear infinite; }
@keyframes rotate4 { 
    from { transform: rotateX(70deg) rotateZ(270deg); }
    to { transform: rotateX(70deg) rotateZ(630deg); }
}
/* Improving visualization in light mode */