:root {
    background: #020617;
    color: #fff;

    --border-radius: 20px;

    /* colors */
    --IcyAqua: #AFFDF0;
    --IcyAquaHSL: 170 95.12% 83.92%;
    --LightGreen: #baf878;
    --DeepTeal: #3A745D;
    --SpaceIndigo: #393a4f;
    --SpaceIndigoHSL: 237 16% 27%;
    --PitchBlack: #241D01;
    --PitchBlackHSL: 48 97% 12%;

    /* main page splitting controls */
    --middleSplit: 100;
    --middleMinSplit: 40;
    --middleBorder: 10;

    /* offset for project pages */
    --projectOffset: 0;

    /* Border glow controls */
    /* --spot-hsl: 190 90% 60%; */
    /* --spot-alpha: 0.7; */
    --spot-fade: 10vmin;
    --spot-color: #baf87844;
    --bw: 2px; /* border thickness */
    --mx: -9999;
    --my: -9999;


    /* cursor */
    --cursorSize: 1;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
    cursor: none;
}

a{
    text-decoration: none;
    color: inherit;
}
.cursor{
    position: absolute;
    top: calc(var(--my) * 1px);
    left: calc(var(--mx) * 1px);
    transform: translate(-50%,-50%);
    z-index: 1000;
    font-size: calc(var(--cursorSize) * .5rem);
    
    pointer-events: none;
    overflow: hidden;
}
.cursor-hover:hover{
    cursor: none;
}
.cursor *{
    color: whitesmoke;
    position: relative;
}
.cursor #c-n, .cursor.hovering #c-h{display: unset;}
.cursor #c-h, .cursor.hovering #c-n{display: none;}
.cursor.hovering{
    animation: pulse-scale infinite ease-in-out 1s;
    color: transparent;
    opacity: 1;
    border-radius: 50%;
}

@keyframes pulse-scale {
  0% {
    font-size: calc(var(--cursorSize) * .5rem);
  }
  50% {
    font-size: calc(var(--cursorSize) * .7rem); /* Scales up to 110% size */
  }
  100% {
    font-size: calc(var(--cursorSize) * .5rem);
  }
}

.moirai-one-regular {
    font-family: "Moirai One", system-ui;
    font-feature-settings: unset;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body::-webkit-scrollbar {
  display: none;
}
html {
  scroll-behavior: smooth;
}
/* For Firefox */
html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body{
    margin: 0;
    padding: 0;
    
    
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

#sideways-nav{
    color: color-mix(var(--PitchBlack), var(--LightGreen) 30%);
    /* color: var(--PitchBlack); */
    width: 10%;
    margin-right: 5%;
}

#sideways-nav ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0;

}
#sideways-nav a {
    color: inherit;
    display: block;
    width: 100%;
    
    text-decoration: none;
    font-feature-settings: "ss01" 1;
    font-weight: 500;
    text-orientation:sideways;
    writing-mode: tb-rl;
    font-size: 2vh;

    /* transform: rotate(180deg); */
    padding: 20px 10px;
    border-radius: var(--border-radius);
    transition: 200ms ease-in-out;
    width: fit-content;
    margin: 20px 0px;
    font-size: min(2.8vh, 24px);
    /* filter: blur(4px); */

}
#sideways-nav a:hover{
    color: var(--LightGreen);
    margin: 60px 0px;
    font-weight: 200;
    font-size: min(3vh, 28px);

    /* width: calc(100% + 10px); */
}

.blur-background{
   
    /* padding: inherit; */
    border-radius: inherit;
    filter: sepia(20);
    /* background-color: red; */
}

#main-section{
    position: fixed;
    width: calc(var(--middleSplit) * 1vw);
    transition: all 100ms ease-out;
    height: 100vh;
    z-index: -2;
}
#second-section{
    position: fixed;
    width: calc((100 - var(--middleMinSplit)) * 1vw);
    margin-left: calc(var(--middleSplit) * 1vw  + var(--projectOffset) * 1vw);
    /* transform: translateX(calc(var(--middleSplit) * 1vw)); */
    height: 100vh;
    background-color: var(--PitchBlack);
}

