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

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

.main-container{
    height:100vh;
    width: 100wh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgba(2, 2, 48, 0.584);
    position: relative;
}

.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:90%;
    height: 100%;
    max-width: 90vw;
    min-height: 100vh;
    display: flex;
    flex: 1 1 calc(100% / 4);
    flex-direction: row;
    position: relative;
    flex-wrap: wrap;
    aspect-ratio: 1 / 1; 
    margin: 0;
    gap:1%;
    border: none;
    align-items: center;
    justify-content: center;
    overflow: scroll;
}
.button{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content:center;
    font-family: apple-chancery;
    font-size: 12pt;
    color: white;

}

.project{
    display: flex;
    width: 24%; /* or a different percentage depending on how many you want per row */
    aspect-ratio: 1 / 1;  /* Makes it a square */
    border: 0.5px solid white;
    position: relative;
    overflow: hidden;
    opacity: 25%;
}

.project:hover{
    opacity: 100%;
}
.project img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    position: absolute;
}

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

.animation-box{
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border: 1pt solid white;
}


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

}

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