:root {
    --color-foreground: #c5c8c6;
    --color-background: #1d1f21;
    --color-heading: #ffffff;
    --color-highlight: #e5e5e5;
    --color-darken: #707880;
}

html {
    font-size: medium;
}

body {
    font-family: sans-serif;
    margin: 1rem auto 1rem;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-bottom: 5vh;
    max-width: 45rem;
    width: auto;
    background-color: var(--color-background);
    color: var(--color-foreground);
    text-align: start;
    font-size: 1.3rem;
    line-height: 1.3;
}

h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    text-align: center;
    font-variant: small-caps;
    margin-top: 1.6rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

b,
strong,
em,
i {
    color: var(--color-highlight);
}

del,
strike,
small {
    color: var(--color-darken);
}

mark {
    background-color: var(--color-highlight);
    color: var(--color-background);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

u {
    text-decoration-style: wavy;
    text-decoration-color: var(--color-highlight);
}

p::first-letter {
    font-size: 140%;
    /* line-height is 1/14 to compensate for font size */
    line-height: 71%;
    font-weight: bold;
}

p {
    margin-top: 0rem;
    hyphens: auto;
}

a {
    font-weight: bolder;
}

a:link,
a:visited {
    color: var(--color-highlight);
}

a:active,
a:hover {
    color: var(--color-heading);
}

.catchphrase {
    text-align: center;
    font-size: 117%;
    color: var(--color-highlight);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.fullwidth {
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: serif;
    font-weight: lighter;
}