#second-section::before{
    content: "";
    display: block;
    position: absolute;
    left: calc(var(--middleBorder) * -.5vw);
    top: -10vh;
    width: calc(var(--middleBorder) * 1vw);
    height: 120vh;
    border-radius: 50%;
    background-color: var(--PitchBlack);
    animation-delay: .75s;

    z-index: -1;
}

#second-section::after{
    content: "";
    display: block;
    position: absolute;
    right: calc(var(--middleBorder) * -.5vw);
    top: -10vh;
    width: calc(var(--middleBorder) * 1vw);
    height: 120vh;
    border-radius: 50%;
    background-color: var(--PitchBlack);
    animation-delay: .75s;

    z-index: -1;
}

.main-page-container{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 50px 20px;
    overflow: hidden;
    
    display: flex;
    flex-direction: row;
}

/*/////////////////////////////////*/
/*            CONTACT              */
/*/////////////////////////////////*/

section#contact-section{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 100;
}

#contact-box{
    position: fixed;
    top: 150%;
    left: 25%;
    width: 50vw;
    height: 50vh;
    background-color: var(--PitchBlack);
    border-radius: var(--border-radius);
    display: block;
    z-index: 100;
    border-radius: calc(var(--border-radius) * 1.8);
    padding: var(--border-radius);

    /* transition: all 200ms ease-out; */
}
#contact-box::before{
    border: hsl(var(--IcyAquaHSL) / .2) solid calc(var(--bw));
}
#contact-box > div::before{
    border: hsl(var(--IcyAquaHSL) / .2) solid calc(var(--bw));

}
#contact-box > div{
    width: calc(100%);
    height: calc(100%);
    
    border-radius: calc(var(--border-radius));
}

#contact-box.active{
    animation: forwards 200ms ease-out contactBoxAppear;
}
#contact-box.inactive{
    animation: forwards 200ms ease-out contactBoxDisappear;
}

@keyframes contactBoxAppear {
    from {
        top: 100%;
        width: 10vw;
        height: 70vh;
        left: 45%;
    }
    to {
        top: 25%;
        width: 50vw;
        height: 50vh;
        left: 25%;
    }
}

@keyframes contactBoxDisappear {
    from {
        top: 25%;
        width: 50vw;
        height: 50vh;
        left: 25%;
    }
    to {
        top: 100%;
        width: 10vw;
        height: 70vh;
        left: 45%;
    }
}



/*/////////////////////////////////*/
/*            PROJECTS             */
/*/////////////////////////////////*/

.main-page-content{
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: calc(18% + (2vh/5));
    grid-gap: 1.5vh;

    padding-right: 20px;
    scrollbar-color: var(--LightGreen) transparent;
    scrollbar-width: 5px;
    scroll-margin-left: 50px;

}

