@import "./reset.css";

body {
    font-size: 150%;
    font-family: monospace;
    max-width: 80ch;
    margin: auto;
    padding: 1ch;
}

a {
    --link-color: #0000FF;

    @media (prefers-color-scheme: dark) {
        --link-color: ligtblue;
    }


    color: var(--link-color);

    &:link {
        color: var(--link-color);
    }


    &:visited {
        color: var(--link-color);
    }

    &:hover {
        text-decoration: underline;
    }

}

h1,
h2 {
    padding: 1ch 0;
}

h3 {
    font-size: min(4vw, 1.2em);
}

h4 {
    font-size: min(3vw, 1em);
}

h2 {
    font-size: min(5vw, 1.5em);
}

h1 {
    font-size: min(6vw, 2em);
}

p,
nav {
    font-size: min(3vw, 1em)
}

nav,
main>section {
    padding: 0 1ch;
}

nav>a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.table {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    overflow: hidden;
    justify-content: center;

    &>section {
        flex: 0 1 calc(33% - 1ch);
        display: flex;
        flex-direction: column;
    }
}

footer {
    text-align: center;
    font-size: min(3.9vw, 1em);
    margin-top: 5ch;
}