:root,
::backdrop {
    /* set sans-serif & mono fonts */
    --sans-font:
        -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
        "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
        "Helvetica Neue", sans-serif;
    --serif-font:
        Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",
        "Georgia Pro", Georgia, serif;
    --mono-font:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
        "DejaVu Sans Mono", monospace;
    --standard-border-radius: 5px;

    /* default colors */
    color-scheme: dark;
    --bg: var(--purple-night);
    --noise-strength: 0.15;
    --bg-light: var(--ultra-violet);
    --text: var(--lavendar-breeze);
    --text-light: var(--pink-puree);
    --text-dark: oklch(80.28% 0.0111 204.11);
    --accent: var(--rose-quartz);
    --accent-dark: var(--dark-crushed-grape);
    --accent-text: var(--purple-gray);
    --link: var(--light-crushed-grape);
    --link-visited: var(--red-crushed-grape);
    --border: var(--pink-puree);
    --selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);
}

::selection,
::-moz-selection {
    color: var(--bg);
    background: var(--selection);
}

/* chromium scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    overflow: visible;
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--bg-light);
}

/* firefox scrollbars */
* {
    scrollbar-color: var(--accent) var(--bg-light);
    scrollbar-width: auto;
}

html {
    color-scheme: light dark;
    font-family: var(--mono-font);
    scroll-behavior: smooth;
}

body {
    min-height: 100svh;
    color: var(--text);
    background: var(--bg);
    position: relative;
    font-size: 1rem;
    display: grid;
    grid-template-columns: 1fr min(45rem, 90%) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 0.625rem;
}
body > * {
    grid-column: 2;
}

body > footer {
    color: var(--text-light);
    font-size: 0.875;
}

/* Format headers */
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1rem;
}
h6 {
    font-size: 0.75rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5em 0 0.5em 0;
    padding: 0.22em 0.4em 0.22em 0.4em;
    background-color: var(--accent);
    border-bottom: 5px solid var(--bg-light);
    border-radius: 0.2em 0.2em 0.27em 0.27em;
    color: var(--accent-text);
    width: fit-content;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
    line-height: 1.1;
}

@media only screen and (max-width: 720px) {
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.25rem;
    }
    h3 {
        font-size: 1rem;
    }
    h4 {
        font-size: 0.75rem;
    }
    h5 {
        font-size: 0.5rem;
    }
    h6 {
        font-size: 0.25rem;
    }
}

p {
    margin: 1rem 0;
}

/* format links */
a {
    font-weight: bold;
    border-radius: 0.125rem;
    color: var(--link);
    text-decoration: underline double;
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--accent-dark);
}

/* format lists */
ul {
    list-style: none;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

ol {
    list-style-type: decimal;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

li {
    margin-bottom: 0.125rem;
}

ul li::marker {
    content: "* ";
    color: var(--accent);
    font-size: 1.1rem;
}

ol li::marker {
    color: var(--accent);
}

ol li:hover::marker {
    font-weight: 700;
    color: var(--link);
}

/* Use flexbox to allow items to wrap, as needed */
header > nav ul,
header > nav ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: right;
    list-style-type: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    gap: 1rem;
}

/* List items are inline elements, make them behave more like blocks */
header > nav ul li,
header > nav ol li {
    display: inline-block;
}

/* Consolidate box styling */
aside,
details,
progress {
    background-color: var(--bg-light);
    border-radius: var(--standard-border-radius);
}

aside {
    font-size: 1rem;
    width: 35%;
    padding: 0 10px;
    margin-inline-start: 10px;
    float: right;
}
*[dir="rtl"] aside {
    float: left;
}

/* make aside full-width on mobile */
@media only screen and (max-width: 720px) {
    aside {
        width: 100%;
        float: none;
        margin-inline-start: 0;
    }
}

details {
    padding: 0.5rem;
}

summary {
    cursor: pointer;
    font-weight: bold;
    word-break: break-all;
}

details[open] > summary + * {
    margin-top: 0;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

details[open] > :last-child {
    margin-bottom: 0;
}

/* Format tables */
table {
    border-collapse: collapse;
    margin: 1.5rem 0;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

td,
th {
    border: 1px solid var(--border);
    text-align: start;
    padding: 0.5rem;
}

th {
    background-color: var(--bg-light);
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: var(--bg-light);
}

table caption {
    text-align: left;
    font-weight: bold;
    margin: 0 0 0.4rem 1rem;
}

/* format forms */
fieldset {
    border: 1px dashed var(--accent);
    border-radius: var(--standard-border-radius);
}

fieldset > legend {
    color: var(--accent);
}

textarea,
select,
input,
button,
.button {
    font-size: inherit;
    font-family: inherit;
    padding: 0.25rem;
    border-radius: var(--standard-border-radius);
    box-shadow: none;
    max-width: 100%;
    display: inline-block;
}

textarea,
select,
input {
    color: var(--text);
    background-color: var(--bg);
    border: 1px dashed var(--border);
}

label {
    display: block;
}

fieldset label {
    margin: 0 0 0.3rem 0;
}

textarea {
    max-width: 43.5rem;
    resize: both;
}

textarea:not([cols]) {
    width: 100%;
}

@media only screen and (max-width: 720px) {
    textarea,
    select,
    input {
        width: 100%;
    }
}

/* format buttons */
button,
.button,
a.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
label[type="button"] {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: var(--accent-text);
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    line-height: normal;
}

.button[aria-disabled="true"],
input:disabled,
textarea:disabled,
select:disabled,
button[disabled] {
    cursor: not-allowed;
    background-color: var(--bg-light);
    border-color: var(--bg-light);
    color: var(--text-light);
}

input[type="range"] {
    padding: 0;
    color: var(--accent);
}

abbr[title] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

button:enabled:hover,
.button:not([aria-disabled="true"]):hover,
input[type="submit"]:enabled:hover,
input[type="reset"]:enabled:hover,
input[type="button"]:enabled:hover,
label[type="button"]:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    cursor: pointer;
}

.button:focus-visible,
button:focus-visible:where(:enabled),
input:enabled:focus-visible:where(
        [type="submit"],
        [type="reset"],
        [type="button"]
    ) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
    vertical-align: middle;
    position: relative;
    width: 14px;
    height: 14px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline-block;
}

input[type="radio"] {
    border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--accent);
}

