html {
    width: 0;
    height: 0;
}
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14pt;
    font-family: 'Segoe UI', sans-serif;
}

body > main {
    font-weight: 400;
    color: #e2e2e2;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top:0;
    left:0;
    background-color: #080707;
    overflow: hidden;
}

h1, h2, h3{
    font-variant: small-caps;
    letter-spacing: .3em;
    font-size: 1.7em;
    font-weight: normal;
}

p{
    text-align: justify;
    hyphens: auto;
}

#nav-toggle {
    height: clamp(3em, 6vh,5em);
    width: clamp(3em, 6vh, 5em);
    position: fixed;
    z-index: 3;
    left: 50%;
    top: 2em;
    transform: translateX(-50%);
    background-color: #0d0c0c;
    border: none;
    border-radius: 5em;
    box-shadow: 0 0 .75em #e2e2e2;
    cursor: pointer;
    transition: transform;
    transition-timing-function: ease;
    transition-duration: 400ms;
}

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

#nav-toggle:active {
    transform: translateX(-50%) scale(0.8) rotate(360deg);
}

#nav-toggle > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.9);
    font-size: 1.75em;
    transition: opacity;
    transition-duration: 400ms;
    transition-timing-function: ease;
    opacity: 1;
    color:#e2e2e2;
    height: 100%;
    width:100%;
}

#nav-toggle:active > i {
    opacity: .5;
} 

nav{
    height: calc(22vw/1.8+2vh+5vh);
    padding-top: 5vh;
    width: 100vw;
    position:absolute;
    left:0px;
    top:-5vh;
    z-index:2;
    background-color: #0d0c0c;
    box-shadow: 0 0 1.5em  #15100e;
    transform: translateY(-100%);
    transition: transform 600ms;
    transition-timing-function: cubic-bezier(.75,1.56,.68,1);
}

body[data-nav="true"] > nav {
    transform: translateY(0%);
}

#nav-links {
    display: flex;
    gap: clamp(1em, 3vw, 2em);
    margin: clamp(3em, 2vh, 7em);
    transform: translateY(-70%) scale(.9);
    transition: transform 500ms;
    transition-timing-function: cubic-bezier(.69, .1, .32, .92);
    justify-content: center;
}

body[data-nav="true"] > nav > #nav-links{
    transform: translateY(0%) scale(1)
}

.nav-wrapper{
    width: max(20vw, 200px);
    aspect-ratio: 1.8/1;
    position:relative;
    text-align: center;
    overflow: hidden;
    border: 0px black solid;
    transition: linear border;
}

.nav-wrapper:hover{
    border: 1px black solid;
}

.nav-link-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity:0;
    transition: opacity 500ms;
    z-index:1;
    border-radius:0.2em;
    filter:blur(5px);
}

.nav-wrapper:hover > .nav-link-image{
    opacity:1;
}


.nav-link-label{
    width: 102%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -90%);
    color: #e2e2e2;
    background-color: #0d0c0c86;
    box-shadow: 0 0 2em #0d0c0c;
    font-size: 1.4em;
    z-index:2;
    padding: .5em 0 .5em 0;
}

.footer{
    position: absolute;
    bottom: 0em;
    right: 1em;
    z-index:3;
    display: flex;
    gap: 1em;
}

.footer > a{
    text-decoration: none;
    color: #e2e2e2;
    /* Underline effect */

}

.footer > a > h2{
    font-size: .8em;
    letter-spacing: .2em;
    color: #e2e2e2;
    text-decoration: none;
    background-image: linear-gradient(#e2e2e2, #e2e2e2);
    background-size: 0% 0.11em;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    transition: background-size ease-out 0.2s;
}

.footer > a > h2:hover{
    background-size: 100% 0.11em;
}

@media (max-width: 1920px) {
    body {
        font-size: 12pt;
    }
}

@media (max-width: 800px) {
    body {
        font-size: 11pt;
    }
}