html {
    color-scheme: dark;
    background: #101210;
    color: #e2e8e2;
}

body {
    box-sizing: border-box;
    width: 96%;
    max-width: 600px;
    margin: 2% auto;
    padding: 2rem 1rem 0;
    font: 13px/1.6 "IBM Plex Mono", monospace;
    overflow-wrap: anywhere;
}

.card {
    padding: 12px;
}

.card + .card {
    margin-top: 8px;
}

main h1 {
    margin-top: 0;
}

nav.card {
    font-size: 110%;
}

nav summary {
    color: #9dff9d;
    cursor: pointer;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

a,
main :is(h1, h2, h3, h4, h5, h6) {
    color: #9dff9d;
}

img {
    max-width: 100%;
    height: auto;
}

main pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    overflow-wrap: normal;
}

main pre * {
    white-space: inherit;
    overflow-wrap: inherit;
}

header.card > a { font-size: 161.051%; }
main h1 { font-size: 115%; }
main h2 { font-size: 110%; }
main h3 { font-size: 105%; }
main h4 { font-size: 95%; }
main h5 { font-size: 90%; }
main h6 { font-size: 85%; }

footer small {
    font-size: inherit;
}

a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 0 1px;
    transition: background-size 180ms ease;
}

a:hover:not(header.card > a),
a:focus-visible,
nav .current > a {
    background-position: left bottom;
    background-size: 100% 1px;
}

main :is(h1, h2, h3, h4, h5, h6) {
    font-weight: normal;
}

@media (prefers-reduced-motion: reduce) {
    a {
        transition: none;
    }
}

main.card {
    display: flow-root;
}

.d3x0-contact p {
    margin: 0 0 12px;
}

.d3x0-contact label {
    display: block;
}

.d3x0-contact input:not([type="hidden"]),
textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    border: 1px solid #414941;
    border-radius: 0;
    background: #171b17;
    color: inherit;
    font: inherit;
}

textarea {
    resize: none;
}

.d3x0-contact button {
    margin-top: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: #9dff9d;
    color: #101210;
    font: inherit;
    cursor: pointer;
}

.d3x0-contact button:hover {
    background: #c4ffc4;
}

.d3x0-contact :is(input, textarea, button):focus-visible {
    outline: 2px solid #9dff9d;
    outline-offset: 2px;
}

.d3x0-contact [role="alert"] {
    padding: 8px 10px;
    border-left: 2px solid #ffaaaa;
    color: #ffaaaa;
}

main p:nth-of-type(even) {
    color: whitesmoke;
}

footer.card {
    color: #343634;
}


nav .mobile-menu {
    display: none;
}

@media (max-width: 480px) {
    nav .desktop-menu {
        display: none;
    }

    nav .mobile-menu {
        display: block;
    }

    nav .mobile-menu ul {
        flex-direction: column;
        margin-top: 8px;
    }
}

@media print {
    html {
        background: #fff;
        color: #000;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    nav.card {
        display: none;
    }

    main.card {
        background: #fff;
    }

    body :is(header.card, main.card, footer.card, a, main h1, main h2, main h3, main h4, main h5, main h6) {
        color: #000;
    }

    body main p {
        color: #000;
    }

    body main p:nth-of-type(even) {
        color: #262626;
    }

    body a {
        background-image: none;
    }
}