@media only screen and (max-width: 720px) {
    textarea,
    select,
    input {
        width: 100%;
    }
}

input[type="color"] {
    height: 2.5rem;
    padding: 0.2rem;
}

input[type="file"] {
    border: 0;
}

/* misc body elements */
hr {
    border: 1px dashed var(--accent);
    margin: 0.5rem 0 0.5rem 0;
}

mark {
    padding: 0 0.25em 0 0.25em;
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
    color: var(--bg);
}

mark a {
    color: var(--link);
}

img,
video,
iframe[src^="https://www.youtube-nocookie.com"],
iframe[src^="https://www.youtube.com"]
{
    max-width: 90%;
    margin: 1rem;
    height: auto;
    border: dashed 2px var(--accent);
    border-radius: 15px;
    opacity: 0.95;
}

figure {
    margin: 0;
    display: block;
    overflow-x: auto;
}

figcaption {
    text-align: left;
    font-size: 0.875rem;
    color: var(--text-light);
    margin: 0 0 1rem 1rem;
}

blockquote {
    margin: 0 0 0 1.25rem;
    padding: 0.5rem 0 0 0.5rem;
    border-inline-start: 0.375rem solid var(--accent);
    color: var(--text-light);
    font-style: italic;
}

p:has(cite) {
    text-align: right;
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 600;
}

cite::before {
    content: "— ";
}

dt {
    color: var(--text-light);
}

code,
pre,
pre span,
kbd,
samp {
    font-family: var(--mono-font);
}

pre {
    border: 1px solid var(--accent);
    max-height: 30rem;
    padding: 0.625rem;
    overflow-x: auto;
    font-style: monospace;
}

p code,
li code,
div code {
    padding: 0 0.125rem 0 0.125rem;
    border-radius: 3px;
    color: var(--bg);
    background-color: var(--text);
}

pre code {
    padding: 0;
    border-radius: 0;
    color: inherit;
    background-color: inherit;
}

iframe {
    max-width: 90%;
}

/* progress bars */
progress {
    width: 100%;
}

progress:indeterminate {
    background-color: var(--bg-light);
}

progress::-webkit-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color: var(--bg-light);
}

progress::-webkit-progress-value {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
}

progress::-moz-progress-bar {
    border-radius: var(--standard-border-radius);
    background-color: var(--accent);
    transition-property: width;
    transition-duration: 0.3s;
}

progress:indeterminate::-moz-progress-bar {
    background-color: var(--bg-light);
}

dialog {
    max-width: 40rem;
    margin: auto;
}

dialog::backdrop {
    background-color: var(--bg);
    opacity: 0.8;
}

@media only screen and (max-width: 720px) {
    dialog {
        max-width: 100%;
        margin: auto 1em;
    }
}

/* superscript & subscript */
/* prevent scripts from affecting line-height. */
sup,
sub {
    vertical-align: baseline;
    position: relative;
}

sup {
    top: -0.4em;
}

sub {
    top: 0.3em;
}