:root {
    /* b&w */
    --stone-050: #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;

    /* colors */
    --red: #ef4444;
    --orange: #f97316;
    --amber: #f59e0b;
    --yellow: #eab308;
    --lime: #84cc16;
    --elouan-green: #7db84f;
    --green: #22c55e;
    --emerald: #10b981;
    --teal: #14b8a6;
    --cyan: #06b6d4;
    --sky: #0ea5e9;
    --blue: #3b82f6;
    --indigo: #6366f1;
    --violet: #8b5cf6;
    --purple: #a855f7;
    --fuchsia: #d946ef;
    --pink: #ec4899;
    --rose: #f43f5e;

    /* link colors */
    --github: var(--stone-100);
    --bluesky: #048bff;
    --email: var(--violet);
    --rss: var(--orange);
    --reddit: #ff4500;
    --signal: #3a76f0;
    --discord: #3242ed;
    --default-highlight: var(--fuchsia);

    --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', 'Cascadia Code',
        monospace;
}

/* global styles */
*::selection {
    background-color: var(--indigo);
    color: var(--stone-600);
}

body {
    font-family: Inter, sans-serif;
    max-width: 750px;
    margin: 0 auto;
    padding: 30px 10px;
    font-size: 1.1em;
    background-color: var(--stone-950);
    color: var(--stone-200);
    line-height: 1.6;
}

/* typography */
h1,
h2,
h3 {
    font-family: var(--font-mono);
    line-height: 1.2;
}

ul {
    padding-inline-start: 1em;

    >li {
        list-style: '- ';
    }
}

/* links */
a {
    --color: var(--blue);
    color: var(--color);

    &.heading {
        text-decoration: none;
    }

    &:hover {
        background-color: var(--color);
        color: var(--stone-950);
        outline: 2px solid var(--color);
    }

    &:focus {
        outline: 2px solid var(--color);
        text-decoration: none;
    }
}

a.big {
    padding: 0.1em;
    font-weight: bold;
    margin: 0 0.2em;

    &:first-of-type {
        margin-left: 0;
    }
}

#github-profile-commit-status a {
    --color: var(--github);
    font-weight: bold;
}

/* buttons and forms */
label {
    display: block;
    padding: 0.3em 0;

    >* {
        display: block;
    }
}

button {
    --color: var(--blue);
    color: var(--color);

    &:hover {
        background-color: var(--color);
        color: var(--stone-050);
        outline: 2px solid var(--color);
    }

    &:focus {
        outline: 2px solid var(--color);
        text-decoration: none;
    }

    outline: 2px solid var(--stone-800);
    background-color: var(--stone-800);
    color: var(--stone-050);
    border: none;
    cursor: pointer;
}

.search {
    width: 200px;
    height: 25px;
    font-size: 18px;
    color: var(--stone-50);

    background-color: var(--stone-800);
    color: var(--stone-050);
    border: none;
}

/* headings and specific elements */
.heading {
    font-family: var(--font-mono);
    line-height: 1.2;
    text-decoration: none;
}

.heading a {
    text-decoration: none;
}

/* tooltips */
.has-tooltip {
    border-bottom: 1px dotted var(--fuchsia);
    cursor: help;
    position: relative;
}

#tooltip-display {
    position: absolute;
    background-color: var(--stone-800);
    color: var(--stone-100);
    padding: 5px 10px;
    font-size: 0.85em;
    border: 1px solid var(--stone-600);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

    z-index: 1010;

    white-space: nowrap;
    max-width: 250px;

    pointer-events: none;
}

#tooltip-display.visible {
    opacity: 1;
    visibility: visible;
}

/* content specific styles */
content figure {
    margin: 2em 0;
}

content figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--stone-100);
    box-sizing: border-box;
}

content figcaption {
    padding: 0.75em 0.25em;
    text-align: center;
    font-size: 0.9em;
    color: var(--stone-400);
    line-height: 1.4;
}