:root {
    --border-color: #2a3cad;
    --border-active-color: #40e3dd;
    --button-blue: #006aff;
    --navbar-cyan: #00ffd2;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    width: 100%;
    padding-top: 1rem;
}
/* ------loading anime------ */

.content{
    position: relative;
    height: 100%;
    width: 100%;

}
.hideOverflow{
    overflow: hidden;
}
#loader{
    position: absolute;
    background-color: var(--bg-color);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    overflow: hidden;

}
.loadingText{
    display: flex;
    justify-content: center;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 100%;

    font-size: calc(100vw/8);
    mix-blend-mode: difference;
    z-index: 51;
    font-weight: 600;
    overflow: hidden;

    
}
.loadingText span{
    position: relative;
    /* opacity: 0; */
    transform-origin: bottom left;
    transform: translateY(1%) rotateZ(90deg);
    animation: 5s animeText linear forwards infinite;
    animation-delay: 1s;
}

.loadingText span:nth-child(2){
    animation-delay: 1.5s;
}
.loadingText span:nth-child(3){
    animation-delay: 2s;
}
.loadingText span:nth-child(4){
    animation-delay: 2.5s;
}
.loadingText span:nth-child(5){
    animation-delay: 3s;
}
.loadingText span:nth-child(6){
    animation-delay: 3.5s;
}
.loadingText span:nth-child(7){
    animation-delay: 4s;
}

.loadingText span::after{
    /* content: ""; */
    position: absolute;
    z-index: 52;
    border-left: 6px solid ;
    width: 100%;
    height:  calc(100vw/8);
    bottom: 0;
    left: 0;
    transform: translateY(-20%);
    animation: 5s animeH linear forwards infinite;
    animation-delay: 2s;
}
.loadingText span:nth-child(2)::after{
    animation-delay: 2.5s;
}
.loadingText span:nth-child(3)::after{
    animation-delay: 3s;
}
.loadingText span:nth-child(4)::after{
    animation-delay: 3.5s;
}
.loadingText span:nth-child(5)::after{
    animation-delay: 4s;
}
.loadingText span:nth-child(6)::after{
    animation-delay: 4.5s;
}
.loadingText span:nth-child(7)::after{
    animation-delay: 5s;
}
@keyframes animeText {
    0%{transform: rotateZ(90deg)}
    20%{ transform: rotateZ(0);}
    60%{ transform: rotateZ(0);
    }
    80%{transform: rotateZ(-180deg);}
    100%{transform: rotateZ(-180deg);}
}

@keyframes animeH {
    0%{ transform: translateY(-20%) scaleY(1); transform-origin: bottom;}
    20%{ transform: translateY(-20%) scaleY(0); transform-origin: bottom;}  
    60%{ transform: translateY(-20%) scaleY(0); transform-origin: bottom;}
    80%{ transform: translateY(-20%) scaleY(1); transform-origin: bottom;}      
}


.circle-1{
    position: absolute;
    background-color: #fefbd9;
    width: 50%;
    min-width: 250px;
    padding-bottom: 50%;
    min-height: 250px ;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow:  inset -15px -15px 0 5px #d5d3b9  ;
    animation: 2s animeMoon linear,5s animeMoon2 linear infinite;
    animation-delay: 0s,1s;
    overflow: hidden;
}
#moonSVG{
    position: absolute;
    min-width: 100% !important;
    min-height: 100% !important;
    max-height: max-content;
    max-width: max-content;
    object-fit: contain;
}
.circle-2{
    position: absolute;
    background-color: #b8b8a5;
    width: 20%;
    padding-bottom: 20%;
    top:35%;
    left: 75%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: inset 7px -7px 0px 0px #85857a,
                0 0 0 6px #fefbd9;
}

.circle-2-1{
    scale: 0.6;
    top: 10%;
    left: 55%;
}

.circle-2-2{
    scale: 0.8;
    top:35%;
    left: 25%;
}

.circle-2-3{
    scale: .5;
    top:65%;
    left:65%;
}
.circle-2-4{
    scale: .3;
    top:75%;
    left:35%;
}

@keyframes animeMoon{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }

}
@keyframes animeMoon2 {
    0%{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}