:root {
    --selection: hsla(122, 21%, 51%, 0.502);
    --selection-noalpha: hsl(122, 21%, 51%);
    --foreground: hsl(43, 59%, 81%);
    --background: hsl(195, 6%, 12%);

    --border: color-mix(in hsl, var(--background), var(--cyan) 50%);
    --delim: color-mix(in hsl, var(--border), transparent 50%);

    --disabled: 20%;
    
    --black: hsl(20, 5%, 22%);
    --light-black: hsl(30, 12%, 51%);
    --red: hsl(2, 75%, 46%); /* 🧀 */
    --light-red: hsl(6, 96%, 59%);
    --green: hsl(60, 71%, 35%);
    --light-green: hsl(61, 66%, 44%);
    --yellow: hsl(40, 73%, 49%);
    --light-yellow: hsl(42, 95%, 58%);
    --blue: hsl(183, 33%, 40%);
    --light-blue: hsl(157, 16%, 58%);
    --magenta: hsl(333, 34%, 54%);
    --light-magenta: hsl(344, 47%, 68%);
    --cyan: hsl(122, 21%, 51%);
    --light-cyan: hsl(104, 35%, 62%);
    --white: hsl(35, 17%, 59%);
    --light-white: hsl(43, 59%, 81%);
}

/*
    --selection: #689d6a80;
    --foreground: #ebdbb2;
    --background: #1d2021;

    --border: color-mix(in hsl, var(--background), var(--cyan) 50%);
    --delim: color-mix(in hsl, var(--border), transparent 50%);

    --disabled: 50%;
    
    --black: #3c3836;
    --light-black: #928374;
    --red: #cc241d;
    --light-red: #fb4934;
    --green: #98971a;
    --light-green: #b8bb26;
    --yellow: #d79921;
    --light-yellow: #fabd2f;
    --blue: #458588;
    --light-blue: #83a598;
    --magenta: #b16286;
    --light-magenta: #d3869b;
    --cyan: #689d6a;
    --light-cyan: #8ec07c;
    --white: #a89984;
    --light-white: #ebdbb2;
*/

@font-face {
	font-family: Symbols;
	src: local("NerdFontsSymbols"), url("/core/fonts/Symbols.ttf") format("truetype");
}

@font-face {
	font-family: SymbolsMono;
	src: local("NerdFontsSymbolsMono"), url("/core/fonts/SymbolsMono.ttf") format("truetype");
}

@font-face {
    font-family: Iosevka;
    src: local("Iosevka"), url("/core/fonts/Iosevka.ttf") format("truetype");
}

@font-face {
    font-family: IosevkaTerm;
    src: local("IosevkaTerm"), url("/core/fonts/IosevkaTerm.ttf") format("truetype");
}

body {
    font-family: SymbolsMono, Iosevka, Tahoma, monospace;
    font-size: larger;
    font-variant-ligatures: normal;
    background-color: var(--background);
    color: var(--foreground);
}

:link {
    color: var(--blue);
}

:link:hover {
    color: var(--background);
    background-color: var(--blue);
}

:visited {
    color: var(--light-blue);
}

:visited:hover {
    color: var(--background);
    background-color: var(--light-blue);
}

*::selection {
    background-color: var(--selection);
}

button, a, select {
    transition: color 160ms, background-color 160ms;
    border-radius: 1px;
}

button {
    padding: 0; /* 0 .1rem */
    margin: 0;
    border: none; /* 2px solid var(--border) */
    font-size: inherit;
    font-family: inherit;
    color: var(--background);
    background-color: var(--foreground);
}

button:hover {
    color: var(--foreground);
    background-color: var(--light-cyan);
    cursor: pointer;
}

button:active {
    background-color: color-mix(in hsl, var(--light-cyan), transparent 50%);
}

input {
    font-size: inherit;
    font-family: inherit;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: #0008;
    color: inherit;
}

select {
    font-size: inherit;
    font-family: inherit;
    border: 0;
    margin: 0;
    padding: 0;
    background-color: var(--foreground);
    color: var(--background);
    cursor: pointer;
}

select:hover {
    background-color: var(--light-magenta);
}

option {
    background-color: var(--background);
    color: var(--foreground);
    cursor: pointer;
}

option:hover {
    background-color: var(--light-magenta);
    color: var(--background);
}

:focus-visible {
    outline: 1px solid var(--selection-noalpha);
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body:has(#articles-body) {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1em;
    background-color: color-mix(in hsl, var(--background), black var(--disabled));
}

#articles-body {
    padding: 1em;
    border-radius: 10px;
    border: 2px solid var(--border);
    background-color: var(--background);
    max-width: 50em;
}

#articles-body > article {
    border-top: 1px solid var(--delim);
    border-bottom: 1px solid var(--delim);
    padding-top: .4em;
    padding-bottom: .4em;
}

#articles-body > article > div.articles-date {
    color: var(--light-black);
    text-decoration: solid underline;
    font-size: smaller;
    margin-bottom: .2em;
}

#articles-body > div#articles-footer {
    margin-top: 1em;
    display: flex;
    justify-content: space-evenly;
}

#articles-body > div#articles-footer > a {
    font-size: larger;
    text-decoration: none;
}

#articles-body > div#articles-footer > a#link-gh {
    /* color: var(--light-black); */
    color: var(--white);
}

#articles-body > div#articles-footer > a#link-gh:hover {
    color: var(--background);
    background-color: var(--light-white);
}

#articles-body > div#articles-footer > a#link-yt {
    /* color: var(--light-black); */
    color: var(--red);
}

#articles-body > div#articles-footer > a#link-yt:hover {
    color: var(--background);
    background-color: var(--light-red);
}

#articles-body > div#articles-footer > a#link-tw {
    /* color: var(--light-black); */
    color: var(--magenta);
}

#articles-body > div#articles-footer > a#link-tw:hover {
    color: var(--background);
    background-color: var(--light-magenta);
}

#articles-body > div#articles-footer > a#link-ft {
    /* color: var(--light-black); */
    color: var(--yellow);
}

#articles-body > div#articles-footer > a#link-ft:hover {
    color: var(--background);
    background-color: var(--light-yellow);
}

#articles-body > div#articles-footer > a#link-th {
    /* color: var(--light-black); */
    color: var(--green);
}

#articles-body > div#articles-footer > a#link-th:hover {
    color: var(--background);
    animation: theme-colors 2s linear 0s infinite;
}

@keyframes theme-colors {
    0% {
        background-color: var(--light-green);
    }
    20% {
        background-color: var(--light-yellow);
    }
    40% {
        background-color: var(--light-red);
    }
    60% {
        background-color: var(--light-magenta);
    }
    80% {
        background-color: var(--light-blue);
    }
    100% {
        background-color: var(--light-cyan);
    }
}

div.tt-hint {
    position: absolute;
    display: none;
    background-color: var(--background);
    color: var(--foreground);
    font-size: 10pt;
    border: 1px solid color-mix(in hsl, var(--border), transparent 50%);
}

:hover > div.tt-hint {
    display: block;
}

#articles-body > h1 {
    color: var(--foreground);
    text-shadow: var(--light-blue) 0 0 30px, var(--blue) 0 0 5px;
    justify-self: center;
}