*,
*::after,
*::before {
    box-sizing: border-box;
}
:root {
    color-scheme: light dark;

    --bg-dark: light-dark(
        oklch(from var(--bg) 81% c h),
        oklch(from var(--bg) 10% c h)
    );
    --bg: light-dark(oklch(90% 0.01 210), oklch(23% 0.01 210));
    --bg-light: light-dark(
        oklch(from var(--bg) 100% c h),
        oklch(from var(--bg) 32% c h)
    );

    --text: light-dark(#000, #fff);

    --border: light-dark(
        color-mix(in oklch, var(--text) 30%, var(--bg)),
        color-mix(in oklch, var(--text) 30%, var(--bg))
    );

    --primary-color: light-dark(#2451ad, #6a91dd);

    --header-height: 3em;

    /* to be deprecated, do not use */
    --main-color: light-dark(#78a5ff, #78a5ff);
    --main-light-color: light-dark(#e5edff, #e5edff);
    --main-dark-color: light-dark(#4778da, #4778da);

    --neutral-color: light-dark(#aaa, #aaa);
    --neutral-light-color: light-dark(#e9e6e6, #e9e6e6);
    --neutral-dark-color: light-dark(#6e6a6a, #6e6a6a);

    --commit-color: light-dark(#57d81d, #57d81d);
    --commit-dark-color: light-dark(#33880c, #33880c);
    --commit-light-color: light-dark(#b1ff8d, #b1ff8d);

    --cancel-color: light-dark(#ff7e7e, #ff7e7e);
    --cancel-dark-color: light-dark(#7d2020, #7d2020);
    --cancel-light-color: light-dark(#fbb9b9, #fbb9b9);
}
body {
    margin: 0;
    padding-bottom: 8em;
    font-family: Georgia, serif;
    line-height: 1.2em;
    background-color: var(--bg-dark);
    color: var(--text);
}
h2 {
    border-width: 0;
    margin-block: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.1rem;
    line-height: 1.3;

    span {
        display: inline-block;
    }
}
h3 {
    margin-block: 0.5rem;
    border-width: 0;
    text-transform: uppercase;
    font-size: 0.9em;
    line-height: 1.3em;
}
a {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

hr {
    margin: 3em 0 1em;
    border-width: 0;
    border-bottom: 1px dashed var(--border);
}

input,
textarea,
button {
    -webkit-appearance: none;
}

p {
    line-height: 1.5;
}
aside {
    padding: 1em;
    margin: 1em 2em;
    background-color: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 0.5em;
}
blockquote {
    padding: 2em 0;
    font-size: 1.5em;
    text-align: center;
}

pre {
    white-space: pre-wrap;
}

/* Code Blocks */
code {
    padding: 0.1em 0.5em;
    background-color: var(--bg-light);
    border-radius: 0.3em;
    tab-size: 3;
    font-size: inherit;

    &.output,
    &.block,
    &[block],
    &[output] {
        display: block;
        white-space: pre;
        width: 100%;
        overflow: auto;
        position: relative;
        padding: 1em;
        margin: 1em 0;
    }
    &.inline,
    &[inline] {
        display: inline;
        font-size: inherit;
        white-space: nowrap;

        @media (max-width: 500px) {
            white-space: initial;
            max-width: 100%;
        }
    }
    &.output {
        color: rgb(from var(--text) r g b / 50%);
    }
    &:is(.output, .block)::before {
        content: attr(data-title);
        position: absolute;
        top: 0.2em;
        right: 0.5rem;
        font-size: 0.7em;
    }
    &[data-title="html"] {
        background-color: #eff;
    }
    &[data-title="css"] {
        background-color: #efe;
    }
}