*{
    box-sizing: border-box;
}
body{
    background-color: rgb(2, 2, 48);
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}
img{
    max-width: 100%;
}

@font-face {
    font-family: apple-chancery;
    src: url(Apple\ Chancery.ttf);
}


@font-face {
    font-family: azo-sans-reg;
    src: url(AzoSansTestRegular.otf)
}

@font-face {
    font-family: azo-sans-light;
    src: url(AzoSansTestLight.otf)
}

.container{
    height: 10vh;
    width: 100vw;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items: center;
    justify-content:space-evenly;
    background-color: rgb(2, 2, 48);
    position: sticky;
    margin: 0;
}

.item{width: 100vw;height: 100px;display: flex;flex-direction: column;align-items: center;justify-items: center;gap: 1%;/* padding:1%; */margin:0;position: relative;background:rgb(2, 2, 48);}


.content{
    width: 100%;
    height: 100%;
    max-height: calc(90vh - 100px);
    max-width: 100vw;
    min-height: auto;
    display: flex;
    /* flex: 1 1 calc(100% / 4); */
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    /* aspect-ratio: 1 / 1; */
    background-color: rgba(12, 32, 89, 0.412);
    margin: 0;
    border: none;
    padding: 10%;
    align-items: center;
    justify-content: center;
    /* overflow: scroll; */
}

.content p{
    font-family: monospace;
    font-size: 16pt; 
    text-align: left;
    color: white;

}
.button{
    display: flex;
    width: 15vh;
    height: 5vh;
    align-items: center;
    justify-content:center;
    font-family: apple-chancery;
    font-size: 12pt;
    color: white;
    border: 1pt solid white;
    border-radius: calc(10vh / 1.5);
    padding: .5%;

}
button{
    display: flex;
    width: 15vh;
    height: 5vh;
    align-items: center;
    justify-content:center;
    font-family: apple-chancery;
    font-size: 12pt;
    border: 1pt solid white;
    border-radius: calc(10vh / 1.5);
    padding: .5%;


}



.button:hover, button:hover{
    background-color: rgba(255, 255, 255, 0.223);
}

.animation-box{
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(90vh - 100px);
    overflow: hidden;
    position: relative;
    border: 1pt solid rgba(255, 255, 255, 0.527);
}



.gradient{
    background: conic-gradient(from 45deg, 
        rgb(2, 2, 48) 0%, 
        rgb(14, 141, 221) 50%, 
        rgb(2, 2, 48)  90%);
    position: absolute;
    height: 400%;
    width: 400%;
    animation: spin 10s linear infinite;
    transform-origin: center;
}


@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.texture{
    display: flex;
    flex-direction: column;
    width:100vw;
    position: absolute;
    object-fit: cover;
    mix-blend-mode:color-dodge;
}




.orb{
    width: 5vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.938) 10%, transparent 70%);
    animation: spin-orb 7s alternate ease-in-out;
}

@keyframes spin-orb {
    from {
        transform: rotate(0deg) scale(0%);
    }
    to {
        transform: rotate(360deg) scale(100%);
    }
}

@keyframes spin-move-orb {
    0% {
        transform: rotate(0deg) scale(0%);
    }
    33% {
        transform: rotate(360deg) scale(100%) translateY(0px);
    }
    66%{
        transform: translateY(500px);
    }
    100%{
        transform: translateY(0px);
    }
}

.orbless{
    width: 1.5vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.938) 10%, transparent 70%);
    animation: spin-orb 3s alternate ease-in-out infinite backwards;
}



.logo-box{
    width: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    mix-blend-mode:lighten;
    animation: spin-orb 7s ease-in-out;

}



.credit{
    font-family: monospace;
    color: rgba(255, 255, 255, 0.708);
    font-size: 8pt;
}



@media screen and (max-width: 900px) {
    .logo-box{
        width: 5vw;
        position: relative;
        mix-blend-mode:lighten;
        animation: spin-orb 7s ease-in-out;
    
    }
    
    .orbless{
        width: 5vw;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.938) 10%, transparent 70%);
        animation: spin-orb 3s alternate ease-in-out infinite backwards;
    }

}

@media screen and (max-width: 600px) {
    .logo-box{
        width: 6vw;
        position: relative;
        mix-blend-mode:lighten;
        animation: spin-orb 7s ease-in-out;
    
    }
    
    .orb{
        width: 10vw;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.938) 10%, transparent 70%);
        animation: spin-orb 3s alternate ease-in-out infinite backwards;
    }

}

a{
    text-decoration: none;
}

/* daymode */
.container.day, .item.day, body.day{
    background-color: rgb(168 224 249);
}
.button.day{
    color: rgb(46 49 146);
    border: 1pt solid rgb(46 49 146);
}

button.day{
    border: 1pt solid rgb(46 49 146);
    background-color: rgb(168 224 249);
    color: rgb(46 49 146);
}


.animation-box.day{
    border: 1pt, solid, black;
}

.gradient.day{
    background: conic-gradient(from 45deg, 
        rgb(168 224 249) 0%, 
        rgb(253, 255, 220) 50%, 
        rgb(168 224 249)  90%);
}


.texture.day{
    opacity: 0;
}

.orbless.day{
    background: radial-gradient(circle, rgb(253, 255, 220) 10%, transparent 70%);
}

.credit.day{
    color: rgb(46 49 146);
}


.logo-box.day{
    mix-blend-mode: normal;
}

.modebutton{
    width: 30px;
    height: 30px;
    display: flex;
    position: relative;
    border-radius: calc(10vh / 2);
}

form{
    font-family: azo-sans-reg;
    color: white;
    font-size: small;
}

input{
    width: auto;
    height: auto;
    font-family:azo-sans-reg;
    display: flex;
    font-size: 12pt;
    color: white;
    background-color: rgb(2, 2, 48);
    border: 1pt solid white;
    border-radius: calc(10vh / 2);
    padding: 2%;
    

}