:root.light-mode {
    --fancy: #661FAD;
}

:root.dark-mode {
    --fancy: #E9D1FF;
}

@media(prefers-color-scheme:dark) {
    :root {
        --fancy: #E9D1FF;
    }
}

em {
    color: var(--accent);
    font-family: "Roboto Serif", serif !important;
    font-size: 13pt;
}

:not(pre) > code {
    white-space: pre-wrap;
    color: var(--fancy);
    background: none;
    font-size: 15pt;
    line-height: 1.5em;
    font-family: "Patrick Hand", cursive !important;
    padding: 0;
}

:not(pre) > code .word {
    white-space: nowrap;
}

:not(pre) > code span.char {
    font-family: "Patrick Hand", cursive !important;
}

body:has(#no-animations:not(:checked)) :not(pre) > code .char {
    display: inline-block;
    animation: text-wave 3s ease-in-out infinite;
}

@keyframes text-wave {
    0%, 100% { transform: translateY(1.25px); }
    50% { transform: translateY(-1.25px); }
}

div.warning {
    display: block;
    border: 1px solid var(--secondary);
    padding: 1em;
    font-size: 90%;
    overflow:auto;
    width: fit-content;
    margin: 0 auto;
}

div.warning > hr {
    margin: 0.75em auto;
}

div.warning > p {
    margin-top: 0;
}