/* @import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
    --font-main: 'Geist', monospace;
    /* --font-main: 'Open Sans', monospace; */
    --font-size-1rem: 16px;
    --color-bg: hsl(0, 0%, 5%);
    --color-tx: hsl(0, 0%, 80%);
    --color-lk: hsl(0, 0%, 85%);
    --color-lk-hover: hsl(0, 0%, 100%);
    --color-lk-underline: hsl(0, 0%, 30%);
    --color-lk-underline-hover: hsl(0, 0%, 60%);
    --color-text-select-tx: black;
    --color-text-select-bg: white;
}

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

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);
}