:root {
    --heading-font-family: "Roboto Slab", "Times New Roman", serif;
    --body-font-family: "Roboto", "Arial", sans-serif;

    /* typography (minor scale) */
    --heading-1: 2.986rem;
    --heading-2: 2.488rem;
    --heading-3: 2.074rem;
    --heading-4: 1.728rem;
    --heading-5: 1.44rem;
    --heading-6: 1.2rem;
    --small: 0.833rem;
    --x-small: 0.694rem;

    --step--2: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);
    --step--1: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);
    --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
    --step-2: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);
    --step-3: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);
    --step-4: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);
    --step-5: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);

    --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
    --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
    --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
    --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
    --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
    --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
    --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
    --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
    --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
    --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
    --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
    --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, 0.5652rem + 2.1739vw, 2.25rem);

    /* Grid */
    --grid-max-width: 69.75rem;
    --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
    --grid-columns: 12;

    /* Colors */
    --color-bg-light: hsl(0 0% 100%);
    --color-fg-light: hsl(0 0% 0% / .88);
    --color-bg-dark: hsl(218 21% 15%);
    --color-fg-dark: hsl(0 0% 100% / .88);

    --color-neutral-50: hsl(0 0% 98%);
    --color-neutral-100: hsl(0 0% 96%);
    --color-neutral-200: hsl(0 0% 93%);
    --color-neutral-300: hsl(0 0% 88%);
    --color-neutral-400: hsl(0 0% 74%);
    --color-neutral-500: hsl(0 0% 62%);
    --color-neutral-600: hsl(0 0% 46%);
    --color-neutral-700: hsl(0 0% 38%);
    --color-neutral-800: hsl(0 0% 26%);
    --color-neutral-900: hsla(0 0% 13%);

    --color-anchor: hsl(240, 100%, 47%);
    --color-anchor-dark: hsl(210 100% 85%);
    --color-anchor-purple: hsl(270 100% 81%);

    /* Blockquote colors */
    --color-bq-light: var(--color-neutral-700);
    --color-bq-dark: var(--color-fg);

    /* Poem colors */
    --color-poem-light: var(--color-neutral-100);
    --color-poem-dark: hsl(from var(--color-neutral-600) h s l / .2);

    /* Global colors */
    --color-bg: var(--color-bg-light);
    --color-fg: var(--color-fg-light);
    --color-bq: var(--color-bq-light);
    --color-poem: var(--color-poem-light);

    --color-anchor-visited-dark: var(--color-anchor-purple);
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

html {
    font-family: var(--body-font-family);
    padding-block-start: var(--space-s);
    padding-block-end: var(--space-l);
    padding-inline: var(--space-s);
}

body {
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;

    background-color: var(--color-bg);
    color: var(--color-fg);
}

body {
    max-width: 70ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font-family);
    font-weight: 400;
}

:is(p, b, i, strong, em, li, h1, h2, h3) > code {
    background-color: var(--color-neutral-200);
}

hr {
    border-color: var(--color-neutral-800);
}

h1 {
    font-size: var(--heading-1);
    text-align: center;
}

h2 {
    font-size: var(--heading-2);
}

picture > img {
    width: 100%;
    height: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
    object-fit: cover;
}

#logo {
    max-width: 36px;
    aspect-ratio: 1 / 1;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

header nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    column-gap: var(--space-l);
}

header nav ul > li:first-child {
    margin-inline-end: auto;
}

header nav li {
    list-style-type: none;
}

p,
li,
pre {
    line-height: 1.6em;
}

pre {
    white-space: pre-wrap;
    font-family: inherit;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'],
footer * {
  list-style: none;
}

ul,
ol {
  margin-inline-start: var(--space-2xs);
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

b,
i,
strong,
em,
a {
    font-size: inherit;
}

time {
    font-size: var(--step--1);
    font-style: italic;
}

kbd {
    background-color: hsl(0 0% 93%);
    border-radius: 3px;
    border: 1px solid hsl(0 0% 71%);
    box-shadow:
        0 1px 1px hsl(0 0% 0% / 0.2),
        0 2px 0 0 hsl(0 0% 100% / 0.7) inset;
    color: hsl(0 0% 20%);
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

sup,
sub {
    font-size: var(--step--2);
}

#heading > * + * {
    margin-block-start: var(--space-3xs);
}

#heading p {
    font-family: var(--heading-font-family);
    font-size: var(--step-0);
    text-align: center;
}

.icon {
    width: 1.5em;
    aspect-ratio: 1;
    fill: var(--color-neutral-200);
}

.icon:hover {
    fill: var(--color-neutral-600);
}

.icon.calendar {
    width: 1.1em;
}

.timestamp {
    display: flex;
    column-gap: var(--space-3xs);
    color: var(--color-neutral-800);
    fill: currentColor;
}

.poem + p.answer {
    margin: 0;
}

.icon {
    fill: var(--color-neutral-600);
}

.row {
    display: flex;
    gap: var(--space-2xs);
}

.column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.center {
    display: flex;
    justify-content: center;
    gap: var(--space-2xs);
}

button {
    all: unset;
    border: 2px solid var(--color-neutral-400);
    border-radius: 4px;
    padding-inline: var(--space-s);
    padding-block: var(--space-3xs);
    cursor: pointer;
    font-size: inherit;
}

button:hover {
}

header a:visited {
    color: var(--color-anchor);
}

/* Make code blocks horizontally scrollable
pre code {
    display: block;
    overflow-x: auto;
    white-space: pre;
} */

/* Scrollbar Styles 
pre code::-webkit-scrollbar {
  height: 8px;              
}

pre code::-webkit-scrollbar-track {
  background: #eee;         
  border-radius: 5px;
}

pre code::-webkit-scrollbar-thumb {
  background-color: #888;  
  border-radius: 5px;
}

pre code::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}
*/

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: var(--color-bg-dark);
        --color-fg: var(--color-fg-dark);
        --color-bq: var(--color-bq-dark);
        --color-poem: var(--color-poem-dark);
    }

    a {
        color: var(--color-anchor-dark);
    }

    a:visited {
        color: var(--color-anchor-visited-dark);
    }

    header a:visited {
        color: var(--color-anchor-dark);
    }

    :is(p, b, i, strong, em, li, h1, h2, h3) > code {
        background-color: var(--color-neutral-600);
    }

    hr {
        border-color: var(--color-neutral-200);
    }

    .icon {
        fill: var(--color-neutral-200);
    }

    .icon:hover {
        fill: var(--color-neutral-400);
    }

    .timestamp > * {
        color: var(--color-neutral-400);
        fill: var(--color-neutral-400);
    }
}