@font-face {
    font-family: "Bokor";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Bokor"), url("static/fonts/bokor.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("IBM Plex Mono"), url("static/fonts/ibm-plex-mono.woff2") format("woff2");
}

:root {
    --primary-color: white;
    --background-color: black;
}

body,
.separator,
.click,
.footer.buttons img {
    color: var(--primary-color);
}

body {
    background-color: var(--background-color);
    font-family: 'IBM Plex Mono', monospace;
}

::selection {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.box,
.footer {
    display: flex;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.main-title {
    font-family: 'Bokor', sans-serif;
    font-size: 5em;
    line-height: 1em;
    margin: 0.2em 0 0 0;
    user-select: none;
    font-weight: normal;
}

@supports (-moz-appearance: none) {
    .main-title {
        font-weight: bold;
    }
}

.separator {
    margin: 0.5em auto 0em;
    width: 50px;
}

.content {
    line-height: 1.3em;
}

.click {
    text-decoration: underline dotted;
}

.click:hover {
    text-decoration: underline solid;
}

.footer-container {
    margin: 24px auto auto auto;
}

@media (min-height: 800px) {
    .footer-container {
        position: absolute;
        inset: auto 0 12px;
    }
}

.footer.buttons {
    line-height: 0;
}

.footer.buttons a,
.footer.buttons img {
    cursor: pointer;
    image-rendering: pixelated;
}

.footer.quote {
    text-align: center;
    margin: -8px auto auto auto;
}

.footer.links {
    margin: -12px auto auto auto;
    gap: 6px;
}