@font-face {
    font-family: "pacifico";
    src: url("/fonts/Pacifico.ttf");
}
@font-face {
    font-family: "rubik-glitch-pop";
    src: url("/fonts/RubikGlitchPop-Regular.ttf");
}
@font-face {
    font-family: "unkempt";
    src: url("/fonts/Unkempt-Bold.ttf");
}
@font-face {
    font-family: "snowburst-one";
    src: url("/fonts/SnowburstOne-Regular.ttf");
}

:root {
    --void-color: #202628;
    --jaime-color: #99b1b5;
    --sophie-color: #bd4d4f;
    --kate-color: #ffffff;
    --singer-null-color: #998ed7;
    --singer-alpha-color: #9832b6;
    --singer-color: #b485c9;
    --singer-null-alpha-color: #975181;
    --alice-color: #9fc4ff;
    --alice-iii-color: #79ccff;
    --alice-ii-color: #5ed2ec;
    --alice-i-color: #90d198;
    --oliver-color: #59b17b;
    --oliver-happy-color: #9ba555;
    --daisy-color: #e1b046;
    --may-color: #f0a94d;
    --penelope-color: #d58d5c;
    --anabelle-color: #d57d5c;
    --lucy-color: #f4560c;
    --lucy-alpha-color: #dd2e70;
    --abby-color: #313a3d;
    --mom-color: #f4abcd;
    --mom-angry-color: #f4abcd;
    --dad-color: #313a3d;
    --dad-fake-color: #313a3d;
    background:
        url("/images/background.png") center / 20rem 20rem repeat fixed,
        black;
    color: var(--jaime-color);
    font-family: unkempt;
    font-size: 15px;
    padding: 0 1rem;
    body {
        margin: 0 auto;
        padding: 0 1rem;
        background-color: color-mix(
            in hsl,
            var(--void-color) 85%,
            transparent 15%
        );
        border-radius: 3rem;
        max-width: 70rem;
    }
    header {
        border-bottom: 0.3rem dashed var(--abby-color);
    }
    nav {
        font-family: monospace;
        font-size: 0.8rem;
        & > ul {
            padding: 0;
            margin: 0;
            & > li {
                display: inline-block;
                list-style: none;
                padding: 0 0.25em;
                &:not(:last-child) {
                    border-right: 0.2rem dotted var(--abby-color);
                }
                &:not(:first-child) {
                    border-left: 0.2rem dotted var(--abby-color);
                }
            }
        }
    }
    footer {
        clear: both;
        border-top: 0.1rem dashed var(--abby-color);
        border-bottom: 0.1rem solid transparent;
        font-family: monospace;
        font-size: 0.65rem;
        text-align: center;
    }
    figure {
        max-width: 12rem;
        display: inline-block;
        border: 0.3rem double var(--abby-color);
        border-radius: 1rem;
        margin: 0;
        img {
            max-width: 100%;
            border-radius: 1rem;
        }
        a:hover {
            mix-blend-mode: screen;
        }
        figcaption {
            text-align: center;
            border-top: 0.1rem solid var(--abby-color);
            font-family: monospace;
            font-size: 0.65rem;
            font-style: italic;
        }
    }
}
@media (orientation: landscape) {
    aside {
        float: left;
        width: 18rem;
        padding-right: 1rem;
        margin-right: 1rem;
        min-height: 100%;
        border-right: 0.2rem solid var(--abby-color);
    }
    h2 {
        &:has(+ aside) {
            margin-left: 20rem;
        }
        & + aside {
            position: relative;
            top: -1.5rem;
        }
    }
}

strong, dt, a:not(h1 a), em em, h2, h3, h4, h5, h6 {
    font-weight: 1000;
    text-shadow: 0.03em 0 currentcolor, -0.03em 0 currentcolor;
}
em em {
    font-style: italic;
    em {
        text-decoration: underline;
        em {
            text-decoration: double underline;
        }
    }
}
h2, h3, h4, h5, h6 {
    margin: 0;
}
h1 {
    font-family: rubik-glitch-pop;
    font-size: 3rem;
    color: var(--singer-null-color);
    text-shadow:
        0.03em 0.03em var(--alice-color),
        0.06em 0.06em var(--daisy-color),
        0.09em 0.09em var(--lucy-alpha-color),
        0.21em 0.21em var(--abby-color);
    width: fit-content;
    transform: scale(1, 0.85) rotate(-2deg);
    a {
        color: currentcolor;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    img {
        max-height: 2em;
        position: relative;
        top: 0.5em;
        border-radius: 1em;
        overflow: clip;
    }
    margin: 0;
    margin-top: -0.5em;
}
h2 {
    font-family: snowburst-one;
    font-size: 1.5rem;
    margin-top: 0.25em;
}
h3 {
    font-size: 1.3rem;
}
h4 {
    font-size: 1.2rem;
}
h5 {
    font-size: 1.1rem;
}
h6 {
    font-size: 1rem;
}
p {
    margin: 0.5em 0;
}

a:not(h1 a) {
    color: var(--alice-color);
    &:visited {
        color: var(--singer-null-color);
    }
    &:active {
        color: var(--lucy-color);
    }
    &:hover {
        text-decoration: none;
    }
}

dl {
    font-family: monospace;
    font-size: 0.8rem;
    dt {
        display: inline;
        &::after {
            content: ":";
        }
    }
    dd {
        margin: 0;
        display: inline;
        &:not(:last-child)::after {
            content: "\a";
            white-space: pre-wrap;
        }
    }
}

.stamps {
    padding: 0;
    margin: 0;
    li {
        display: inline-block;
        list-style: none;
        width: 4.5em;
        img {
            max-width: 100%;
        }
        a:hover {
            mix-blend-mode: screen;
        }
    }
}