@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,300,1,200&icon_names=cancel,code,dark_mode,info,light_mode,link_2,open_in_new,sticky_note_2,terminal,warning");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap');

* {
    margin: 0;
    .material-symbols-rounded {
        font-variation-settings: 'FILL' 1;
        user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
}

:root {
    /* colours */
    --col-bg: #0d102b;
    --col-surface: #090b22;
    --col-surface-hover: #111431;
    --col-surface-2: #15183a;
    --col-surface-3: #1d2047;

    --col-border: #080a20;
    --col-border-soft: #292b56;

    /* text */
    --col-text: #eeeafa;
    --col-text-muted: #bdb8d4;
    --col-text-faint: #7f789f;

    /* accent */
    --col-accent: #b86cff;
    --col-accent-soft: #9f5bea;
    --col-accent-deep: #7740bd;

    /* secondary accents */
    --col-accent-blue: #7196ee;
    --col-accent-yellow: #d8b76c;
    --col-accent-pink: #d47eae;

    /* semantic */
    --col-success: #78c99a;
    --col-warning: #d3a768;
    --col-error: #d56879;
    --col-info: #7196ee;

    --col-link: #bd7cff;

    /* code / selection / shadows */
    --col-code-bg: #090b1d;
    --col-selection: #dfa2eb14;
    --col-shadow: #050614c0;
    --col-shadow-2: #03040ecf;

    /* syntax */
    --col-syntax-comment: #77758a;
    --col-syntax-punctuation: #9b96aa;

    --col-syntax-tag: #8fc9a3;
    --col-syntax-function: #d6c98f;
    --col-syntax-boolean: #8fc9a3;
    --col-syntax-number: #b5d49d;
    --col-syntax-class: #a6aee0;
    --col-syntax-constant: #d3a58f;
    --col-syntax-property: #91cfb0;
    --col-syntax-symbol: #91cfb0;

    --col-syntax-keyword: #a6c6e8;
    --col-syntax-string: #d5a095;
    --col-syntax-operator: #cfa0b0;
    --col-syntax-inserted: #91cfa5;

    /* syntax UI */
    --col-syntax-line-number: #625f78;
    --col-syntax-toolbar: #eeeafa14;

    /* rainbow braces */
    --col-syntax-brace-1: #d99a70;
    --col-syntax-brace-2: #8bc69a;
    --col-syntax-brace-3: #91aee0;
    --col-syntax-brace-4: #ce91ce;

    /* fontstacks */
    --font-main: "Inter", "Noto Sans Math", system-ui, sans-serif;
    --font-code: "JetBrains Mono";

    --col-logo-filter: brightness(0) saturate(100%) invert(97%) sepia(2%) saturate(4612%) hue-rotate(190deg) brightness(98%) contrast(101%);
}

body.light {
    /* colours */
    --col-bg: #f3f1f8;
    --col-surface: #faf9fc;
    --col-surface-hover: #eeecf5;
    --col-surface-2: #e7e4f0;
    --col-surface-3: #ddd9e9;

    --col-border: #d8d4e5;
    --col-border-soft: #c7c2d8;

    /* text */
    --col-text: #211d32;
    --col-text-muted: #5f596f;
    --col-text-faint: #8c859f;

    /* accent */
    --col-accent: #8745c7;
    --col-accent-soft: #9b5bd5;
    --col-accent-deep: #68349e;

    /* secondary accents */
    --col-accent-blue: #5274c7;
    --col-accent-yellow: #a9823e;
    --col-accent-pink: #b45f8f;

    /* semantic */
    --col-success: #4c9b6c;
    --col-warning: #a87b38;
    --col-error: #b55261;
    --col-info: #5274c7;

    --col-link: #8142c1;

    /* code / selection / shadows */
    --col-code-bg: #eae7f2;
    --col-selection: #11111114;
    --col-shadow: #5b536c20;
    --col-shadow-2: #40384f2e;

    /* fontstacks */
    --font-main: "Inter", "Noto Sans Math", system-ui, sans-serif;
    --font-code: "JetBrains Mono";

    /* syntax */
    --col-syntax-comment: #858394;
    --col-syntax-punctuation: #716d7f;

    --col-syntax-tag: #4d8563;
    --col-syntax-function: #75682a;
    --col-syntax-boolean: #4d8563;
    --col-syntax-number: #5f814c;
    --col-syntax-class: #5e68a4;
    --col-syntax-constant: #966049;
    --col-syntax-property: #4f896b;
    --col-syntax-symbol: #4f896b;

    --col-syntax-keyword: #5879a6;
    --col-syntax-string: #995f55;
    --col-syntax-operator: #965d70;
    --col-syntax-inserted: #4d9365;

    /* syntax UI */
    --col-syntax-line-number: #9993a8;
    --col-syntax-toolbar: #211d3214;

    /* rainbow braces */
    --col-syntax-brace-1: #b96835;
    --col-syntax-brace-2: #4d9162;
    --col-syntax-brace-3: #5575b5;
    --col-syntax-brace-4: #a65da6;

    --col-logo-filter: brightness(0) saturate(100%) invert(9%) sepia(8%) saturate(3934%) hue-rotate(211deg) brightness(99%) contrast(91%);
}

html {
    overflow: none;
}

body {
    background-color: var(--col-bg);
}

/* navbar */
ul.navbar {
    position: fixed;
    top: 0;
    z-index: 10;
    width: stretch;
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 20px;
    font-family: var(--font-main);
    background-color: var(--col-surface);
    border-bottom: var(--col-border-soft) 1.5px solid;
    box-shadow: 0 4px 4px var(--col-shadow);
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    .block2 {
        margin-left: auto;
    }
    .playful {
        color: var(--col-accent);
    }
    li a {
        color: var(--col-text);
        text-decoration: none;
        padding: 10px 16px;
        border-radius: 0.2em;
        transition: 0.3s;

        .material-symbols-outlined {
            vertical-align: -0.35em;
            line-height: 1px;
            transform: translateY(-2px);
        }
    }
    li a.link:hover {
        color: var(--col-accent);
        background-color: var(--col-surface-2);
        border-radius: 0.6em;
    }
    li a img {
        height: 1.3em;
        vertical-align: -0.25em;
    }
    .logo {
        filter: var(--col-logo-filter);
    }
}

main {
    top: 63px;
    overflow-y: auto;
    position: absolute;
    width: 100vw;
    height: calc(100vh - 63px);
    scrollbar-color: var(--col-surface-3) var(--col-bg);
    ::selection {
        background-color: var(--col-selection);
    }
}

.hero {
    display: grid;
    place-items: center;
    padding: 120px 80px;
    border-bottom: var(--col-border-soft) 2px solid;
    background-image: url("/assets/img/desert.svg");
    background-color: rgba(from var(--col-surface) r 20 30 / 0.7);
    background-blend-mode: darken;
    .tcont {
        display: flex;
        gap: 12px;
        font-family: var(--font-main);
        h1 {
            color: var(--col-text);
        }
        p {
            color: var(--col-text-faint);
        }
        img {
            height: 4em;
            filter: var(--col-logo-filter);
        }
        .playful {
            color: var(--col-accent-soft);
        }
    }
}

section {
    padding: 80px;
    font-family: var(--font-main);
    display: grid;
    justify-items: center;
    border-bottom: var(--col-border-soft) 1px solid;
    background-size: 100%;
    background-position: 0 0;
    .content {
        width: min(100%, 768px);
    }
    h1 {
        color: var(--col-text);
        font-size: 2.5em;
        border-bottom: var(--col-accent) 2px solid;
        padding-bottom: 8px;
        margin-bottom: 8px;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            font-size: 1.2em;
        }
    }
    h2 {
        color: var(--col-text);
        font-size: 2em;
        border-bottom: var(--col-accent) 2px solid;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    h3 {
        margin: 12px 0;
        color: var(--col-text);
        font-size: 1.5em;
    }
    p {
        color: var(--col-text-muted);
        .material-symbols-rounded {
            vertical-align: -0.22em;
        }
    }
    p.error, div.error {
        display: flex;
        gap: 8px;
        align-items: center;
        background-color: rgba(from var(--col-error) r g b / 0.2);
        padding: 12px;
        border-radius: 0.4em;
        margin: 12px 0;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            color: var(--col-error);
        }
    }
    p.notice, div.warning {
        display: flex;
        gap: 8px;
        align-items: center;
        background-color: rgba(from var(--col-warning) r g b / 0.2);
        padding: 12px;
        border-radius: 0.4em;
        margin: 12px 0;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            color: var(--col-warning);
        }
    }
    p.info, div.info {
        display: flex;
        gap: 8px;
        align-items: center;
        background-color: rgba(from var(--col-info) r g b / 0.2);
        padding: 12px;
        border-radius: 0.4em;
        margin: 12px 0;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            color: var(--col-info);
        }
    }
    p.note, div.note {
        display: flex;
        gap: 8px;
        align-items: center;
        background-color: rgba(from var(--col-selection) r g b / 0.08);
        padding: 12px;
        border-radius: 0.4em;
        margin: 12px 0;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            color: var(--col-text);
            font-weight: normal;
        }
    }
    p.example, div.example {
        display: flex;
        gap: 8px;
        align-items: center;
        background-color: rgba(from var(--col-success) r g b / 0.2);
        padding: 12px;
        border-radius: 0.4em;
        margin: 12px 0;
        .material-symbols-rounded {
            vertical-align: -0.22em;
            color: var(--col-success);
        }
    }
    p.tab {
        padding: 12px;
        border-left: var(--col-border-soft) 2px solid;
        margin-left: 12px;
    }
    a {
        color: var(--col-link);
    }
    a:not(.non)::after {
        color: var(--col-accent);
        content: 'open_in_new';
        font-family: 'Material Symbols Rounded';
        font-size: 1.23em;
        vertical-align: -0.22em;
    }
    a.non::after {
        color: var(--col-accent);
        content: 'link_2';
        font-family: 'Material Symbols Rounded';
        font-size: 1.23em;
        vertical-align: -0.22em;
    }
    a:hover {
        color: var(--col-accent-soft);
    }
    samp {
        background-color: var(--col-surface-hover);
        padding: 2px;
        color: var(--col-accent);
        border-radius: 0.2em;
        font-family: "JetBrains Mono";
        font-size: 1em;
        font-variant-ligatures: none;
    }
    ul li {
        color: var(--col-text-muted);
    }
    input {
        background-color: var(--col-surface);
        border-radius: 0.8em;
        border: var(--col-border-soft) 1px solid;
        padding: 10px 16px;
        font-size: 1em;
        font-family: var(--font-main);
        color: var(--col-text);
        outline: transparent;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
    input:focus {
        outline: var(--col-accent) 2px solid;
    }
    .flexwrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow-y: auto;
        height: 350px;
        scrollbar-width: thin;
        scrollbar-color: var(--col-surface-2) var(--col-bg);
        padding-right: 3px;
        .tutorialBox {
            display: flex;
            gap: 12px;
            flex: 1 1 calc(50% - 8px);
            height: 10em;
            overflow-y: auto;
            padding: 40px;
            background-color: var(--col-surface);
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 0.8em;
            transition: 0.2s;
            h3 {
                font-size: 1.2em;
                color: var(--col-text);
                border-bottom: var(--col-accent) 2px solid;
                padding-bottom: 4px;
                margin-bottom: 4px;
            }
            img {
                width: 5em;
                background-color: var(--col-bg);
                border-radius: 0.4em;
            }
        }
        .tutorialBox:hover {
            box-shadow: 0 4px 4px var(--col-shadow-2);
            background-color: var(--col-surface-hover);
        }
    }
}

