:root {
    --body-background: #4c566a;
    --body-color: #d8dee9;
    --object-background: #2e3440;
    --link-color: #a3be8c;
}
@font-face {
    font-family: 'OpenSans';
    src: url("/opensans/OpenSans-Regular.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'SpaceMono';
    src: url("/spacemono/SpaceMono-Regular.ttf");
    font-display: swap;
}
@media (max-width: 1000px) {
    body {
        width: 95%; 
        font-size: 2vw;
    }
}
.object {
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    background-color: var(--object-background);
}
body {
    font-family: 'OpenSans', sans-serif;
    background-color: var(--body-background);
    color: var(--body-color);
    margin: 16px auto;
    display: table;
    width: 80ch;
}
a {
    text-decoration: none;
    color: var(--link-color);
    font-family: 'SpaceMono', monospace;
}
a:hover {
    text-decoration: underline;
}
nav {
    margin: 2em 0;
}
nav a {
    padding: 1em;
}
main {
    margin: 0;
    padding: 0.1em 2em;
}
main section {
    margin: 1em 0;
}
main p {
    margin: 1em 0;
    white-space: pre-wrap;
}
main h3 {
    margin: 1em 0 0 0;
}
main h2 {
    margin-bottom: 0;
    margin-top: 1em;
}
main li {
    padding: 0;
    margin: 0 1em;
    white-space: pre-wrap;
}
main ul {
    padding: 0;
    margin: 0;
    list-style-position: inside;
}
header {
    font-size: 4em;
    font-weight: bold;
    font-family: 'SpaceMono', monospace;
}
footer {
    margin: 1em 0;
    padding: 1em;
}