.project-header{
    grid-column: span 4;
    grid-row: span .5;

    color: var(--LightGreen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Basteleur Moonlight";
    font-size: 200%;
    letter-spacing: -5%;

    transform: translateY(33%);
    margin: 0;

    overflow: hidden;
}
.project-header::after, .project-header::before{
    display: block;
    position: relative;
    content: "";
    height: 1px;
    width: calc(100% - 40px);
    left: 20px;
    background-color: var(--LightGreen);
}
.project-header::before{
    width: calc(100% - 20px);
    right: 20px;
    left: unset;
}

.project-container{
    width: 100%;
    border-radius: calc(var(--border-radius) * 1.8);  
    grid-column: span 2;
}

.wide-project{
    grid-column: span 4;
    grid-row: span 2;
}

.long-project{
    grid-column: span 1;
    grid-row: span 2;
}
.square-project{
    grid-column: span 2;
    grid-row: span 2;
}

.widelong-project{
    grid-column: span 2;
    grid-row: span 3;
}

#project-back{
    position: absolute;
    /* left: calc(var(--middleBorder) * 5px - 100px); */
    top: calc((var(--projectOffset) * -0.01) * 20% - 15% );
    left: calc((var(--projectOffset) * -0.01) * 7%);
    /* left: -5%; */
    width: 5%;
    aspect-ratio: 1;

    border-radius: 50%;
    background-color: var(--PitchBlack);
    text-align: right;
    padding: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    font-weight: 800;
    font-size: 200%;
    color: var(--IcyAqua);

    overflow: hidden;
    user-select: all;
    pointer-events: all;
}
.project-box{
    padding: var(--border-radius);
    border: hsl(var(--IcyAquaHSL) / .2) solid calc(var(--bw));
    border-radius:inherit;  
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: flex;
}
.project-box img{
    /* width: calc(100% - var(--border-radius) * 2); */
    position: relative;
    width: 100%;
    z-index: 10;
    opacity: 1;
    transition: 200ms ease-out;
    object-fit: cover;
    border-radius: calc(var(--border-radius) );
    box-shadow: inset 0 0 0 calc(var(--bw)) hsl(var(--IcyAquaHSL) / .2);
    
    border: hsl(var(--IcyAquaHSL) / .2) solid calc(var(--bw));
}
.project-box:hover img{
    z-index: 0;
    opacity: .6;
    filter: blur(5px);
}
.project-box-content{
    position: absolute;
    top:var(--border-radius);
    width: calc(100% - var(--border-radius) * 2);
    height: calc(100% - var(--border-radius) * 2);

    display: flex;
    justify-content: center;
    align-items: center; 
    flex-direction: column;

    font-size: clamp(12px, 4vw, 25px);

    padding: 8px;
}
.project-box-content h2{
    margin: 0;
    font-family: "Basteleur Moonlight";
    color: var(--LightGreen);
    font-size: clamp(24px, 7vw, 30px);
    letter-spacing: -5%;
    font-feature-settings: "ss01" 1;
    line-height: 1;
    text-align: center;
}
.project-box-content p{
    margin: 0;
    margin-top: 10px;
    letter-spacing: -5%;
    font-feature-settings: "ss01" 1;
    line-height: .85;
    text-align: center;
}
.project-box-content .project-tags{
    margin-top: min(30px, 15%) ;
    font-size: clamp(10px, 3vw, 20px);
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 75%;
    flex-wrap: wrap;
}
.project-tags span{
    padding: 8px 15px;
    border-radius: var(--border-radius);
    background-color: hsl(var(--SpaceIndigoHSL) / .4) ;
    color: var(--IcyAqua);
    
}
/*/////////////////////////////////*/
/*          Project Page           */
/*/////////////////////////////////*/

section#project-section{
    position: fixed;
    top: 0;
    left: calc(var(--projectOffset) * 1vw + 100vw);
    width: 100vw;
    height: 100vh;
    background-color: var(--SpaceIndigo);
    z-index: -1;

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: none;
}
#project-content{
    display: block;
}
#project-name{
    font-family: "Basteleur Moonlight";
    /* font-family: "Moirai One", system-ui !important; */
    font-feature-settings: unset !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    color: var(--LightGreen);
    text-shadow: var(--DeepTeal) 0px 0 20px;
    /* transform: translateX(40%) rotate(-90deg); */
    
    font-size: 5vw;

    position: absolute;
    left: 20%;
    top: 5%;
}

#project-name::after{
    content:"";
    display: block;
    position: absolute;
    background-color: var(--LightGreen);
    box-shadow: var(--DeepTeal) 0px 0 20px;
    height: var(--bw);
    width: 130%;
    margin-left: -5%;

}



