:root {
    --moonstone: rgb(43, 158, 179);
    --light-gray: #d7d6d6;
    --gunmetal: #22333B;
    --violet: rgb(128, 94, 115);
    --violet-faded: rgba(128, 94, 115, .8);
    --cherry: hsl(349, 60%, 40%);
    --cherry-hover: hsl(349, 60%, 30%);
}

/* Soehne */
@font-face {
    font-family: "Soehne";
    src: url('./fonts/test-soehne-buch.woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Soehne";
    src: url('./fonts/test-soehne-buch-kursiv.woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Soehne";
    src: url('./fonts/test-soehne-halbfett.woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Soehne";
    src: url('./fonts/test-soehne-halbfett-kursiv.woff2');
    font-weight: 600;
    font-style: italic;
}

/* Match */

@font-face {
    font-family: "Match";
    src: url('./fonts/HvDTrial_Match-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Match";
    src: url('./fonts/HvDTrial_Match-RegularItalic.otf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Match";
    src: url('./fonts/HvDTrial_Match-Bold.otf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Match";
    src: url('./fonts/HvDTrial_Match-BoldItalic.otf');
    font-weight: 600;
    font-style: italic;
}

/* Fabrikat */

@font-face {
    font-family: "Fabrikat";
    src: url('./fonts/HvDTrial_FabrikatNormal-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Fabrikat";
    src: url('./fonts/HvDTrial_FabrikatNormal-RegularItalic.otf');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Fabrikat";
    src: url('./fonts/HvDTrial_FabrikatNormal-Bold.otf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Fabrikat";
    src: url('./fonts/HvDTrial_FabrikatNormal-BoldItalic.otf');
    font-weight: 600;
    font-style: italic;
}

/* Really Sans */

@font-face {
    font-family: "ReallySans";
    src: url('./fonts/ReallySansSmallTrial-Regular.woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ReallySans";
    src: url('./fonts/ReallySansSmallTrial-Italic.woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ReallySans";
    src: url('./fonts/ReallySansSmallTrial-Bold.woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "ReallySans";
    src: url('./fonts/ReallySansSmallTrial-BoldItalic.woff2');
    font-weight: 600;
    font-style: italic;
}

body {
    background-color: var(--moonstone);
    font-family: "ReallySans";
    color: var(--gunmetal);
    font-size: 1.25rem;
    margin: 1em;
    padding: 0 1em;
    border-top: .125em solid var(--gunmetal);
}

h1 {
    font-size: 2em;
}

@media (min-width: 60rem) {
    body {
        font-size: 1.375rem;
    }
}

a {
    transition: all 250ms;
    color: var(--cherry);
}

a:hover {
    color: var(--cherry-hover);
}

span.quiet {
    color: #22333b80;
}

article {
    max-width: 30em;
}

article p {
    line-height: 1.5;
    /* letter-spacing: .01em; */
}

article li {
    margin: 0.5em auto;
}

article img {
    max-width: 100%;
}

sup {
    font-size: .5em;
    font-weight: bold;
}

sup a {
    text-decoration: none;
    padding: 0.125em 0.375em;
    background-color: #f8333c22;
    line-height: 0;
    border-radius: 0.375em;
}

sup a:hover {
    color: #ffffff99;
    background-color: #f8333c;
}

.footnote {
    color: #22333baa;
    font-size: 0.75em;
}