@layer base {
    :root {
        --c-110: #131316;
        --c-105: #1A1A23;
        --c-100: #20202f;
        --c-90: #343443;
        --c-80: #484856;
        --c-70: #5C5D6A;
        --c-60: #70717E;
        --c-50: #858591;
        --c-40: #9999A5;
        --c-30: #ADAEB9;
        --c-20: #C1C2CC;
        --c-10: #d5d6e0;
        --c-11: #f1f2ff;

        /* color adaptive */
        --ca-110: light-dark(var(--c-11), var(--c-110));
        --ca-105: light-dark(var(--c-10), var(--c-105));
        --ca-100: light-dark(var(--c-10), var(--c-100));
        --ca-90: light-dark(var(--c-20), var(--c-90));
        --ca-80: light-dark(var(--c-30), var(--c-80));
        --ca-70: light-dark(var(--c-40), var(--c-70));
        --ca-60: light-dark(var(--c-50), var(--c-60));
        --ca-50: light-dark(var(--c-60), var(--c-50));
        --ca-40: light-dark(var(--c-70), var(--c-40));
        --ca-30: light-dark(var(--c-80), var(--c-30));
        --ca-20: light-dark(var(--c-90), var(--c-20));
        --ca-10: light-dark(var(--c-100), var(--c-10));
        --ca-11: light-dark(var(--c-110), var(--c-11));

        --c-a1: #9576ff;
        /* --c-a1: hsl(254, 36%, 42%); */
        --c-a1-light: hsl(from var(--c-a1) h s calc(l*1.2));
        --c-a1-dark: hsl(from var(--c-a1) h calc(s - 50) calc(l - 30));
        /* --c-a1-light: #c9b9ff;
        --c-a1-dark: #5941a8; */
        --c-a2: #54b8ff;
        /* --c-a2-light: #88cdff;
        --c-a2-dark: #225c9e; */
        --c-a2-light: hsl(from var(--c-a2) h s calc(l*1.2));
        --c-a2-dark: hsl(from var(--c-a2) h calc(s - 10) calc(l - 30));

        --cl-a1: #f9bb3d;
        --cl-a1-light: hsl(from var(--cl-a1) h s calc(l*1.2));
        --cl-a1-dark: hsl(from var(--cl-a1) h s calc(l - 20));
        --cl-a2: #cf8421;
        --cl-a2-light: hsl(from var(--cl-a2) h s calc(l*1.2));
        --cl-a2-dark: hsl(from var(--cl-a2) h calc(s + 20) calc(l - 15));
        /* --cl-a2: #303ce4; */

        --ca-a1: light-dark(var(--cl-a1), var(--c-a1));
        --ca-a1-light: light-dark(var(--cl-a1-light), var(--c-a1-light));
        --ca-a1-dark: light-dark(var(--cl-a1-dark), var(--c-a1-dark));
        --ca-a2: light-dark(var(--cl-a2), var(--c-a2));
        --ca-a2-light: light-dark(var(--cl-a2-light), var(--c-a2-light));
        --ca-a2-dark: light-dark(var(--cl-a2-dark), var(--c-a2-dark));



        --font-d1: 'Geo', sans-serif;
        --font-d2: 'Iceland', sans-serif;
        --font-body: 'Titillium web', sans-serif;

        --bg-img-dark: url(/img/themes/donny-jiang-czX0EjkhzCg-unsplash.jpg);
        --bg-img-light: url(/img/themes/lightmode\ background.png);
        --light-theme: off;

    }

    html {
        color-scheme: dark;
        background: black;
        /* debug */
        /* #theme-switch {
            opacity: 0.5;
        } */
    }

    html:has(#theme-switch:checked) {
        color-scheme: light;
        --light-theme: on;

        body {
            background: url(/img/themes/lightmode\ background.png) repeat;
            background-size: cover;
            background-attachment: local;
        }

        body {
            scrollbar-color: var(--ca-a1) var(--ca-70);
        }
    }

    /* //////////////////////////// */
    /* ----- DEFAULT OVERRIDE -----*/
    *::selection {
        background-color: var(--ca-a1);
        color: var(--c-100);
    }


    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-repeat: no-repeat;

        /* border: none; */
        /* background-attachment: fixed; */
        /* color: inherit; */

        /* added because calculating heights was a fucking pain in the ass. 'depends on user agent multiplier' I'LL KILL YOU YOU HEAR ME??!??!! */
        /* line-height: 1; */
    }


    ul {
        list-style: none;
    }

    body {
        line-height: unset;
        scroll-behavior: smooth;
        color: var(--ca-10);
        scrollbar-color: var(--ca-a1) var(--ca-70);
        --menu-opacity: 0;

        @media (orientation: portrait) {
            --menu-opacity: 1;
        }

    }

    html,
    body {
        min-height: 100%;
        height: 100%;
        max-height: initial;
        /* ^ this keeps causing problems. remove it maybe? */
        /* width:100%;  */
        font-family: var(--font-body), sans-serif;
        scroll-behavior: smooth;
        /* background-color: black; */
        accent-color: var(--ca-a1);

    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    img {
        max-height: 100%;
        vertical-align: middle;
        font-style: italic;
        background-repeat: no-repeat;
        background-size: cover;
        shape-margin: 0.2rem;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    time {
        display: inline-block;
    }

    /* a:any-link:not(.default-link){ */
    a:any-link:not([class]){
        color: currentColor;
        transition: color 0.3s;
         /* &:any-link ,&:link, &:visited{
            color: var(--ca-a2);
        } */
        &:hover, &:focus-within{
            color: var(--ca-a2);
        }
        &:active{
            color: var(--ca-a2-dark);

        }
    }

    /* ----- END DEFAULT OVERRIDE -----*/
    /* //////////////////////////// */
    /* ----- MISC STYLING -----*/


    @font-face {
        font-family: 'Geo';
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/geo.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: 'Iceland';
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/iceland.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: 'Titillium Web';
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/tit.woff2) format('woff2');
        unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'techno';
        src: url(/fonts/auto-techno.ttf);
    }

    /* a:link,
    a:visited {
        color: inherit;
    } */


    /* ----- MISC STYLING END -----*/
    /* //////////////////////////// */
    /* ----- MAIN STYLING START -----*/
    body:has(.meta-nav) {
        /* --nav-padding: 0.7rem;
        --home-gap: 0.5rem;
        --home-icon-size: 2rem;
        --theme-button-margin-left: -2rem;
        --theme-button-border: 0.2rem;
        --back-button-margin-top: -1rem;
        --back-button-padding-top: -1rem; */
        /* --mobile-padding:calc(var(--home-padding) * 2); */
        --mobile-padding: 0.5rem;
        --mobile-nav-height: calc((var(--mobile-padding) * 2) + 2rem - 1px);
    }

    .meta-nav {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: 1fr auto;
        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
        position: absolute;
        position: fixed;
        inset: 0 auto auto 0;
        z-index: 10;
        --filter: none;
        line-height: 1;
        /* opacity: 0.5; */


        & a {
            text-decoration: none;

        }

        &>* {
            max-width: fit-content;
            padding: 0.7rem;
        }

        &:has(.back-button) {
            .back-button {
                grid-row: 2;

            }

            .theme-button {
                margin-left: -1rem;
            }
        }

        .home-button {
            display: flex;
            gap: 0.5rem;
            place-items: center;

            font-family: var(--font-d1);
            font-weight: bold;
            isolation: isolate;
            position: relative;
            z-index: 1;

            &::before {
                transition: all 0.3s;
                position: absolute;
                inset: 0 -20% 0 -50%;
                content: '';
                z-index: -1;
                background: linear-gradient(to bottom, var(--ca-a1-light), var(--ca-a1) 50%, var(--ca-a1-dark) 50%, var(--ca-a1));
                border-bottom: 2px solid var(--ca-a1-dark);
                border-right: 2px solid var(--ca-a1-dark);
                transform: skewX(-35deg);
                filter: var(--filter);
            }

            &:hover,
            &:has(.home-link:focus-visible) {
                --filter: brightness(1.3);
            }

            .home-link:focus-visible {
                outline: none;
            }
            &:has(a:active) {
                    --filter: brightness(0.7);
            }

            .home-icon {
                width: 2rem;
                height: 2rem;
                --icon-color: var(--ca-10);
                --icon-color: light-dark(var(--c-100), var(--c-10));
            }
        }

        .theme-button {
            cursor: pointer;
            isolation: isolate;
            position: relative;
            z-index: 0;
            height: 80%;
            /* padding-left: 1.2em; */
            margin-left: -1rem;
            margin-left: 1rem;
            font-family: var(--font-d2);
            font-weight: bold;
            color: var(--ca-10);
            align-content: center;

            & input {
                cursor: pointer;
                display: unset;
                position: absolute;
                inset: 0;
                opacity: 0;
            }

            &::before {
                transition: all 0.3s;
                position: absolute;
                inset: 0 -20%;
                content: '';
                z-index: -1;
                background: linear-gradient(to bottom, var(--ca-a2-light), var(--ca-a2) 50%, var(--ca-a2-dark) 50%, var(--ca-a2));
                border-bottom: 2px solid var(--ca-a2-dark);
                border-right: 2px solid var(--ca-a2-dark);
                transform: skewX(-35deg);
                filter: var(--filter);
            }

            &:hover,
            &:has(input:focus-visible) {
                --filter: brightness(1.3);
            }

            &:active {
                --filter: brightness(0.5);
            }

        }

        .back-button {
            display: flex;
            place-items: center;
            gap: 0.5em;
            isolation: isolate;
            position: relative;
            padding-top: 1.2em;
            padding: 1.2em 0.5em 0.5em 0.5em;
            margin-top: -1em;
            --icon-color: var(--ca-10);
            color: var(--ca-10);

            .back-icon {
                width: 2em;
                height: 2em;
            }

            &::before {
                position: absolute;
                inset: 0 -20%;
                content: '';
                z-index: -1;
                background: linear-gradient(to bottom, var(--ca-90), var(--ca-100));
                border-bottom: 2px solid var(--ca-80);
                border-right: 2px solid var(--ca-80);
                transform: skewX(-35deg);
                transition: all 0.3s;
                filter: var(--filter);
            }
            .back-link{
                &:any-link{
                    color: currentColor;
                }
            }

            &:hover,
            &:has(.back-link:focus-visible) {
                --filter: brightness(1.3);
            }

            .back-link:focus-visible {
                outline: none;
            }

        }

        @media (orientation: portrait) {
            grid-template-columns: auto auto 1fr;
            inset: 0 0 auto 0;

            .home-button {
                padding: var(--mobile-padding);
            }

            .theme-button {
                margin-left: 1em;
                height: auto;
                display: flex;
                align-items: center;


            }

            &:has(.back-button) .back-button {
                padding-top: 0em;
                padding: 0.5em 0.5em 0.5em 0.5em;
                padding: 0;
                padding: var(--mobile-padding);
                margin-top: 0em;
                grid-row: 1;
                grid-column: 3;
                margin-left: 1em;
                max-width: unset;
            }

            &:has(.back-button) {


                .theme-button {
                    margin-left: 1rem;
                }
            }
        }

        @media (orientation: landscape) {
            &.thin {
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;

                &:has(.back-button) {
                    .back-button {
                        grid-row: 1;
                        grid-column: 3;
                        padding: 0.5em;
                        margin-top: 0em;
                        height: 80%;
                        margin-left: 1em;
                    }
                }

                .theme-button {
                    height: 90%;
                    margin-left: 1em;
                    align-content: center;
                }
            }
        }
    }

    /* <label class="mb-menu" for="mobile-menu">
        <input type="checkbox" name="mbmn" id="mobile-menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="var(--icon-size)" height="var(--icon-size)" viewBox="0 0 32 32">
            <path fill="var(--icon-color)" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path>
        </svg>
    </label> */
    .mb-menu {
        position: fixed;
        background: linear-gradient(to bottom, var(--ca-20), var(--ca-30) 50%, var(--ca-50) 50%, var(--ca-30));
        --icon-color: var(--ca-100);
        --icon-size: 2em;
        padding: 0.5em;
        z-index: 11;
        width: fit-content;
        opacity: var(--menu-opacity);
        border: 2px solid var(--ca-30);
        border-bottom-left-radius: 0.5em;
        transition: box-shadow 0.3s, border 0.1s, background-color 0.1s;

        &:hover,
        &:focus-within {
            box-shadow: 0 0 10px var(--ca-a1);
            filter: brightness(1.2);
        }

        &:active {
            filter: brightness(0.8);
            border: 2px solid var(--ca-70);
        }
    }

    .terminal {
        --t-border-size: 0.3svw;
        --t-border-size: 5px;
        --t-border-color: var(--ca-30);
        border: inset var(--t-border-size) var(--t-border-color);
        background-color: var(--ca-100);
        position: relative;
        padding: 1rem;
        text-shadow: 0 0 1rem currentColor;
        isolation: isolate;


        &::after,
        &::before {
            position: absolute;
            inset: 0;
            content: '';
            pointer-events: none;
            z-index: 2;
        }

        &::after {
            box-shadow: 0 0 3rem inset var(--c-80);
            mix-blend-mode: overlay;
        }

        &::before {
            clip-path: polygon(20% 0, 100% 0, 100% 100%, 85% 100%);
            background: linear-gradient(rgba(255, 255, 255, 0.144) 5%, transparent);
        }
    }

    .glare {
        z-index: 5;
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 85% 100%);
        pointer-events: none;
        background: linear-gradient(rgba(255, 255, 255, 0.144) 5%, transparent);
    }

    .box-shadow {
        box-shadow: 0 0 3rem inset var(--ca-80);
        /* box-shadow: 0 0 3rem inset var(--ca-a1); */
        pointer-events: none;
    }

    .default-transparent {
        --border-size: 0.4svh;
        --border-size: 3px;
        border: var(--border-size) solid;
        border-image: linear-gradient(to bottom, #ffffff38, #75757571) 3;
        background: #ffffff23;
        backdrop-filter: blur(15px);
        isolation: isolate;
        text-shadow: unset;
        padding: 1rem;
        overflow: auto;
        text-align: center;

        .divider {
            height: 2px;
            display: block;
            background: var(--ca-50);
            margin: 1rem 0;
        }

        h1 {
            font-family: var(--font-d1);
        }

    }

    .default-transparent-sides {
        --border-size: 0.4svh;
        --border-size: 3px;
        border-left: var(--border-size) solid;
        border-right: var(--border-size) solid;
        border-image: linear-gradient(to bottom, #ffffff38, #75757571) 3;
        background: #ffffff23;
        backdrop-filter: blur(15px);
        text-shadow: unset;
        padding: 1rem;
        overflow: auto;
        text-align: center;

        .divider {
            height: 2px;
            display: block;
            background: var(--ca-50);
            margin: 1rem 0;
        }

        h1 {
            font-family: var(--font-d1);
        }
    }



    .shiny-header {
        color: var(--ca-10);
        padding: 1rem;
        font-size: 2.5rem;
        background-color: var(--ca-a1);
        font-family: var(--font-d1);
        text-shadow: 0 0.05em #cccccc6a, 0 -0.05em #00000046;
        background: linear-gradient(to bottom, var(--ca-a1), var(--ca-a2));
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.261) 53%, transparent), linear-gradient(45deg, var(--c-10), var(--c-50), var(--c-10));
            border: inset 3px var(--ca-30);
            opacity: 0.5;
            mix-blend-mode: overlay;
            z-index: 2;
        }
    }

    .default-terminal-divider {
        height: 2px;
        display: block;
        background: var(--ca-a1);
        box-shadow: 0 0 1rem var(--ca-a1);
        margin: 0.5rem 0;
    }

    .default-terminal-divider-gradient {
        height: 2px;
        display: block;
        background: linear-gradient(to right, transparent, var(--ca-50), transparent);
        /* box-shadow: 0 0 1rem var(--ca-a1); */
        margin: 1rem 0;
    }

    .default-link{
        &:any-link{
             transition: color 0.3s;
            color: var(--ca-a2);
        }
        &:hover, &:focus-within{
            color: var(--ca-a2-light);
        }
        &:active{
            color: var(--ca-a2-dark);

        }
    }
    

    /* ----- MAIN STYLING END -----*/




    /* TEMP */
    body.default-body {
        background: black var(--bg-img-dark) no-repeat;
        background-size: cover;
        background-position: center;
        /* background-position: 0% 80%; */
        /* background-position: 0% 10%; */
        /* background-position: bottom; */
        min-height: 100%;
        height: auto;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: repeat;
        /*  */
        /* https://css-pattern.com/3d-triangles/ */
        /* control the size*/
        /* --s: 133px;
        --c1: #0f1015;
        --c2: #15161e;
        --c3: #1b1c27;

        background:
            conic-gradient(from 75deg, var(--c1) 15deg, var(--c2) 0 30deg, #0000 0 180deg,
                var(--c2) 0 195deg, var(--c1) 0 210deg, #0000 0) calc(var(--s)/2) calc(.5*var(--s)/tan(30deg)),
            conic-gradient(var(--c1) 30deg, var(--c3) 0 75deg, var(--c1) 0 90deg, var(--c2) 0 105deg,
                var(--c3) 0 150deg, var(--c2) 0 180deg, var(--c3) 0 210deg, var(--c1) 0 256deg,
                var(--c2) 0 270deg, var(--c1) 0 286deg, var(--c2) 0 331deg, var(--c3) 0), var(--bg-img-dark) no-repeat;
        background-size: var(--s) calc(var(--s)/tan(30deg)); */


    }
}