h1 {
    font-family: "Courier Prime", monospace;
    font-size: 30pt;
    text-align: center;
    border-bottom: 1px solid black;
    padding: 5pt 5pt 5pt 5pt;
    white-space: pre;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12pt;
    background-color: aliceblue;
    color: black;
}

.page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid black;
    width: 50%;
    max-width: 900px;
    height: fit-content;
    margin-top: 2dvh;
    margin-bottom: 2dvh;
    margin-left: 2dvw;
    margin-right: 2dvw;
    background-color: whitesmoke;
}

.menu-content {
    display: flex;
    flex-direction: row;
}

.menu {
    display: flex;
    flex-direction: column;
    border-right: 1px solid black;
    width: min-content;
}

.menu > a {
    border-bottom: 1px solid black;
    padding: 2pt 5pt 2pt 5pt;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
    color: black;
    white-space: nowrap;
}

.logo a {
    width: 100%;
    height: 100%;
}

.menu > a:hover {
    background-color: antiquewhite;
}

.content {
    width: 100%;
    display: flex;
    padding: 5pt 5pt 5pt 5pt;
    flex-direction: column;
}

.footer {
    border-top: 1px solid black;
    padding: 5pt 5pt 5pt 5pt;
    text-align: center;
}

h2 {
    font-size: 22pt;
    font-family: "Courier Prime", monospace;
}

h3 {
    font-size: 18pt;
    font-family: "Courier Prime", monospace;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

.content article {
    width: inherit;
    margin: 5pt;
}

.logo {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

.counter {
    position: fixed;
    bottom: 10pt;
    left: 10pt;
    background-color: whitesmoke;
    z-index: 9999;
}

@media (min-width: 700px) and (max-width: 1200px) {
    .page-container {
        width: 70%;
    }
    h1 {
        font-size: 27pt;
    }
    h2 {
        font-size: 22pt;
    }
    h3 {
        font-size: 17pt;
    }
    .counter {
        font-size: 12pt;
    }
}

@media (max-width: 700px) {
    .page-container {
        width: 100%;
    }
    h1 {
        font-size: 20pt;
    }
    h2 {
        font-size: 15pt;
    }
    h3 {
        font-size: 10pt;
    }
    body {
        font-size: 8pt;
    }
}

@media (max-width: 500px) {
    .row {
        flex-direction: column;
    }
}

@media (max-width: 350px) {
    h1 {
        font-size: 16pt;
    }
    h2 {
        font-size: 12pt;
    }
    h3 {
        font-size: 10pt;
    }
}