body {
    scrollbar-width: none;
    position: fixed;
}

body, main {
    height: 100vh; /* Cannot Exceed view port */
    width: 100vw;
    margin: 0px;
    background-color: black;
}

main {
    background-color: rgb(39, 39, 39);
    background-size: cover;
    background-position: center 0%;
    position: relative; /* To allow z-indexing */
    z-index: 2;
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
    overflow-y: scroll;
    scrollbar-width: none;
}


/* Curtain */

.nav-toggle-container {
    cursor: pointer;
    background-color: red;
}

#nav-toggle { /* Nav Button */
    height: 7rem;
    width: 7rem;
    position: fixed;
    z-index: 9;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%) scale(1.0);
    /* background-color: brown; */
    background-image: url("/assets/images/logo.png");
    background-size: contain;
    object-fit: fill;
    border: none;
    border-radius: 50%;
    outline: none;
    box-shadow: 0rem 0rem 4rem rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform, background-color, bottom;
    transition-timing-function: ease, ease, cubic-bezier(.13, .53, .38, .97);
    transition-duration: 400ms, 400ms, 500ms;
}

/* #nav-toggle {
    animation-name: pulse-button;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-fill-mode: none;
    animation-iteration-count: 3;
} */

@media (max-width: 1000px) {
    #nav-toggle {
        height: 5rem;
        width: 5rem;
    }
}

/* Animate Button */
@keyframes pulse-nav-button {
    0% {transform: translateX(-50%) scale(1.0);}
    45% {transform: translateX(-50%) scale(1.0);}
    50% {transform: translateX(-50%) scale(0.95);}
    60% {transform: translateX(-50%) scale(1.1);}
    70% {transform: translateX(-50%) scale(0.95);}
    75% {transform: translateX(-50%) scale(1.0);}
    100% {transform: translateX(-50%) scale(1.0);}
}

/* @keyframes circle-rotate-button {
    from {
        transform: ;
    }
} */

.nav-toggle-container:hover #nav-toggle {
    transform: translateX(-50%) scale(1.2);
}


body[data-curtain="on"] > .nav-toggle-container:active > #nav-toggle {
    transform: translateX(-50%) scale(0.9) rotate(405deg);
}

body[data-curtain="off"] > .nav-toggle-container:active > #nav-toggle {
    transform: translateX(-50%) scale(0.9) rotate(-405deg);
}

.circle-text-holder { /* Nav Text */
    color: yellow;
    fill: currentColor;
    position: fixed;
    z-index: 8;
    bottom: 0%;
    left: 50%;
    transform: translateY(0%) translateX(-50%) scale(1.0) rotateZ(57deg);
    transform-origin: 50% 50%;
    transition: transform 400ms cubic-bezier(.5,-0.67,.22,1.71), color 400ms cubic-bezier(.96,-0.64,.28,.97), bottom 500ms cubic-bezier(.13, .53, .38, .97);
}


body[data-curtain="off"] .nav-toggle-container:hover > .circle-text-holder { /* Close */
    transform: translateY(-50%) translateX(-60%) scale(1.8) rotateZ(-25deg);
    color: rgba(255, 255, 0, 1);
}
body[data-curtain="on"] .nav-toggle-container:hover > .circle-text-holder { /* Open */
    transform: translateY(-20%) translateX(-35%) scale(1.8) rotateZ(145deg);
    color: rgba(255, 255, 0, 1);
}
body[data-curtain="off"] .nav-toggle-container:active > .circle-text-holder { /* Close */
    transform: translateY(-50%) translateX(-60%) scale(1.4) rotateZ(10deg);
    color: rgba(255, 255, 0, 1);
}
body[data-curtain="on"] .nav-toggle-container:active > .circle-text-holder { /* Open */
    transform: translateY(-20%) translateX(-45%) scale(1.4) rotateZ(180deg);
    color: rgba(255, 255, 0, 1);
}

