:root {
    /* colors */
    --color-cream: #FFCA95;
    --color-peach: #FF7873;
    --color-pink: #E22F80;
    --color-darkpink: #90144B;
    --color-purple: #8140DC;
    --color-darkpurple: #090311;
    --color-darkpurple2: #110420;
    --color-white: #F7F7F7;
    --color-lightgray: #EEEEEE;
    --color-gray: #929AAB;
    --color-darkgray: #888888;
    --color-black: #0a0a0a;
    --bg-col: var(--color-darkpurple);
    --bg-col2: var(--color-darkpurple2);
    --fg-col: var(--color-white);
    --accent: var(--color-peach);
    --accent2: var(--color-purple);
    --accent-light: var(--color-cream);

    color-scheme: dark;

    /* spacing */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    --content-width: 720px;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url(../fonts/JetBrainsMono-Regular.woff2) format('woff2');
}

/* --- reset / base --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100vh;
}
body {
    padding-top: var(--space-xl);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "JetBrains Mono", monospace;
    background-color: var(--bg-col);
    color: var(--fg-col);
    line-height: 1.5;
}

.content {
    min-width: 0;
    img, video {
        max-width: 100%;
        height: auto;
    }
    img.small,
    video.small {
        width: 220px;
    }
}



/* --- layout --- */
main {
    display: grid;
    grid-template-columns: 16rem minmax(0, var(--content-width));
    column-gap: var(--space-lg);
    margin: 0 auto;
    flex: 1;
    padding: var(--space-md);
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size:.9rem ;
    color: var(--color-darkgray);
    hr {
        grid-column: 1 / -1;
        margin: var(--space-sm) 0 var(--space-sm);
    }
    .footer-right{
        text-align: right;
    }
    p {
        padding: 0;
        margin: 0;
    }
    a {
        color: var(--color-darkgray);
        padding: 0;
        text-decoration-thickness: 1px;
    }
}

.navbar{
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    a{
        text-decoration: none;
    }
}


header{
    padding: var(--space-sm) var(--space-md);
}
/* --- components --- */

#testid {
    color: var(--accent);
}

hr {
    border: none;
    border-top: 1px solid var(--accent);
}

/* --- links --- */
a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    img {
        display: inline-block;
    }
    &:hover, &:active {
        color: var(--accent-light);
    }
}


/* --- button --- */
button {
    border: none;
    padding: 0;
    display: inline;
    background-color: inherit;
    font: inherit;
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    -webkit-appearance: none;
    cursor: pointer;
    &:hover, &:active {
        color: var(--accent-light);
    }
    &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}