section.img {
    background-image: url("/assets/img/desert.svg");
    background-color: rgba(from var(--col-surface) r g b / 0.7);
    background-blend-mode: darken;
}

footer {
    padding: 80px;
    font-family: var(--font-main);
    display: grid;
    justify-items: center;
    background-color: var(--col-surface);
    border-top: var(--col-border-soft) 1px solid;
    .content {
        width: min(100%, 768px);
    }
    h3 {
        color: var(--col-text);
        font-size: 1.5em;
        border-bottom: var(--col-accent-deep) 2px solid;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    p {
        color: var(--col-text-muted);
    }
    #footer-links {
        color: var(--col-surface-3);
    }
    a {
        color: var(--col-link);
    }
    .playful {
        color: var(--col-accent);
    }
}

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

.bflex {
    display: flex;
    sidebar {
        position: absolute;
        width: 300px;
        height: calc(100vh - 63px);
        scrollbar-width: thin;
        scrollbar-color: var(--col-surface-2) transparent;
        overflow-y: auto;
        top: 63px;
        padding: 60px;
        box-sizing: border-box;
        font-family: var(--font-main);
        border-right: var(--col-border-soft) 1px solid;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        h2 {
            color: var(--col-text);
            margin-bottom: 8px;
            margin-top: 8px;
        }
        ul {
            padding-left: 0;
            list-style-type: none;
        }
        li {
            color: var(--col-text-muted);
            padding: 10px 16px;
            box-sizing: border-box;
            width: 100%;
            cursor: pointer;
            border-radius: 0.4em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        li:hover {
            background-color: var(--col-surface-hover);
            color: var(--col-accent);
        }
    }
    main {
        left: 300px;
        width: calc(100vw - 300px);
    }
}