html {
    background: black;
    color: lightgray;
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    margin: 0 auto;
    text-align: center;
    scroll-behavior: smooth;
    width: 700px;
}

a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

a:hover { color: #f3e5ab; }

article {
    margin: 1em auto;
    overflow: auto;
    padding-right: 1em;
    text-align: left;
    h2 { margin-bottom: .5em; }
    h2 + p {
        color: darkgray;
        font-size: 90%;
        margin-top: .5em;
    }
}

nav.menu {
    a {
        padding: .5em;
        font-family: 'Outfit', sans-serif;
        font-weight: 900;
        text-transform: uppercase;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 1.5em;
        padding-inline-start: 0;
        row-gap: 1.1em;
    }
    li {
        display: inline-block;
        list-style-type: none;
    }
}

footer {
    color: darkgray;
    font-size: 85%;
    margin: 3em 0;
}

img.cover, img.right, img.left {
    max-height: 350px;
    max-width: 224px;
}

img.cover, img.left {
    float: left;
    margin-right: 1.5em;
}

img.cover { border: 1px solid #333; }

img.right {
    float: right;
    margin-left: 1.5em;
}

.logo {
    color: white;
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.icon { width: 25px; }

@media (max-width: 750px) {
    html { width: 100%; }
    body { margin: 0 1em; }
    h1 { font-size: 1.8em; }
    h2, article p { text-align: center; }
    article.justify p:not(:first-of-type) { text-align: justify; }
    img.cover, img.right, img.left {
        display: block;
        float: none;
        margin: 0 auto;
    }
}

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('./fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    font-style: italic;
    src: url('./fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf') format('truetype');
}