* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    --body-padding: clamp(12px, 1.3vw, 40px);
    padding: var(--body-padding);

    font-family: monospace;
    font-size: 16px;
    line-height: 1.5;

    color: #000;
}

p {
    margin: 0 0 16px 0;
}

.text {
    position: relative;
    z-index: 1;

    max-width: 50em;
}

a,
a:visited {
    color: inherit;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

.logo {
    position: fixed;

    right: 10px;
    bottom: 0;

    width: min(100vw, 100vh);
    aspect-ratio: 700/500;

    max-width: 700px;

    display: block;

    z-index: -1;

    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;

    background: #000;

    -webkit-mask: url("/assets/banner.png") center / contain no-repeat;
    mask: url("/assets/banner.png") center / contain no-repeat;
}

@media (max-width: 1000px) {
    .logo {
        position: static;

        right: auto;
        bottom: auto;

        margin: auto calc(-1 * var(--body-padding) + 10px) calc(-1 * var(--body-padding)) auto;

        width: 85vw;

        z-index: auto;
    }
}

.nowrap {
    white-space: nowrap;
}

.nav {
    white-space: nowrap;
}

pre {
    white-space: break-spaces;
    overflow-x: auto;
}

@media (max-width: 400px) {
    .nowrap,
    .nav {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}