/* reset unhelpful defaults */

*,
*::before,
*::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

* {
    padding: 0;
    margin: 0;
}

body {
    min-height: 100dvh;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ------------------------ */

:root {
    color-scheme: light dark;

    /*
    colour scheme based on flexoki:
    https://github.com/kepano/flexoki
    */

    /* shades */
    --paper: #fffcf0;
    --base-50: #f2f0e5;
    --base-100: #e6e4d9;
    --base-150: #dad8ce;
    --base-200: #cecdc3;
    --base-300: #b7b5ac;
    --base-400: #9f9d96;
    --base-500: #878580;
    --base-600: #6f6e69;
    --base-700: #575653;
    --base-800: #403e3c;
    --base-850: #343331;
    --base-900: #282726;
    --base-950: #1c1b1a;
    --black: #100f0f;
    --text: light-dark(var(--black), var(--paper));
    --bg: light-dark(var(--paper), var(--black));
    --text-2: light-dark(var(--base-600), var(--base-400));
    --bg-2: light-dark(var(--base-50), var(--base-950));

    --red-950: #261312;
    --red-600: #af3029;
    --red-400: #d14d41;
    --red-200: #fdb2a2;
    --red-fg: light-dark(var(--red-600), var(--red-400));
    --red-bg: light-dark(var(--red-200), var(--red-950));

    --orange-950: #27180e;
    --orange-600: #bc5215;
    --orange-400: #da702c;
    --orange-200: #f9ae77;
    --orange-fg: light-dark(var(--orange-600), var(--orange-400));
    --orange-bg: light-dark(var(--orange-200), var(--orange-950));

    --yellow-950: #241e08;
    --yellow-600: #ad8301;
    --yellow-400: #d0a215;
    --yellow-200: #eccb60;
    --yellow-fg: light-dark(var(--yellow-600), var(--yellow-400));
    --yellow-bg: light-dark(var(--yellow-200), var(--yellow-950));

    --green-950: #1a1e0c;
    --green-600: #66800b;
    --green-400: #879a39;
    --green-200: #bec97e;
    --green-fg: light-dark(var(--green-600), var(--green-400));
    --green-bg: light-dark(var(--green-200), var(--green-950));

    --cyan-950: #101f1d;
    --cyan-600: #24837b;
    --cyan-400: #3aa99f;
    --cyan-200: #87d3c3;
    --cyan-fg: light-dark(var(--cyan-600), var(--cyan-400));
    --cyan-bg: light-dark(var(--cyan-200), var(--cyan-950));

    --blue-950: #101a24;
    --blue-600: #205ea6;
    --blue-400: #4385be;
    --blue-200: #92bfdb;
    --blue-fg: light-dark(var(--blue-600), var(--blue-400));
    --blue-bg: light-dark(var(--blue-200), var(--blue-950));

    --purple-950: #1a1623;
    --purple-600: #5e409d;
    --purple-400: #8b7ec8;
    --purple-200: #c4b9e0;
    --purple-fg: light-dark(var(--purple-600), var(--purple-400));
    --purple-bg: light-dark(var(--purple-200), var(--purple-950));

    --magenta-950: #24131d;
    --magenta-600: #a02f6f;
    --magenta-400: #ce5d97;
    --magenta-200: #f4a4c2;
    --magenta-fg: light-dark(var(--magenta-600), var(--magenta-400));
    --magenta-bg: light-dark(var(--magenta-200), var(--magenta-950));

    --wide: 3rem;
    --narrow: 1.5rem;
}

#gradient-edge {
    position: fixed;
    inset: 0;
    inline-size: 100dvw;
    block-size: 100dvh;
    background: linear-gradient(
        to bottom,
        var(--bg) 0%,
        transparent 5%,
        transparent 95%,
        var(--bg) 100%
    );
    pointer-events: none;
    z-index: 1;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
}

body {
    display: flex;
    flex-direction: column;
    margin-inline: var(--wide);
    color: var(--text);
    background-color: var(--bg);

    @media (max-width: 50rem) {
        margin-inline: var(--narrow);
    }
}

main {
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    margin-block-end: 10dvh;
    width: 100%;
    flex-grow: 1;
}

#nav,
footer {
    display: flex;
    inline-size: 100dvw;
    margin-inline-start: calc(-1 * var(--wide));
    color: light-dark(var(--black), var(--paper));

    @media (max-width: 50rem) {
        margin-inline-start: calc(-1 * var(--narrow));
    }
}

#nav {
    min-block-size: 4rem;
    padding-inline: var(--wide);
    margin-block-end: 3rem;
    background-color: light-dark(var(--base-50), var(--base-950));
    z-index: 1;

    @media (max-width: 50rem) {
        padding-inline: var(--narrow);
    }

    > #nav-content {
        inline-size: 100%;
        block-size: 4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        > #nav-title {
            font-family: "Barlow";
            text-transform: uppercase;
            font-size: 2em;
            user-select: none;
            cursor: pointer;
            transition: 0.1s ease-out;

            &:hover {
                color: var(--accent);
            }
        }
    }
}

footer {
    min-block-size: 10rem;
    padding-inline: var(--wide);

    @media (max-width: 50rem) {
        padding-inline: 0;
    }

    > #footer-content {
        inline-size: 100%;
        padding-inline: 1rem;
        border-top: 0.1rem solid var(--accent);

        > #footer-upper,
        > #footer-lower {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        > #footer-upper {
            min-block-size: 6rem;
            align-items: center;
            display: flex;
            flex-direction: row;

            > h2 {
                font-size: 5rem;
                line-height: 5rem;
            }

            > ul {
                margin-block: 1rem;
            }

            @media (max-width: 50rem) {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        > #footer-lower {
            font-size: 0.8rem;
            line-height: 1.2em;
        }
    }
}

.link-ul {
    max-inline-size: 60ch;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.8ch;
    row-gap: 0;
    line-height: 1.2rem;

    > li {
        &::marker {
            content: "";
        }
    }
}

#sidebar {
    > #sidebar-section {
        font-family: "Barlow";
        text-transform: uppercase;
        font-size: 4rem;
        line-height: 4rem;

        margin-block-start: var(--wide);

        transform: rotate(180deg);
        writing-mode: vertical-rl;
        text-orientation: sideways;
    }

    @media (max-width: 50rem) {
        display: none;
    }
}

::selection {
    color: var(--text);
    background: var(--accent);
}