/*/////////////////////////////////*/
/*        Main Page Blobs          */
/*/////////////////////////////////*/

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--middleSplit) * 1vw);
    height: 100vh;
    
    z-index: -1;
    background-color: #3d7787;

    filter: blur(150px);
}
#project-section .background{
    position: fixed;
    top: 0;
    left: calc(var(--projectOffset) * 1vw + 100vw);
    width: 100vw;
    height: 100vh;
}
#main-page-background{
    position: fixed;
    height: 100%;
    filter: blur(20px);
    overflow: hidden;
}


.background-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    transition: 10ms ease-out;
}
#follow-blob{
    height: calc( 2 * var(--spot-fade));
    position: absolute;
    top: calc(var(--my) * 1px);
    left: calc(var(--mx) * 1px - var(--middleSplit) * 1vw);
    background: radial-gradient(
        var(--spot-color),
        transparent calc(var(--spot-fade))
    );
    /* background: var(--LightGreen); */
    background-attachment: fixed;

    padding: var(--bw); 
    /* -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude; */
} 
.blob-1{
    top: 10%;
    left: 5%;
    height: calc(900/1920*100vh);
    aspect-ratio: 2/1;
    background: #e4dcb3;
}
.blob-2{
    top: 95%;
    left: 10%;
    height: calc(1200/1920*100vh);
    background: #39bbbb;
}
.blob-3{
    top: calc(100/1080*100%);
    left: calc(1150/1920*100%);
    height: calc(900/1920*100vh);
    aspect-ratio: 2/1;
    background: #339999;
}
.blob-4{
    top: 10%;
    left: 90%;
    height: calc(1600/1920*100vh);
    background: #a0d38d;
}
.blob-5{
    top: calc(940/1080*100%);
    left: calc(1400/1920*100%);
    height: calc(2000/1920*100vh);
    background: #003f40;
    
}

#name-card{
    position: fixed;
    top: 50%;
    left: calc(var(--middleSplit)/2 *1vw);
    transform: translate(-50%,-50%);
    border-radius: 10px;
    z-index: -1;
}

#name-card .title-text{
    padding: 0;
    margin: 0;
    font-family: "Basteleur Moonlight";
    color: var(--LightGreen);
    font-size: calc((10vh + 5vw) / 2);
    position: relative;
    letter-spacing: -5%;
    font-feature-settings: "ss01" 1;
    text-shadow: var(--DeepTeal) 0px 0 20px;
    line-height: 1;
}
#name-card .detail-text{
    position: absolute;

    left: 0;
    bottom: 0;
    width: 160%;
    margin-left: -30%;


    text-align: center;
    color: var(--LightGreen);
    font-size: calc((2vh + 1.5vw) / 2);
    font-feature-settings: "ss01" 1;

    line-height: .85;
    transform: translateY(160%);
}
#name-card::after{
    content:"";
    display: block;
    position: absolute;
    background-color: var(--LightGreen);
    box-shadow: var(--DeepTeal) 0px 0 20px;
    height: var(--bw);
    width: 130%;
    margin-left: -15%;

}


/* glowing bordr */
.glow-border{
    position: relative;
}
.glow-border.active{
    color: var(--LightGreen) !important;
}

/* .glow-border.active::after{
    background: hsl(var(--IcyAquaHSL) / .2);
}

.glow-border.active::before{
    background: hsl(var(--IcyAquaHSL) / .05);
} */

