@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

/* So sad that steve jobs died of ligma */

:root {
    /* +
    *Typography
    + */
    font-family: "Kalam", cursive;
    font-weight: 300;
    font-style: normal;
    font-size: 10px;
    /* +

    *Colors
    + */
    --bg-prim: rgb(50, 50, 50);
    --bg-sec: rgba(30, 30, 30, 0.7);
    --bg-prim-opac: rgba(0, 0, 0, 0.5);

    --border-prim: rgb(90, 90, 90);

    --font-prim: rgb(255, 255, 255);
    --font-acc: rgb(65, 255, 113);
    --font-warn: rgb(255, 65, 65);

    --select-bg: rgb(70, 70, 70);
    --select-text: rgb(169, 255, 169);
    --select-warn-text: rgb(255, 169, 169);
}

[data-theme="light"] {
    /* +
    *Colors
    + */
    --bg-prim: rgb(255, 255, 255);
    --bg-sec: rgb(220, 220, 220);
    --bg-prim-opac: rgba(255, 255, 255, 0.1);

    --border-prim: rgb(180, 180, 180);

    --font-prim: rgb(0, 0, 0);
    --font-acc: rgb(0, 163, 41);
    --font-warn: rgb(194, 0, 0);
}

h1,
h2,
h4,
h5,
h6,
a,
p {
    color: var(--font-prim);

    margin: 0;
    padding: 0;
}

h1 {
    font-size: clamp(2.5rem, 2dvw, 5rem);
    font-weight: 400;
}

h2 {
    font-size: clamp(2rem, 1.5dvw, 3.75rem);
    font-weight: 400;
}

h4 {
    font-size: clamp(1rem, 0.75dvw, 3rem);
    font-weight: 300;
}

h5 {
    font-size: clamp(3rem, 3dvw, 10rem);
    font-weight: 700;
}

h6 {
    font-size: clamp(4rem, 4dvw, 10rem);
    font-weight: 700;
}

a {
    color: var(--font-prim);
    text-decoration: none;

    background: linear-gradient(var(--font-acc) 0 0) 
    bottom center/
    var(--underline-width, 0%) 0.2rem
    no-repeat;
    
    transition: background 0.25s ease-in-out;
}

a.Warning {
    background: linear-gradient(var(--font-warn) 0 0)
    bottom center/
    var(--underline-width, 0%) 0.2rem
    no-repeat;
}

a:hover {
    color: var(--font-acc);
    --underline-width:100%
}

a.Warning:hover {
    color: var(--font-warn);
}

p {
    font-size: clamp(2rem, 1.25dvw, 4rem);
}

@media screen and (orientation: portrait) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 3.5rem;
    }

    h6 {
        font-size: 4.5rem;
    }

    p {
        font-size: 1.5rem;
    }
}

.Warning::selection {
    background-color: var(--select-bg);
    color: var(--select-warn-text);
}

.Accent {
    color: var(--font-acc);
}

.Warning {
    color: var(--font-warn);
}

.nounderline {
    background: none;
}

body {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-prim);

    scroll-padding-top: 7rem;
}

@media screen and (orientation: portrait) {
    html {
        scroll-padding-top: 10rem;
    }
}

@media screen and (orientation: landscape) {
    nav {
        background-color: var(--bg-sec);
    
        height: 7rem;
        width: 100%;
    
        position: fixed;
    
        box-sizing: border-box;
    
        padding: 0 20%;
    
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    
        z-index: 500;
    
        -webkit-user-select: none;
        user-select: none;

        transform: translateX(0);
    }

    nav .door {
        display: none;
    }

    nav img.logo {
        height: 7rem;
        pointer-events: none;
    }
    
    nav h2 {
        width: 50%;
    }
    
    nav ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
    
        width: 100%;

        padding: 0;
    }

    nav .menu {
        width: 7rem;
        height: 7rem;
    
        position: relative;
        display: inline-block;
    
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    nav .menu img#settings {
        width: 80%;
        height: 80%;
    }
    
    [data-theme="light"] nav .menu img#settings {
        filter: invert(1);
    }
    
    nav .menu_dropdown {
        position: absolute;
        background-color: var(--bg-sec);
    
        padding: 2rem 1rem 2rem 4rem;
    
        bottom: 0;
        right: 0;
    
        transform: translate(0, 100%) scale(0);
        transform-origin: top right;
        transition: transform 0.1s ease-in-out;
    
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    
        border-radius: 0 0 1rem 1rem;
    }
    
    nav .menu:hover .menu_dropdown {
        transform: translate(0, 100%) scale(1);
    }

    .ThemeToggle {
        width: 4rem;
        height: 4rem;
    }
}

@media screen and (orientation: portrait){
    nav {
        position: fixed;
        background-color: var(--bg-prim-opac);
        -webkit-backdrop-filter: blur(100px);
        backdrop-filter: blur(100px);
    
        height: 100%;
    
        box-sizing: border-box;
        padding: 5rem 5rem;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    
        z-index: 500;

        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
    }

    nav.open {
        transform: translateX(0);
    }

    nav.close {
        transform: translateX(-100%);
    }

    nav .door {
        position: absolute;
        width: 10rem;
        height: 10rem;

        top: 0;
        right: 0;
        transform: translateX(100%);

        z-index: 501;
    }

    nav .door svg {
        width: 5rem;
        height: 5rem;
        pointer-events: none;
    }

    nav:hover {
        transform: translateX(0);
    }
    
    nav img.logo {
        width: 20rem;
        pointer-events: none;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding: 0 2rem;
    }

    nav ul li {
        text-align: center;
    }

    nav .menu img#settings {
        transform: scale(0);
    }

    nav .menu_dropdown {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    nav .menu_dropdown img {
        height: 8rem;
        width: 8rem;
    }

    .ThemeToggle {
        width: 8rem;
        height: 8rem;
    }
}

nav ul li {
    list-style: none;
}

[data-theme="light"] nav img.logo {
    filter: invert(1);
}

.ThemeToggle img {
    position: absolute;
}

#Moon {
    filter: invert(1);
    opacity: 0;
}

#Sun {
    opacity: 1;
}

[data-theme="dark"] #Moon {
    opacity: 1;
}

[data-theme="dark"] #Sun {
    opacity: 0;
}

[data-theme="light"] #Moon {
    opacity: 0;
}

[data-theme="light"] #Sun {
    opacity: 1;
}

main {
    background-color: transparent;
    color: var(--font-prim);

    box-sizing: border-box;
    padding: 7rem 20% 0 20%;

    min-height: calc(100dvh - 5rem);
}