@media (max-width: 1000px) {
    body[data-curtain="off"] .nav-toggle-container:hover > .circle-text-holder { /* Close */
        transform: translateY(-20%) translateX(-55%) scale(1.4) rotateZ(-25deg);
        color: rgba(255, 255, 100, 0.8);
    }
    body[data-curtain="on"] .nav-toggle-container:hover > .circle-text-holder { /* Open */
        transform: translateY(-20%) translateX(-45%) scale(1.4) rotateZ(145deg);
        color: rgba(255, 255, 0, 1);
    }
    body[data-curtain="off"] .nav-toggle-container:active > .circle-text-holder { /* Close */
        transform: translateY(-20%) translateX(-55%) scale(1.2) rotateZ(10deg);
        color: rgba(255, 255, 100, 0.8);
    }
    body[data-curtain="on"] .nav-toggle-container:active > .circle-text-holder { /* Open */
        transform: translateY(-20%) translateX(-45%) scale(1.2) rotateZ(180deg);
        color: rgba(255, 255, 0, 1);
    }
}



/* .circle-text-holder .open,
.circle-text-holder .close {
    box-shadow: 0rem 0rem 4rem rgba(0, 0, 0, 0.35);
    color: red;
} */

/* Curtain Icons */

#nav-toggle > i {
    position: absolute;
    left: 50%;
    top: 0%;
    /* top: 50%; */
    /* transform: translate(-50%, -50%) scale(0.9); */
    color: white;
    font-size: 1.75rem;
    opacity: 0;
    transition: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 400ms;
}

/* Manage Curtain Actions */

body[data-curtain="off"] > .nav-toggle-container > #nav-toggle {
    bottom: calc(50vh + 5rem/2);
}

body[data-curtain="on"] > .nav-toggle-container > #nav-toggle {
    bottom: 3vh;
}

body[data-curtain="off"] > .nav-toggle-container > .circle-text-holder {
    bottom: 50vh;
}

body[data-curtain="on"] > .nav-toggle-container > .circle-text-holder {
    bottom: 0;
}

body[data-curtain="on"] > .nav-toggle-container > #nav-toggle > .open,
body[data-curtain="off"] > .nav-toggle-container > #nav-toggle > .close
{
    transform: translate(-50%, -100%) scale(1);
    opacity: 0.5;
}

body[data-curtain="on"] > .nav-toggle-container:hover > #nav-toggle > .open {
    transform: translate(-50%, -150%) scale(1);
    opacity: 1;
}
body[data-curtain="off"] > .nav-toggle-container:hover > #nav-toggle > .close {
    transform: translate(-50%, 280%) scale(1);
    opacity: 1;
}

body[data-curtain="off"] > main {
    transform: translateY(-50%);
}

body[data-curtain="off"] .nav-toggle-container > .circle-text-holder .open {
    display: none;
}
body[data-curtain="on"] .nav-toggle-container > .circle-text-holder .close {
    display: none;
}


/* Nav Links */

#nav-links > .nav-link {
    text-decoration: none;
}

#nav-links > .nav-link > .nav-link-label {
    color: white;
    font-family: Janna;
    font-size: 2vh;
    margin: 0rem;
    text-transform: uppercase;
    transform: translateX(0%);
    transition: transform 400ms ease;
}

#nav-links > .nav-link > .nav-link-image {
    /* width: max(20vw, 400px); */
    height: 25vh;
    aspect-ratio: 1.8 / 1;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    object-fit: cover;
    object-position: 50% 50%;
    transition: object-position 400ms ease;
}

@media (max-width: 1000px) {
    #nav-links > .nav-link > .nav-link-image {
        aspect-ratio: 1.2 / 1;
    }
}

#nav-links > .nav-link:hover > .nav-link-image {
    object-position: 20% 20%;
}

nav {
    height: 50vh; /* Similar to the shift amount of the background. Move to variable later */
    width: 100%; /* 100% - padding-left - padding-right */
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 0%;
}