.glow-border::before{
    content:"";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: radial-gradient(
        circle at calc(var(--mx) * 1px) calc(var(--my) * 1px),
        hsl(var(--IcyAquaHSL) / .2),
        transparent calc(var(--spot-fade) * 1)
    );
    /* background: var(--LightGreen); */
    background-attachment: fixed;
}
.glow-border::after{
    content:"";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background: radial-gradient(
        circle at calc(var(--mx) * 1px) calc(var(--my) * 1px),
        hsl(var(--IcyAquaHSL) / 1),
        transparent calc(var(--spot-fade) * .66)
    );
    /* background: var(--LightGreen); */
    background-attachment: fixed;

    padding: var(--bw);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.glow-big.glow-border::before{
    background: radial-gradient(
        circle at calc(var(--mx) * 1px) calc(var(--my) * 1px),
        hsl(var(--IcyAquaHSL) / .2),
        transparent calc(var(--spot-fade) * 1.8)
    );
    background-attachment: fixed;
}
.glow-big.glow-border::after{
    background: radial-gradient(
        circle at calc(var(--mx) * 1px) calc(var(--my) * 1px),
        hsl(var(--IcyAquaHSL) / 1),
        transparent calc(var(--spot-fade) * 1.3)
    );
    /* background: var(--LightGreen); */
    background-attachment: fixed;
}

@media (max-width: 1000px) {
    .mobile-hide{
        display: none;
    }
    
    #name-card .title-text{
        color: var(--LightGreen);
        font-size: clamp(55px, 12vw, 75px);
        letter-spacing: -.6vw;
    }
    #name-card .detail-text {
        font-size: clamp(18px,3vw, 20px);
    }
    
    #name-card{
        position: fixed;
        top: calc(var(--middleSplit)/2*1vh);
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        min-width: 200px;
    }
    #background{
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(var(--middleSplit) * 1vh);
        filter: blur(50px);
    }
    .background-blob {
        transform: translate(-50%,-50%) scale( calc((35 + var(--middleBorder)/2) / 100) );
    }
    #follow-blob{
        top: calc(var(--my) * 1px - var(--middleSplit) * 1vh);
        left: calc(var(--mx) * 1px );
        height: calc( 8 * var(--spot-fade));
        background: radial-gradient( var(--spot-color), transparent calc(var(--spot-fade) * 4) );
    }

    #main-section{
        position: fixed;
        width: 100vw;
        height: calc(var(--middleSplit) * 1vh);
        transition: all 100ms ease-out;
        z-index: -2;
    }
    #second-section{
        position: fixed;
        width: 100vw;
        margin: unset;
        /* margin-left: calc(var(--middleSplit) * 1vh); */
        margin-top: calc(var(--middleSplit) * 1vh);
        height: 100vh;
        background-color: var(--PitchBlack);
    }
    .main-page-container{
        padding-top: 0;
        flex-direction: column;
        margin: 0;
    }
    #sideways-nav{
        width: 100%;
        height: 8%;
    }
    #sideways-nav a {
        text-orientation: mixed;
        writing-mode: horizontal-tb;
        font-size: clamp(18px, 4vw, 28px);
        padding: 10px 20px;
        margin: 0;
    }
    #sideways-nav a:hover {
        font-size: clamp(20px, 4.4vw, 32px);
        margin: 0;
    }
    #sideways-nav ul {
        flex-direction: row;
        justify-content: center;
        align-items: start;
        margin: 0;
        gap: 20px;
    }
    #second-section::after, #second-section::before{
        
        top: calc(var(--middleBorder) * -.5vw);
        left: -10vw;
        width: 120vw;
        height: calc(var(--middleBorder) * 1vw);
    }
    
    .main-page-content{
        height: calc(68%);
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: repeat(auto, calc(20% - 2% + (2%/5)));
        grid-gap: 2%;
    }
    /* .project-container{
        grid-column: span 2 !important;
        grid-row: span 2;
    }
    .wide-project{
        grid-column: span 4 !important;
        grid-row: span 3;
        margin: 5% 5%;
        width: 90%;
    } */
}

@media (max-width: 550px){
    
    .main-page-content{
        width: 100%;
        /* height: calc(108% - var(--middleSplit) * 1%); */
        height: calc(68%);
        
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr 1fr;
    }

    .project-container{
        grid-column: span 2 !important;
        grid-row: span 2 !important;
        margin: 5% 5%;
        width: 90%;
    }
    .project-container{
        aspect-ratio: 1/1;
        height: 100%;
    }
}