:root {
    --flexoki-black: #100f0f;
    --flexoki-paper: #fffcf0;

    --flexoki-50: #f2f0e5;
    --flexoki-100: #e6e4d9;
    --flexoki-150: #dad8ce;
    --flexoki-200: #cecdc3;
    --flexoki-300: #b7b5ac;
    --flexoki-400: #9f9d96;
    --flexoki-500: #878580;
    --flexoki-600: #6f6e69;
    --flexoki-700: #575653;
    --flexoki-800: #403e3c;
    --flexoki-850: #343331;
    --flexoki-900: #282726;
    --flexoki-950: #1c1b1a;

    --flexoki-red-50: #ffe1d5;
    --flexoki-red-100: #ffcabb;
    --flexoki-red-150: #fdb2a2;
    --flexoki-red-200: #f89a8a;
    --flexoki-red-300: #e8705f;
    --flexoki-red-400: #d14d41;
    --flexoki-red-500: #c03e35;
    --flexoki-red-600: #af3029;
    --flexoki-red-700: #942822;
    --flexoki-red-800: #6c201c;
    --flexoki-red-850: #551b18;
    --flexoki-red-900: #3e1715;
    --flexoki-red-950: #261312;

    --flexoki-orange-50: #ffe7ce;
    --flexoki-orange-100: #fed3af;
    --flexoki-orange-150: #fcc192;
    --flexoki-orange-200: #f9ae77;
    --flexoki-orange-300: #ec8b49;
    --flexoki-orange-400: #da702c;
    --flexoki-orange-500: #cb6120;
    --flexoki-orange-600: #bc5215;
    --flexoki-orange-700: #9d4310;
    --flexoki-orange-800: #71320d;
    --flexoki-orange-850: #59290d;
    --flexoki-orange-900: #40200d;
    --flexoki-orange-950: #27180e;

    --flexoki-yellow-50: #faeec6;
    --flexoki-yellow-100: #f6e2a0;
    --flexoki-yellow-150: #f1d67e;
    --flexoki-yellow-200: #eccb60;
    --flexoki-yellow-300: #dfb431;
    --flexoki-yellow-400: #d0a215;
    --flexoki-yellow-500: #be9207;
    --flexoki-yellow-600: #ad8301;
    --flexoki-yellow-700: #8e6b01;
    --flexoki-yellow-800: #664d01;
    --flexoki-yellow-850: #503d02;
    --flexoki-yellow-900: #3a2d04;
    --flexoki-yellow-950: #241e08;

    --flexoki-green-50: #edeecf;
    --flexoki-green-100: #dde2b2;
    --flexoki-green-150: #cdd597;
    --flexoki-green-200: #bec97e;
    --flexoki-green-300: #a0af54;
    --flexoki-green-400: #879a39;
    --flexoki-green-500: #768d21;
    --flexoki-green-600: #66800b;
    --flexoki-green-700: #536907;
    --flexoki-green-800: #3d4c07;
    --flexoki-green-850: #313d07;
    --flexoki-green-900: #252d09;
    --flexoki-green-950: #1a1e0c;

    --flexoki-cyan-50: #ddf1e4;
    --flexoki-cyan-100: #bfe8d9;
    --flexoki-cyan-150: #a2dece;
    --flexoki-cyan-200: #87d3c3;
    --flexoki-cyan-300: #5abdac;
    --flexoki-cyan-400: #3aa99f;
    --flexoki-cyan-500: #2f968d;
    --flexoki-cyan-600: #24837b;
    --flexoki-cyan-700: #1c6c66;
    --flexoki-cyan-800: #164f4a;
    --flexoki-cyan-850: #143f3c;
    --flexoki-cyan-900: #122f2c;
    --flexoki-cyan-950: #101f1d;

    --flexoki-blue-50: #e1eceb;
    --flexoki-blue-100: #c6dde8;
    --flexoki-blue-150: #abcfe2;
    --flexoki-blue-200: #92bfdb;
    --flexoki-blue-300: #66a0c8;
    --flexoki-blue-400: #4385be;
    --flexoki-blue-500: #3171b2;
    --flexoki-blue-600: #205ea6;
    --flexoki-blue-700: #1a4f8c;
    --flexoki-blue-800: #163b66;
    --flexoki-blue-850: #133051;
    --flexoki-blue-900: #12253b;
    --flexoki-blue-950: #101a24;

    --flexoki-purple-50: #f0eaec;
    --flexoki-purple-100: #e2d9e9;
    --flexoki-purple-150: #d3cae6;
    --flexoki-purple-200: #c4b9e0;
    --flexoki-purple-300: #a699d0;
    --flexoki-purple-400: #8b7ec8;
    --flexoki-purple-500: #735eb5;
    --flexoki-purple-600: #5e409d;
    --flexoki-purple-700: #4f3685;
    --flexoki-purple-800: #3c2a62;
    --flexoki-purple-850: #31234e;
    --flexoki-purple-900: #261c39;
    --flexoki-purple-950: #1a1623;

    --flexoki-magenta-50: #fee4e5;
    --flexoki-magenta-100: #fccfda;
    --flexoki-magenta-150: #f9b9cf;
    --flexoki-magenta-200: #f4a4c2;
    --flexoki-magenta-300: #e47da8;
    --flexoki-magenta-400: #ce5d97;
    --flexoki-magenta-500: #b74583;
    --flexoki-magenta-600: #a02f6f;
    --flexoki-magenta-700: #87285e;
    --flexoki-magenta-800: #641f46;
    --flexoki-magenta-850: #4f1b39;
    --flexoki-magenta-900: #39172b;
    --flexoki-magenta-950: #24131d;

    --color-primary: var(--flexoki-purple-600);

    --color-background: var(--flexoki-paper);
    --color-foreground: var(--flexoki-black);

    --color-link: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: var(--flexoki-purple-400);

        --color-background: var(--flexoki-black);
        --color-foreground: var(--flexoki-paper);
    }
}

body {
    margin: auto;
    margin-top: 30px;
    padding: 0 20px;
    line-height: 1.6;
    max-width: 65ch;
    letter-spacing: 0.02em;
    font-family: "Recursive", monospace;
    background-color: var(--color-background);
    color: var(--color-foreground);
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    body {
        margin-top: 20px;
        padding: 0 16px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0 12px;
        margin-top: 15px;
    }
}

/* TYPOGRAPHY */
h1,
h2,
h3 {
    font-weight: 600;
    line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
pre,
code {
    color: var(--color-foreground);
}

p + p {
    margin-top: 1.5em;
}

a[href] {
    color: var(--color-link);
}

a[href]:visited {
    color: var(--color-link-visited);
}

/* navbar */
nav {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 24px;
    padding-right: 24px;

    background-color: var(--color-primary);

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    div {
        display: flex;
        flex-direction: row;
        gap: 24px;

        li {
            list-style: none;

            a {
                color: var(--color-background) !important;
            }
        }
    }
}

/* writing */
#articles li {
    display: flex;
    justify-content: space-between;
}

#misc ul {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#misc ul li {
    list-style: none;
}

/* footer */
footer {
    margin-bottom: 20px;
}

footer hr {
    margin-top: 40px;
}

.accent-picker {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}

.accent-picker button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    font-size: inherit;
    color: inherit;
}

/* aside  */
aside {
    margin-left: 20px;
    font-style: italic;
}

/* code */
pre {
    display: block;
    padding: 0.5rem;
    overflow-x: auto;
    font-size: 0.9em;
    border-radius: 10px;

    font-family: "Iosevka Fixed Web", monospace;
}

.cool-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}