@font-face {
    font-family: "Maple Mono";
    src: url("fonts/maplemono/MapleMono.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Maple Mono";
    src: url("fonts/maplemono/MapleMono-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

:root {
    color-scheme: light dark;
    --bg: light-dark(#e6e9ef, #292c3c);
    --text: light-dark(#4c4f69, #c6d0f5);
    --subtext: light-dark(#6c6f85, #b5bfe2);
    --overlay: light-dark(#8c8fa1, #949cbb);
    --accent: light-dark(#d20f39, #e78284);
    --accent2: light-dark(#dd7878, #eebebe);
}

html,
body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Maple Mono", monospace;
    font-size: 14px;
    margin: 5px;
    margin-top: 13px;
}

header {
    display: flex;
    align-items: center;
    width: 100%;
}

header img {
    max-height: 125px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.ascii {
    font-variant-ligatures: none;
    margin: 0;
}

.ascii-desktop {
    font-size: 13px;
    background: linear-gradient(
        to right,
        var(--accent) 40%,
        var(--accent2) 47%,
        var(--accent2) 53%,
        var(--accent) 60%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ascii-scan 4s linear infinite;
}

.ascii-mobile {
    font-size: 10px;
    max-width: 95%;
    display: none;
}

@keyframes ascii-scan {
    0% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0% 0;
    }
    50.01% {
        background-position: 100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@media (max-width: 600px) {
    .ascii-desktop {
        display: none;
    }

    .ascii-mobile {
        display: block;
    }

    header img {
        max-width: 20%;
    }
}

hr {
    border: none;
    border-top: 4px double var(--overlay);
    overflow: visible;
}

.links {
    margin-top: 1.2rem;
}

.link-row {
    display: flex;
    gap: 0;
    line-height: 1.8;
}

.link-label {
    color: var(--subtext);
    font-style: italic;
    min-width: 11ch;
    text-align: right;
    padding-right: 1ch;
    flex-shrink: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

a:hover {
    text-decoration: underline;
}