:root {
    --code-font-family: "Source Code Pro", "Courier New", monospace;
    --heading-font-family: "Roboto Slab", "Times New Roman", serif;
    --body-font-family: "Roboto", "Arial", sans-serif;
    --category-color: hsl(0, 0%, 33.33%);
    --category-hover-color: hsl(0, 0%, 46.67%);
    --poem-color: hsl(0, 0%, 6.67%);

    /* Major second typography */
    --heading-hover-max: 2.8856rem;
    --heading-max: 2.565rem;
    --heading-1: 2.027rem;
    --heading-2: 1.802rem;
    --heading-3: 1.602rem;
    --heading-4: 1.424rem;
    --heading-5: 1.266rem;
    --heading-6: 1.125rem;
    --paragraph: 1rem;
    --poem-paragraph: 1.1rem;
    --small: 0.889rem;
    --x-small: 0.79rem;

    /* Spacing */
    --space-3xs: 0.3125rem;
    --space-2xs: 0.5625rem;
    --space-xs: 0.875rem;
    --space-s: 1.125rem;
    --space-m: 1.6875rem;
    --space-l: 2.25rem;
    --space-xl: 3.375rem;
    --space-2xl: 4.5rem;
    --space-3xl: 6.75rem;

    /* One-up pairs */
    --space-3xs-2xs: 0.3125rem;
    --space-2xs-xs: 0.5625rem;
    --space-xs-s: 0.875rem;
    --space-s-m: 1.125rem;
    --space-m-l: 1.6875rem;
    --space-l-xl: 2.25rem;
    --space-xl-2xl: 3.375rem;
    --space-2xl-3xl: 4.5rem;

    /* Custom pairs */
    --space-s-l: 1.125rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    margin: var(--space-s);
    font-family: var(--body-font-family);
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;
}

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

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

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

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

h2 {
    font-size: var(--heading-5);
    margin-bottom: var(--space-2xs);
}

pre {
    font-size: var(--poem-paragraph);
    white-space: pre-wrap;
    font-family: inherit;
}

h1, h2, pre {
    color: var(--poem-color);
}

#gallery h2 {
    font-size: var(--heading-max);
    text-transform: lowercase;
}

#gallery ul {
    padding-inline-start: var(--space-l);
}

#gallery ul > * {
    margin-block-start: var(--space-2xs);
}

li {
    margin: var(--space-2xs) 0;
}

header nav ul {
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--space-2xs);
}

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

header nav li + li::before {
    padding-inline-end: var(--space-2xs);
    content: "›";
    font-weight: bold;
}

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

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

p.epigraph + pre {
    margin-top: var(--space-s);
}

#content pre + h2 {
    margin-block-start: var(--space-l);
}

footer {
    margin-block-start: var(--space-s);
}

footer a {
    font-size: var(--small);
}