:root {
    --white: rgba(255, 255, 255, .5);
    --gray: rgba(128, 128, 128, .5);
    --black: rgba(0, 0, 0, .5);
    --concave: inset var(--gray) .25em .25em .25em, inset var(--white) -.25em -.25em .25em;
    --convex: inset var(--white) .25em .25em .25em, inset var(--gray) -.25em -.25em .25em;
    --background: var(--gray);
    --font: black;
    font-size: 16px;
    text-size-adjust: 100%;
}
* {
    margin: 0;
    padding: 0;
    transition: 333ms;
}
body {
    background-color: var(--background);
    display: grid;
    grid-template-rows: 1fr;
    min-height: 100vh;
    & a {
        text-decoration: none;
        &:hover {
            text-decoration: underline wavy;
        }
    }
}
#header {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 4em;
    & h1 {
        -webkit-background-clip: text;
        color: transparent;
        filter: drop-shadow(black 1px 1px);
        font-size: xxx-large;
        padding-inline-start: 4em;
        white-space: break-spaces;
        text-indent: -2em;
    }
    & img {
        width: 100vw;
    }
    & ul {
        display: none;
    }
}
#content-box>* {
    line-height: 2em;
    box-shadow: var(--concave);
    margin: 1em;
    padding: 2em;
    :is(&, & a) {
        color: var(--font);
    }
}
#comment {
    padding-inline: 4em;
    :is(&, & ol, & .post-area) {
        display: grid;
        gap: 1em;
    }
    & img {
        object-fit: none;
    }
    & input {
        font-size: 1em;
        min-width: 0;
    }
    & ol {
        list-style: disclosure-open;
        & strong {
            display: block;
        }
    }
    & textarea {
        grid-column: span 3;
        height: 25vh;
    }
    & .comment-page {
        text-align: end;
    }
    & .post-area {
        align-items: stretch;
        grid-template-columns: repeat(2, max-content 1fr);
        & br {
            display: none;
        }
    }
}
#navbar {
    backdrop-filter: blur(4px);
    box-shadow: inset var(--gray) 0 -.5em .5em, var(--black) 0 .5em .5em;
    gap: .5em;
    height: 4em;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    &::before {
        content: "Menu";
    }
    & a {
        border-radius: 1em;
        box-shadow: var(--convex), var(--black) .25em .25em .5em;
        color: white;
        display: inline-block;
        overflow: clip;
        padding: .25em 1em;
        position: relative;
        text-shadow: black 1px 1px 1px;
        &:active,
        .current>&,
        :has(&+ul):hover>& {
            box-shadow: var(--concave) !important;
        }
        &::after {
            background-color: var(--white);
            bottom: 0;
            clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
            content: "";
            height: 200%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(-100%, -100%);
            width: 200%;
        }
        &:hover {
            text-decoration: none;
            &::after {
                animation: flash 4s infinite;
            }
        }
    }
    & li {
        list-style: none;
        &:not(:has(a)) {
            display: none;
        }
        &:hover ul {
            transform: none;
        }
    }
}
#footer {
    background-color: black;
    padding: 1em;
    text-align: center;
    :is(&, & a) {
        color: white;
    }
}
@keyframes flash {
    from {
        transform: translate(-100%, -100%);
    }
    to {
        transform: translate(100%, 100%);
    }
}