*{
    box-sizing: border-box;
    margin: 0;
}
body{
    background-color: rgb(2, 2, 48);
    overflow: hidden;
    overflow-x: 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)
}

.main-area{
    height: calc(90vh - 100px);
    overflow: scroll;
    border: 1pt solid rgba(255, 255, 255, 0.527);
}

html, body {
    padding: 0;
    margin: 0;
}

.main-container{
    height: calc(90vh - 100px);
    width: 100vw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: auto;
    align-items: center;
    justify-content: space-evenly;
    background-color: rgba(2, 2, 48, 0.584);
    position: absolute;
}

.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;
}



.nav{
    height:100%;
    width: 10%;
    min-width:10vh;
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content:space-evenly;
    background-color: rgba(2, 2, 48, 0.19);
    position: relative;
    border: 1pt solid rgba(255, 255, 255, 0.353);
    padding: 25px;
}

.content{
    width: 100%;
    height: 100%;
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    margin: 0;
    gap: 5px;
    border: none;
    justify-content: center;
    align-items: start;
}

.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-round{
    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{
    width: 5vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content:center;
    font-family: apple-chancery;
    font-size: 12pt;
    color: white;
    background-color: rgb(2, 2, 48);
    border: 1pt solid white;
    border-radius: calc(10vh / 2);
    padding: .5%;

}

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

.project{
    display: flex;
    width: calc(100% / 5 - 10px);
    aspect-ratio: 1 / 1;
    border: 0.5px solid white;
    overflow: hidden;
    margin: 5px;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    opacity: 25%;
    align-items: center;
    justify-content: center;
}

.project:hover{
    opacity: 100%;
    cursor: pointer;
}
.project img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.button:hover{
    text-decoration: underline;
}

.animation-box{
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    position: absolute;
}


.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;
}

.solid{
    background: rgb(168 224 249);
    position: absolute;
    height: 400%;
    width: 400%;
}

@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;
}
.logo-box{
    width: 10%;
    height: 70%;
    position: absolute;
    mix-blend-mode:lighten;
    animation: spin-orb 7s ease-in-out;

}

.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);
}

.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-move-orb 21s alternate ease-in-out backwards;
}

@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: 3vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.938) 10%, transparent 70%);
    animation: spin-orb 2s alternate infinite;
}

p{
    font-family: apple-chancery;
    color: white;
    text-align: center;

}

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

}

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

}

a{
    text-decoration: none;
    cursor: pointer;
}

.button-round.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{
    height: 10%;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.708);
    font-size: 8pt;
}
.credit.day{
    color: rgb(46 49 146);
}

.container.day, .item.day, body.day{
    background-color: rgb(168 224 249);
}



.project.day:hover{
    background-color: rgba(253, 255, 220, 0.571)
}

/* lightbox-2 */

#lightbox-2 {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
  }
  
  #lightbox2-img {
    max-width: 90%;
    max-height: 80%;
    border: 2px solid white;
  }
  
  .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
  }
  
  .nav-arrows {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
  }
  
  #prev, #next {
    font-size: 40px;
    color: white;
    cursor: pointer;
    user-select: none;
  }
  
  #lightbox2-pdf {
    display: none;
    width: 90%;
    height: 80%;
    border: none;
  }

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

.orbless{
    width: 1vw;
    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: 2vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    mix-blend-mode:lighten;
    animation: spin-orb 7s ease-in-out;

}

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


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

.title{
    font-family: azo-sans-reg;
    font-size:xx-large;
}

.caption{
    font-family: azo-sans-light;
    font-size: small;
}