@font-face {
    font-family: "Iowan BT";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    font-weight: 600;
    src: url(./fonts/IowanOldStyleBTBold.woff2) format("woff2")
}

@font-face {
    font-family: "Iowan BT";
    font-style: italic;
    font-stretch: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./fonts/IowanOldStyleBTItalic.woff2) format("woff2")
}

@font-face {
    font-family: "Iowan BT";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./fonts/IowanOldStyleBTRoman.woff2) format("woff2")
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    font-weight: 400;
    src: url(./fonts/JetBrainsMono-Regular.woff2) format("woff2")
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    font-weight: 700;
    src: url(./fonts/JetBrainsMono-Bold.woff2) format("woff2")
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
    --font-size--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --font-size--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --font-size-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --font-size-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --font-size-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --font-size-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --font-size-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --font-size-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);


    --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
    --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
    --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
    --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
    --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);

    --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
    --space-2xs-xs: clamp(0.5rem, 0.3478rem + 0.7609vw, 0.9375rem);
    --space-xs-s: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
    --space-s-m: clamp(1rem, 0.6957rem + 1.5217vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.3913rem + 3.0435vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.3043rem + 3.4783vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.7826rem + 6.087vw, 7.5rem);

    --space-l-2xl: clamp(2rem, 0.9565rem + 5.2174vw, 5rem);

    --accent-color: #750000;
    --text-color: #24292f;
    --bg-color: #fcfcf8;
    --code-bg-color: #dedede;
    --default-gap: var(--space-l);
    --small-gap: var(--space-xs);
    --font-mono: 'JetBrains Mono', monospace;
    --font-default: 'Iowan BT';

    --icon-size: 1.2em;
    --social-icon-size: 1em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent-color: #ffb700;
        --text-color: #f7f7f7;
        --bg-color: #202020;
        --code-bg-color: #0c0c0c;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;

    font-family: var(--font-default), "Helvetica", sans-serif;
    color: var(--text-color);
}


html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    background-color: var(--bg-color);
}

body {
    max-width: 68em;

    margin: 0 auto;
    padding: var(--default-gap);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--default-gap);
}

#profile {
    flex: 1;
    flex-basis: 16rem;
}

main {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: min(100%, 24rem);
}

footer {
    width: 100%;
    padding: 20px;
    margin-top: 30px;
    text-align: center;
}


#profile *,
footer * {
    font-family: var(--font-mono);
}


#profile p {
    font-size: var(--font-size-1);
    font-weight: bold;
    margin: 0;
    padding-left: var(--small-gap);
}

#profile img {
    max-width: 6em;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--accent-color);
    aspect-ratio: 1;
}

#profile a {
    border: none;
}

#profile ul {
    list-style: none;
    margin: var(--space-3xs) 0;
    padding-left: var(--small-gap);
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
}

#profile nav[aria-label="Main"] ul {
    flex-direction: column;
    gap: var(--space-xs);
}

#profile nav[aria-label="Main"] svg {
    width: var(--icon-size);
    height: var(--icon-size);
    position: relative;
    top: calc((var(--icon-size) - 1em) / 2 + 0.05em);
}

#profile nav[aria-label="Social"] svg {
    fill: var(--accent-color);
    width: var(--social-icon-size);
    height: var(--social-icon-size);
}

#profile-meta {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono), 'ui-monospace';
    color: var(--accent-color);
    margin-block-start: var(--space-s);

    hyphens: auto;
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-3);
}

h2 {
    font-size: var(--font-size-2);
    margin-block-start: var(--space-m-l);
}

h3, hgroup p {
    font-size: var(--font-size-1);
}

hgroup h2 {
    margin-block-end: var(--space-3xs);
}

h3,
hgroup p {
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: var(--space-3xs);
}

p, li {
    font-size: var(--font-size-0);
    line-height: 1.8;
    text-wrap: pretty;
}

p {
    margin-block-start: var(--space-xs);
    margin-block-end: var(--space-xs);
}

code {
    font-family: var(--font-mono);
    background-color: var(--code-bg-color);
    padding: 0.1rem 0.3rem;
    border-radius: 0.2rem;
}

a {
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.caret {
    margin-right: calc(var(--space-3xs) * -1);
}

footer p {
    font-size: var(--font-size--2);
}

#profile {
    container-type: inline-size;
}

#profile > div {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
}

@container (min-width: 16.1rem) {
    #profile > div {
        flex-direction: row;
    }

    #profile nav[aria-label="Main"] ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--small-gap) calc(var(--small-gap) * 2);
    }
}