@font-face {
    font-family: atkinson-hyperlegible-next;
    src: url('../fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: atkinson-hyperlegible-next;
    src: url('../fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-Italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: atkinson-hyperlegible-mono;
    src: url('../fonts/Atkinson_Hyperlegible_Mono/AtkinsonHyperlegibleMono.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: atkinson-hyperlegible-mono;
    src: url('../fonts/Atkinson_Hyperlegible_Mono/AtkinsonHyperlegibleMono-Italic.ttf') format('truetype');
    font-style: italic;
}

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    font-family: atkinson-hyperlegible-next, sans-serif;
    margin: 0;

    background-color: plum;
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: column;

    max-width: 80rem;
    min-width: 49rem;
    min-height: calc(100svh - 2rem);
    padding: 2rem;
    margin: 1rem;

    background-color: white;
    border: black 2px solid;
    border-radius: 0.3rem;
}

/* Header */
header {
    margin-top: auto;
    margin-bottom: auto;
}

/* Blog post */
main {
    flex: 1;
}

/* Footer */
footer {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

footer a {
    color: inherit;
    text-decoration-color: inherit;
}

@media screen and (width < 50rem) {
    .container {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 0.7rem;
        min-width: calc(100svw - 1rem);
    }
}

/* @media screen and (width > 50rem) {
    .container {
    }
} */