/* font-family: "Inter"; */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=block'); */
/* font-family: "Geist"; */
/* @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=block'); */
/* font-family: "JetBrains Mono"; */
/* @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=block'); */

:root {
    --color-theme: hsl(40, 100%, 50%);
    --color-theme-90: hsla(40, 100%, 50%, 0.9);
    --color-theme-80: hsla(40, 100%, 50%, 0.8);
    --color-theme-70: hsla(40, 100%, 50%, 0.7);
    --color-theme-60: hsla(40, 100%, 50%, 0.6);
    --color-theme-50: hsla(40, 100%, 50%, 0.5);
    --color-theme-40: hsla(40, 100%, 50%, 0.4);
    --color-theme-30: hsla(40, 100%, 50%, 0.3);
    --color-theme-20: hsla(40, 100%, 50%, 0.2);
    --color-theme-10: hsla(40, 100%, 50%, 0.1);
}

:root {
    --font-main: monospace;
    --font-size-1rem: 16px;
    --font-weight: 400;
    --color-bg: hsl(0, 0%, 10%);
    --color-tx: var(--color-theme);
    --color-lk: hsl(0, 0%, 90%);
    --color-lk-hover: hsl(0, 0%, 40%);
    --color-lk-underline: hsl(0, 0%, 30%);
    --color-lk-underline-hover: hsl(0, 0%, 60%);
    --color-text-select-tx: hsl(0, 0%, 10%);
    --color-text-select-bg: hsl(0, 0%, 90%);
}

/* ==================================================================================================== */

*,
*::before,
*::after {
    font-family: var(--font-main);
    font-size: var(--font-size-1rem);
    font-weight: var(--font-weight);
}

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

::selection {
    background: var(--color-text-select-bg);
    color: var(--color-text-select-tx);
}

a {
    color: var(--color-lk);
    text-decoration-color: var(--color-lk-underline);
}

a:hover {
    color: var(--color-lk-hover);
    text-decoration-color: var(--color-lk-underline-hover);
}