:root {
    --bg-light: #FFFFFF;
    --fg-light: #000000;
    --text-fs: 1rem;
    --math-fs: 1.3rem;
}

html {
    background-color: var(--bg-light);
    font-family: "Fira Sans", sans-serif;
    font-size: var(--text-fs);
    overflow: hidden;
}

body {
    display: grid;
    justify-content: center;
    grid-template-areas:
        " . head    head    . "
        " . content content . "
        " . foot    foot    . ";
    grid-template-columns: 25% repeat(2, min(400px, 25%)) 25%;
}

header {
    grid-area: head;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 1.7em;
}

header hgroup h1 {
    margin-bottom: 0;
}

header hgroup p {
    margin: 0;
}

header img {
    object-fit: cover;
    border-radius: 50%;
    width: 200px;
}

footer {
    margin-top: 50px;
    grid-area: foot;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

footer img {
    padding: 5px;
    aspect-ratio: auto;
    height: 35px;
}

#content {
    grid-area: content;
}

#content math[display="block"] {
    font-size: var(--math-fs);
}