@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'Brass Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url('/assets/fonts/BrassMono/BrassMonoCode-Regular.woff2') format('woff2'),
        url('/assets/fonts/ttf/BrassMonoCode-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Brass Mono';
    font-style: bold;
    font-weight: 700;

    font-display: swap;
    src:
        url('/assets/fonts/BrassMono/BrassMonoCode-Bold.woff2') format('woff2'),
        url('/assets/fonts/ttf/BrassMonoCode-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Brass Mono';
    font-style: italic;
    font-weight: 400;

    font-display: swap;
    src:
        url('/assets/fonts/BrassMono/BrassMonoCode-Italic.woff2') format('woff2'),
        url('/assets/fonts/ttf/BrassMonoCode-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Fairfax HD';
    font-style: normal;
    font-weight: 400;

    font-display: swap;
    src:
        url('/assets/fonts/FairfaxHD/FairfaxHD.woff2') format('woff2'),
        url('/assets/fonts/FairfaxHD/FairfaxHD.ttf') format('truetype');
}

.brass-mono,
.brass-mono * {
    font-family: 'Brass Mono', Consolas, monospace;
    font-optical-sizing: auto;
}

.fira-code,
.fira-code * {
    font-family: 'Fira Code', Consolas, monospace;
    font-optical-sizing: auto;
}

.jetbrains-mono,
.jetbrains-mono * {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-optical-sizing: auto;
}

.fairfax-hd,
.fairfax-hd *,
.ipa,
.ipa *,
.unicode,
.unicode * {
    font-family: 'Fairfax HD', Consolas, monospace;
    font-optical-sizing: auto;
}

.noto-sans,
.noto-sans * {
    font-family: 'Noto Sans', sans-serif;
    font-optical-sizing: auto;
}

.noto-sans-mono,
.noto-sans-mono * {
    font-family: 'Noto Sans Mono', sans-serif;
    font-optical-sizing: auto;
}

.space-grotesk,
.space-grotesk * {
    font-family: 'Space Grotesk', sans-serif;
    font-optical-sizing: auto;
}

.geist,
.geist * {
    font-family: 'Geist', sans-serif;
    font-optical-sizing: auto;
}

.inter,
.inter * {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
}

/* ==================== Layer Hierarchies ==================== */

@layer base, structure, page, component;

@layer base {
    :root {
        --primary: white;
        --primary-75: rgba(255, 255, 255, 0.75);
        --primary-50: rgba(255, 255, 255, 0.5);
        --primary-25: rgba(255, 255, 255, 0.25);
        --primary-10: rgba(255, 255, 255, 0.1);
        --primary-05: rgba(255, 255, 255, 0.05);

        --secondary: black;
        --secondary-75: rgba(0, 0, 0, 0.75);
        --secondary-50: rgba(0, 0, 0, 0.5);
        --secondary-25: rgba(0, 0, 0, 0.25);
        --secondary-10: rgba(0, 0, 0, 0.1);
        --secondary-05: rgba(0, 0, 0, 0.05);

        --bg: #111;
        --text: #ccc;

        --text-bold: #ddd;

        --anchor: #aaa;
        --anchor-hover: #777;

        --header: #ddd;

        --th-bg: rgba(255, 255, 255, 0.15);
        --hr-bg: #333;

        --code-bg: #222;
        --code-text: #ddd;

        --debug-primary: rgb(255, 0, 0);
        --debug-secondary: rgb(255, 129, 129);

        --div-padding: 4%;
    }

    /* terminal-style color pallete */
    :root {
        --dark-black: #1a1a1a;
        --black: #333;
        --bright-black: #666;

        --dark-red: #6b2a2a;
        --red: #e05555;
        --bright-red: #ff7070;

        --dark-green: #1f4f1f;
        --green: #4ec94e;
        --bright-green: #70e870;

        --dark-yellow: #5a4a18;
        --yellow: #e0c060;
        --bright-yellow: #ffe070;

        --dark-blue: #1f3666;
        --blue: #5588e0;
        --bright-blue: #77aaff;

        --dark-magenta: #4a2457;
        --magenta: #b060d0;
        --bright-magenta: #dd88ff;

        --dark-purple: #3a2457;
        --purple: #8d60d0;
        --bright-purple: #b584ff;

        --dark-cyan: #154040;
        --cyan: #40bfbf;
        --bright-cyan: #70e8e8;
    }

    .col.black,
    .col.black * {
        color: var(--black);
    }
    .col.bright.black,
    .col.bright.black * {
        color: var(--bright-black);
    }

    .col.red,
    .col.red * {
        color: var(--red);
    }
    .col.bright.red,
    .col.bright.red * {
        color: var(--bright-red);
    }

    .col.green,
    .col.green * {
        color: var(--green);
    }
    .col.bright.green,
    .col.bright.green * {
        color: var(--bright-green);
    }

    .col.yellow,
    .col.yellow * {
        color: var(--yellow);
    }
    .col.bright.yellow,
    .col.bright.yellow * {
        color: var(--bright-yellow);
    }

    .col.blue,
    .col.blue * {
        color: var(--blue);
    }
    .col.bright.blue,
    .col.bright.blue * {
        color: var(--bright-blue);
    }

    .col.magenta,
    .col.magenta * {
        color: var(--magenta);
    }
    .col.bright.magenta,
    .col.bright.magenta * {
        color: var(--bright-magenta);
    }
    .col.purple,
    .col.purple * {
        color: var(--purple);
    }
    .col.bright.purple,
    .col.bright.purple * {
        color: var(--bright-purple);
    }

    .col.cyan,
    .col.cyan * {
        color: var(--cyan);
    }
    .col.bright.cyan,
    .col.bright.cyan * {
        color: var(--bright-cyan);
    }

    .adaptive-text-shadow,
    .adaptive-text-shadow * {
        text-shadow: 0 0 10px oklch(from currentColor calc(l * 0.7) calc(c * 2) calc(h + 10));
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'JetBrains Mono';
        font-weight: 300;
        font-size: 25px;

        line-height: 1.5;

        background: var(--bg);
        color: var(--text);
    }

    /* p {
        line-height: 1.75;
    } */

    b,
    strong {
        font-weight: 500;

        color: var(--text-bold);
        transition:
            text-shadow 0.2s,
            color 0.2s;
    }

    table,
    th,
    td {
        text-align: center;
        border-collapse: collapse;
        padding: 10px;
        transition:
            background-color 0.2s,
            box-shadow 0.2s;
        border: 2px solid var(--primary-25);
    }

    table {
        margin: 1em 0;
    }

    th {
        background: var(--th-bg);
        color: var(--text-bold);
    }

    /* ==================== Headers ==================== */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    th {
        color: var(--header);
        font-family: 'Noto Sans Mono';
        font-weight: 400;
        /* text-shadow: 0 0 20px var(--primary-25); */
    }

    h1:not(.no-margin),
    h2:not(.no-margin),
    h3:not(.no-margin) {
        margin: 10px 0 30px 0;
    }

    h4:not(.no-margin),
    h5:not(.no-margin),
    h6:not(.no-margin) {
        margin: 10px 0;
    }

    header h1,
    header h2,
    header h3,
    header h4,
    header h5,
    header h6 {
        margin: 0 0 20px 0;

        color: var(--primary);
        font-weight: 400;
    }

    .small-header {
        text-transform: uppercase;
        color: #777;
    }

    blockquote {
        border-left: 4px solid rgb(59, 56, 160);
        margin-left: 0;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;

        margin: 1em 0;
        padding: 0.5em 1em;
    }

    blockquote.info {
        border-left-color: rgb(92, 255, 97);
        background: rgba(21, 255, 0, 0.08);
    }

    blockquote.warning {
        border-left-color: rgb(255, 222, 92);
        background: rgba(255, 255, 0, 0.08);
    }

    blockquote.error {
        border-left-color: rgb(255, 92, 92);
        background: rgba(255, 0, 0, 0.08);
    }

    ul:not(.plain),
    ol:not(.plain) {
        margin: 1em 0;
        background-color: rgba(255, 255, 255, 0.04);
        border-radius: 20px;

        padding: 0.5em 2em;
    }

    li:not(.plain) {
        margin-right: 1em;
        margin-top: 0.4em;
        margin-bottom: 0.4em;
        line-height: 1.6;
    }

    ul:not(.plain) ul:not(.plain),
    ol:not(.plain) ol:not(.plain) {
        list-style-type: circle;
        margin-top: 0.3em;
        margin-left: 1em;
    }

    hr {
        border: none;
        height: 5px;
        background-color: var(--hr-bg);
        border-radius: 2px;
        margin: 10px 0;
    }

    /*
    input[type='checkbox'],
    #checkbox_wrapper {
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }
    input[type='checkbox'] {
        width: 20px;
        height: 20px;
        border: 2px solid rgb(70, 60, 120);
        background-color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        position: relative;
        appearance: none;
        outline: none;
        border-radius: 4px;
        transition: all 0.2s;
    }

    input[type='checkbox']:checked {
        background-color: rgb(90, 70, 150);
    }

    input[type='checkbox']:checked::after {
        content: '✔';
        position: absolute;
        left: 4px;
        top: -1px;
        color: white;
        font-size: 14px;
    }

    input[type='checkbox']:hover {
        background-color: rgb(110, 90, 170);
    } */

    .tooltip {
        position: relative;
        cursor: pointer;
        display: inline-block;
    }

    .tooltip-label {
        display: inline-block;
        position: relative;

        font-weight: bold;

        color: #ffffff;
        text-shadow: 0 0 25px rgb(116, 51, 255) !important;
        vertical-align: 0em;
    }

    .tooltip-text {
        font-family: 'Fira Code';
        font-size: 17.5px;
        user-select: none;
        display: block;

        visibility: hidden;
        opacity: 0;

        position: absolute;
        bottom: 130%;
        left: 50%;
        padding: 16px 20px;
        transform: translate(-50%, -25px);

        background: rgba(50, 4, 111, 0.75);
        backdrop-filter: blur(4px);

        border: 2px solid rgb(168, 121, 255);
        box-shadow: inset 0 0 10px rgb(168, 121, 255);
        border-radius: 12px;

        white-space: nowrap;
        max-width: calc(100vw - 40px);
        overflow-wrap: break-word;
        pointer-events: none;

        transition: all 0.5s ease-in;
    }

    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0);

        transition: all 0.1s ease-in;
    }

    input[type='text']:not(.plain) {
        padding: 10px 14px;
        margin: 12px 0;
        border: 1px solid #7155ff;
        border-radius: 6px;
        background-color: #1e1e1e;
        color: #f0f0f0;
        font-size: 1rem;
        transition: all 0.2s ease-in-out;
    }

    input[type='text']:not(.plain)::placeholder {
        color: #888;
        font-style: italic;
    }

    input[type='text']:not(.plain):focus {
        outline: none;
        border-color: #825dff;
        box-shadow: 0 0 10px rgba(84, 25, 153, 0.6);
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 28px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: #ccc;
        border-radius: 999px;
        transition: 0.3s;
    }

    .slider::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    .switch input:checked + .slider {
        background: #4ade80;
    }

    .switch input:checked + .slider::before {
        transform: translateX(22px);
    }

    #portal {
        padding-left: 10px;
    }

    .portal-info {
        margin-left: 0;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 2%;
        margin: 2% 0;
    }

    .image-grid img {
        width: 100%;
        object-fit: contain;
        max-height: 500px;
    }

    .image-grid img:only-child {
        grid-column: 1 / -1;
    }

    .image-description {
        width: 100%;
        text-align: center;
        opacity: 0.7;

        margin: 2% 0;
    }

    section {
        position: relative;

        min-width: 100vw;
        max-height: none;

        flex: none;

        overflow: hidden;
        padding: var(--div-padding);
    }

    section.no-padding {
        padding: 0;
    }

    section.fixed-bg {
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-attachment: fixed !important;
    }

    section.stretched {
        min-height: calc(100vh);
    }

    section.centered.horizontally {
        text-align: center;
    }

    section.centered.vertically {
        vertical-align: middle;
    }

    section.aligned.left {
        text-align: left;
    }
    section.aligned.center {
        text-align: center;
    }
    section.aligned.right {
        text-align: right;
    }

    .dim {
        opacity: 0.6;
    }

    .dimmer {
        opacity: 0.45;
    }

    .dimmest {
        opacity: 0.3;
    }

    .aligned-left {
        text-align: left;
    }

    .aligned-center {
        text-align: center;
    }

    .aligned-right {
        text-align: right;
    }

    .all-unset {
        all: unset;
    }

    .flex-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;

        overflow-x: auto;
    }

    .flex-alternate {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .flex-alternate .flex-child:nth-child(even) {
        align-self: flex-end;
    }

    .flex-alternate.align-text {
        text-align: left;
    }

    .flex-alternate.align-text .flex-child:nth-child(even) {
        text-align: right;
    }

    .flex-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 2%;
    }

    .flex-row.between {
        justify-content: space-between;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2%;
    }

    .no-whitespace {
        white-space: nowrap;
    }

    .logo {
        color: white;
    }

    .logo .head,
    .logo .head .letter {
        text-shadow: 0 0 25px rgb(129, 18, 255);
        color: rgb(123, 61, 255);
    }

    h1.logo .head {
        text-shadow: 0 0 50px rgb(129, 18, 255);
    }

    .logo .tail {
        color: #777;
    }

    /* ==================== inline-blocks ==================== */

    code,
    kbd {
        display: inline-block;
        font-family: 'JetBrains Mono';
        padding: 4px 8px;
        border-radius: 10px;
        margin: 4px 0;
    }

    code {
        background-color: rgb(35, 35, 55);
        color: rgb(170, 190, 220);
        border: 1px solid rgb(181, 186, 255);

        /* background: var(--code-bg);
        color: var(--code-text); */
    }

    kbd {
        background-color: rgb(35, 35, 55);
        color: rgb(170, 190, 220);
        border: 1px solid rgb(181, 186, 255);
    }

    pre {
        background: rgb(40, 40, 60);
        padding: 0.75em 0.35em;
        margin: 1rem 1rem;
        border-radius: 6px;
        box-shadow: 0 0 10px 5px rgba(120, 140, 180, 0.4);
        user-select: text;
        color: rgb(180, 185, 200);

        overflow-x: auto;
        overflow-y: hidden;
    }

    a.plain {
        text-decoration: none;
        color: var(--text);
    }

    a:not(.plain) {
        text-decoration: none;
        display: inline-block;

        border-radius: 10px;

        color: var(--anchor);

        transition: all 0.2s ease;
    }

    a:not(.plain):hover {
        text-decoration: underline;
        color: var(--anchor-hover);
    }

    /* ==================== The Responsive Zone ==================== */

    @media (max-width: 768px) {
        :root {
            --div-padding: 8%;
        }

        body,
        p,
        blockquote,
        a {
            font-size: 15px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 30px;
        }

        section.fixed-bg {
            background-attachment: scroll !important;
        }
    }

    /* ==================== Debug ==================== */
    /* make sure to comment out when pushing to production */

    /* * {
        outline: 2px solid var(--debug-primary) !important;
    }

    *:not(div) {
        outline: 2px solid var(--debug-secondary) !important;
    } */
}