nav > .about-section {
    width: 100%;
    height: 13vh;
    margin: 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    /* background: linear-gradient(128deg, rgba(244,199,82,1) 0%, rgba(225,125,67,1) 100%); */
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(225,255,255,0.3) 100%);
    /* background: linear-gradient(90deg, rgba(244,199,82,0.1) 0%, rgba(255,255,255, 0.3) 100%); */
    border-top: 1px groove rgb(216, 216, 216);
    transform: translateY(130%);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
}

nav > .about-section > .logo-container {
    --height: 70%;
    height: var(--height);
    width: auto;
    position: absolute;
    left: 3%;
    bottom: calc((100% - var(--height))/2);
}

#nav-links-wrapper {
    transform: translateY(70%) scale(0.9);
    transition: transform 500ms cubic-bezier(.13, .53, .38, .97);
}

body[data-curtain="off"] > nav > #nav-links-wrapper,
body[data-curtain="off"] > nav > .about-section
{
    transform: translateY(0%) scale(1);
}

#nav-links {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    /* margin-top: clamp(2rem, 2vw, 3rem); */
    margin: 3vh auto;
    padding: 0rem clamp(1rem, 2vw, 2rem);
    transition: transform 400ms linear;
}

#nav-links > .nav-link.hover > .nav-link-label {
    transform: translateX(5%);
}


#nav-links > .nav-link > .nav-link-label > i {
    display: inline;
    color: rgb(131, 131, 131);
    opacity: 0;
    margin-right: 0rem;
    margin-left: -1.4rem;
    transition: opacity, margin-right, margin-left;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

#nav-links > .nav-link.active > .nav-link-label > i {
    display: inline;
    color: rgb(177, 86, 86);
    opacity: 1;
    margin-right: 0.3rem;
    margin-left: 0rem;
}

#nav-links > .nav-link.hover > .nav-link-label > i {
    display: inline;
    color: rgb(228, 228, 167);
    opacity: 1;
    margin-right: 0.3rem;
    margin-left: -1.0rem;
}


/* #nav-links > .nav-link.hover > .nav-link-label > i {
    display: inline;
    margin-right: 0.3rem;
    color: yellow;
    transform: translateX(0%);
} */

/* Disable Scrollbars Chromium */

main::-webkit-scrollbar {
    display: none;
}

nav::-webkit-scrollbar {
    display: none;
}

#nav-links::-webkit-scrollbar {
    display: none;
}


/* Loading Animation */
loader {
    z-index: 999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
}
.loader-background {
    width: 100%; height: 100%;
    background-color: black;
}
.loader-design {
    width: 20vw;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 5px solid orange; */
    /* padding: 1%; */
}

.loading-ring {
    /* background-color: blue; */
    width: 90%;
    height: 90%;
    /* width: 100%; */
    /* height: 100%; */
    border: 0.4em solid rgb(255, 153, 0);
    border-radius: 50%;
    opacity: 0;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    animation: pulse 2s ease-out 0s infinite normal none, pulse-opacity 2s linear 0s infinite normal none;
    z-index: 1;
}

.loading-img-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.loading-img {
    width: 100%;
    height: 100%;
    /* -webkit-box-reflect: below 5% linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 31%); */
    /* animation: pulse-button 2s ease-in 0s infinite normal none, pulse-button 2s ease-in 300ms infinite normal none, pulse-button 2s ease-in 600ms infinite normal none; */
    animation: spinwheel-large 2s cubic-bezier(.47,-0.3,.4,1.29) 0s infinite normal none;
}

@keyframes pulse {
    0% {padding: 0%;}
    100% {padding: 350%;}
}
@keyframes pulse-opacity {
    0% {opacity: 0;}
    20% {opacity: 0.5;}
    70% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes pulse-button {
    0% {transform: scale(1);}
    5% {transform: scale(0.95);}
    15% {transform: scale(1.1);}
    20% {transform: scale(1);}
}
@keyframes spinwheel-large {
    0% {transform: rotateZ(0deg);}
    100% {transform: rotateZ(1440deg);}
}