/*
===============================================
CREDITS
-----
Colours are from Flexoki theme
https://stephango.com/flexoki
===============================================
*/


@import url(https://fonts.bunny.net/css?family=asap:100,200,300,400,500,600,700,800,900|fira-sans:100,200,300,400,500,600,700,800,900|gentium-book-basic:400,700);

:root {
    --black: #100f0f;
    /* bg/txt - lt */
    --base-950: #1c1b1a;
    /* bg2 */
    --base-900: #282726;
    /* ui */
    --base-850: #343331;
    /* ui2 */
    --base-800: #403e3c;
    /* ui3 */
    --base-700: #575653;
    /* txt3 */
    --base-600: #6f6e69;
    /* txt2 */
    --base-500: #878580;
    /* txt2 - lt */
    --base-300: #b7b5ac;
    /* txt3 - lt */
    --base-200: #cecdc3;
    /* txt/ui3 - lt */
    --base-150: #dad8ce;
    /* ui2 - lt */
    --base-100: #e6e4d9;
    /* ui - lt */
    --base-50: #f2f0e5;
    /* bg2 - lt */
    --paper: #fffcf0;
    /* bg */

    --red-600: #AF3029;
    --red-400: #D14D41;
    --orange-600: #BC5215;
    --orange-400: #DA702C;
    --yellow-600: #AD8301;
    --yellow-400: #D0A215;
    --green-600: #66800B;
    --green-400: #879A39;
    --cyan-600: #24837B;
    --cyan-400: #3AA99F;
    --blue-600: #205EA6;
    --blue-400: #4385BE;
    --purple-600: #5E409D;
    --purple-400: #8B7EC8;
    --magenta-600: #A02F6F;
    --magenta-400: #CE5D97;

    --title-font: "Fira Sans", sans-serif;
    --accent-font: "Gentium Book Basic", serif;
    --body-font: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
    --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --italic-font: "Georgia", serif;

    --fontsize-xs: clamp(0.6944rem, 0.684rem + 0.0465vw, 0.72rem);
    --fontsize-s: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
    --fontsize-body: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --fontsize-sm: clamp(1.2rem, 1.1156rem + 0.375vw, 1.4063rem);
    --fontsize-m: clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
    --fontsize-ml: clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
    --fontsize-l: clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
    --fontsize-xl: clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);

    --font-weight-regular: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;

    --gutter: clamp(1ch, 2.5vmax, 3ch);
    /* inline */
    --stack: clamp(1.25ex, 2.5vmax, 1.75ex);
    /* block */
    --line-length: 70ch;
    --inline-size: 100vi;
    --min-inline-size: 20ch;
    --page-padding-inline: calc((100vi - min(var(--line-length), 80vi)) / 2);

    --list-style: none;
    --ol-style-type: decimal;
    --transition: 0.5s linear;
    --bullet-hanging-offset: 0;
    --quote-hanging-offset: -1ex;
}

[data-theme="dark"] {
    --bg: var(--black);
    --bg-2: var(--base-950);
    --ui: var(--base-950);
    --ui-2: var(--base-850);
    --ui-3: var(--base-800);
    --txt: var(--base-200);
    --txt-2: var(--base-500);
    --txt-3: var(--base-700);
}

[data-theme="light"] {
    --bg: var(--paper);
    --bg-2: var(--base-50);
    --ui: var(--base-100);
    --ui-2: var(--base-150);
    --ui-3: var(--base-200);
    --txt: var(--base-950);
    --txt-2: var(--base-600);
    --txt-3: var(--base-300);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--black);
        --bg-2: var(--base-950);
        --ui: var(--base-950);
        --ui-2: var(--base-850);
        --ui-3: var(--base-800);
        --txt: var(--base-200);
        --txt-2: var(--base-500);
        --txt-3: var(--base-700);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: var(--black);
        --bg-2: var(--base-950);
        --ui: var(--base-950);
        --ui-2: var(--base-850);
        --ui-3: var(--base-800);
        --txt: var(--base-200);
        --txt-2: var(--base-500);
        --txt-3: var(--base-700);
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-feature-settings: "kern";
    font-kerning: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

:where([hidden]:not([hidden="until-found"])) {
    display: none !important;
}

:where(html) {
    -webkit-text-size-adjust: none;
    color-scheme: dark light;
    tab-size: 2;
    scrollbar-gutter: stable;
    interpolate-size: allow-keywords;
    line-height: 1.5;
}

:where(html:has(dialog:modal[open])) {
    overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
    :where(html:focus-within) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

:where(body) {
    line-height: inherit;
    font-family: system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

:where(button) {
    all: unset;
}

:where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
}

:where(textarea) {
    resize: vertical;
    resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]),
input:is([type="checkbox"], [type="radio"]) {
    cursor: pointer;
}

:where(form) {
    display: inline;
}

:where(:disabled, label:has(> :disabled, + disabled)) {
    cursor: not-allowed;
}

:where(a) {
    color: inherit;
    text-underline-offset: 0.2ex;
}

:where(ul, ol) {
    list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
}

:where(img, picture, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

p:not(:first-of-type) {
    margin: 2ch 0;
    line-height: 160%;
}

:where(h1, h2, h3) {
    line-height: calc(1em + 0.5rem);
    text-wrap: balance;
}

h1 {
    font-family: var(--title-font);
    letter-spacing: .1ch;
}

:where(hr) {
    border: none;
    border-block-start: 1px solid;
    color: inherit;
    block-size: 0;
    overflow: visible;
}

:where(dialog, [popover]) {
    border: none;
    background: none;
    color: inherit;
    inset: unset;
    max-width: unset;
    max-height: unset;
    overflow: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
}

:where(:focus-visible) {
    outline: 3px solid CanvasText;
    box-shadow: 0 0 0 5px Canvas;
    outline-offset: 1px;
}

:where(:focus-visible, :target) {
    scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    border: 0 !important;
    user-select: none !important;
}


body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    min-block-size: 100vh;
    min-block-size: 100dvb;

    background-color: var(--black);
    color: var(--base-200);
    font: var(--fontsize-body) var(--body-font);
}

::-webkit-scrollbar {
    width: 7px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg);
    border: 3px solid var(--ui-2);
}

::-webkit-scrollbar-thumb {
    background: var(--black);
    border: 1px solid var(--ui-2);
}

nav,
main {
    padding-block: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2);
    padding-inline: var(--page-padding-inline);
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    a {
        text-decoration: none;
        color: var(--base-150);
    }

    a:hover {
        color: var(--base-100);
    }

    .logo {
        font: var(--fontsize-m) var(--accent-font);
        color: var(--cyan-400);
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        a {
            text-transform: uppercase;
            letter-spacing: .2ch;
            font-weight: 600;
            font-size: var(--fontsize-s);
        }
        a:hover {
            color: var(--cyan-400);
        }
    }
}

.thestream {
    a {
        text-decoration: none;
    }
    .stream-item {
        display: flex;
        flex-wrap: wrap;
        gap: var(--fontsize-l);
    }
    .stream-date {
        font: var(--fontsize-body) var(--mono-font);
        color: var(--base-500);
    }
    .stream-title {
        font: var(--fontsize-body) var(--body-font);
        text-decoration: underline 1px solid var(--cyan-600);
    }
}

.title {
    font: var(--fontsize-ml) var(--title-font);
}
.subtitle {
    margin-bottom: 3ch;
    font: var(--fontsize-s) var(--mono-font);
    color: var(--base-300);
}