:root {
    --BG-Body: #1F1A22;
    --BG-Body-Dark: #190B22; /* HTML BG and cards (details, asides, etc.) */
    --BG-Accent: #271334;
    --Text: #F7EEFD;
    --Text-Accent: #AA7BE6;
    --Text-Accent-Hover: #D9BCED; /* Hover, focus, and publishing date */

    --BG-Accent-Complement: #0A7049;
    --BG-Accent-Focus: #00424F;
    --Text-Accent-Complement: #96F8D2;
    --Text-Accent-Focus: #FFE350;
    color-scheme: dark light;
}
html {
    background-color: var(--BG-Body-Dark);
    background-image: url(CheckerCompressed.png);
    image-rendering: pixelated; /* So checker image doesn't blur */
    background-size: max(10rem, 25vh);
    background-blend-mode: overlay;
    background-repeat: round repeat; /* So squares aren't cut off on the right side of the window */
    background-attachment: fixed;
    overflow-wrap: break-word;
    /* text-wrap: balance; TBD Must've put this here for very small viewports, but it makes larger/wider paragraphs look odd. Revisit when more wrapping algorithms are supported */
    hyphens: auto;
/*     hyphenate-limit-chars: auto 3; NOTICE: Not baseline, also does this even do anything? What bothers me are the words that break without hyphenating, sometimes leaving 1 or 2 letters in the new line*/
}
/* BODY */
body {
    position: relative; /* So the mobile menu list can align with the "checkbox" */
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 0;
    padding-bottom: 1rem;
/*     min-width: min-content;  */
    /* ^ Obsoleted by overflow-wrap -- TEST for regressions */
    box-sizing: border-box;
    border: solid max(3px, .15rem);
    border-top: none;
    border-bottom: dashed max(3px, .15rem);
    border-color: var(--Text-Accent);
    border-color: color-mix(in srgb, var(--Text-Accent) 40%, transparent);
    background-color: var(--BG-Body);
    image-rendering: auto;
    color: var(--Text);
    font-family: system-ui;
    line-height: 1.6;
    list-style-position: inside;
    ul {
        padding-inline: 0;
    }
}
/* BEGIN NAV */
nav * {
    border-color: inherit;
    font-size: 1.17rem;
    font-family:  serif; /* REPLACE FONT UI-SERIF??? MAYBE? */
    text-align: center;
}
#mobile-nav {
    appearance: none;
    margin: .4rem 0 0 min(2rem, 4.5vw);
    width: fit-content;
    border: solid max(3px, .15rem) var(--Text-Accent);
    border-radius: 1rem; /* TODO: 1rem shows up everywhere, could make that a variable to make playing w/ design easier */
    background-color: var(--BG-Accent);
}
#mobile-nav::before {
    display: block;
    content: 'Menu';
    padding: .2rem .75rem;
}
#mobile-nav:checked::before {
    padding-bottom: calc(.2rem + max(3px, .15rem)); /* Adding the bottom border that disappears */
}
#mobile-nav:hover {
    background-color: var(--Text-Accent-Hover);
    color: var(--BG-Accent);
    cursor: pointer;
}
#mobile-nav:focus-visible {
    position: relative;
    z-index: 1;
    border-color: var(--BG-Accent-Complement);
    box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus);
    outline: max(3px, .15rem) solid var(--Text-Accent-Focus);
    outline-offset: max(3px, .15rem);
    background-color: var(--Text-Accent-Complement);
    color: var(--BG-Accent-Complement);
}
#mobile-nav:active {
    background-color: var(--BG-Accent-Complement);
    color: var(--Text-Accent-Complement);
}
#mobile-nav:checked {
    border-bottom: none;
    border-radius: 1rem 1rem 0 0;
}
#mobile-nav:checked:focus-visible {
    box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus), inset 0 min(-3px, -.15rem) 0 0 var(--BG-Accent-Complement);
}
#mobile-nav:checked ~ menu {
    display: block;
}
nav menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 min(2rem, 4.5vw);
    padding: 0;
    width: calc(100% - min(4rem, 9vw));
}
menu li{
    display: inline;
}
menu a {
    display: block;
    word-break: break-all;
    padding: .25rem 0;
    border: max(3px, .15rem) dashed;
    border-top: max(2px, .1rem) solid;
    border-bottom: none;
    border-color: var(--Text-Accent);
    background-color: var(--BG-Accent);
    text-wrap: balance;
    text-decoration: none;
}
#mobile-nav, menu a{
    color: var(--Text-Accent);
}
menu li:first-child a {
    border-top: max(3px, .15rem) dashed var(--Text-Accent);
    border-top-right-radius: 1rem;
}
menu li:last-child a {
    border-bottom: max(3px, .15rem) dashed var(--Text-Accent);
    border-radius: 0 0 1rem 1rem;
}
menu a:hover {
    background-color: var(--Text-Accent-Hover);
    color: var(--BG-Accent);
}
menu a[aria-current="page"] {
    background-color: var(--Text-Accent);
    color: var(--BG-Accent);
    font-weight: bolder;
}
menu a:focus-visible {
    position: relative;
    border-color: var(--BG-Accent-Complement);
    box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus), inset 0 min(-2px, -.1rem) 0 0 var(--BG-Accent-Complement);
    outline: max(3px, .15rem) solid var(--Text-Accent-Focus);
    outline-offset: max(3px, .15rem);
    background-color: var(--Text-Accent-Complement);
    color: var(--BG-Accent-Complement);
}
menu li:first-child a:focus-visible {
    border-color: var(--BG-Accent-Complement);
}
menu li:last-child a:focus-visible {
    border-color: var(--BG-Accent-Complement);
    box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus);
}
menu a:active {
    background-color: var(--BG-Accent-Complement);
    color: var(--Text-Accent-Complement);
}
/* END NAV */
/* BEGIN POST-NAV */
main, footer, body > aside {
    margin-inline: auto;
    padding-inline: min(.75rem, 2vw);
    max-width: 85ch;
/*     min-width: min-content; */
    /* ^ Obsoleted by overflow-wrap -- TEST for regressions */
}
main aside:first-child {
    margin-top: 1rem;
    padding-inline: .5rem;
    width: fit-content;
    border-radius: 1rem;
    background-color: color-mix(in srgb, var(--BG-Body-Dark) 60%, transparent);
    color: var(--Text-Accent-Hover);
}
a {
    color: var(--Text-Accent);
}
img {
    max-width: 100%; /* TEST for escaping parent */
    margin: .4rem;
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: ui-serif, serif;
}
ul {
    padding-inline: 1rem;
    margin-block: 0 .25rem;
}
li ul {
    list-style-type: square;
    padding-inline-start: 1rem;
}
details {
    max-width: fit-content;
    margin-bottom: max(6px, .3rem);
    border: max(3px, .15rem) solid color-mix(in srgb, var(--Text) 15%, transparent);
    border-radius: 1rem;
    background-color: var(--BG-Body-Dark);
}
details[open]{
    padding-bottom: .5rem;
    border-color: color-mix(in srgb, var(--Text-Accent) 40%, transparent);
}
details p {
    padding-inline: min(2vw, .75rem);
}
details p:first-of-type {
    margin-top: 0;
}
details p:last-of-type {
    margin-bottom: 0;
}
summary {
    max-width: fit-content;
    padding-inline: min(2vw, .75rem);
    padding-block: .5rem;
    border-radius: calc(1rem - max(3px, .15rem));
}
summary:hover, summary:focus-visible {
    background-color: var(--Text-Accent-Hover);
    color: var(--BG-Accent);
}
details[open] summary {
    max-width: calc(92vw - 1.571rem); /* Subtracting padding & .5pi to prevent hover bg from overflowing top-right (i wish overflow:hidden didn't break focus...) */
    width: fit-content;
    border-radius: calc(1rem - max(3px, .15rem)) 0 calc(1rem - max(3px, .15rem)) 0;
    text-decoration: underline dotted;
}
section[id="interests"] ul { /* NOTICE: Homepage only */
    list-style-type: none;
}
/* END POST-NAV */
/* BEGIN TABLE */
table {
    border-collapse: collapse;
    thead, caption {
        background-color: var(--Text-Accent);
        color: var(--BG-Body);
        text-align: left;
    }
    th, td, caption {
        padding: .5rem min(2vw, .75rem);
    }
    tr:nth-child(even) {
        background-color: var(--BG-Body-Dark);
    }
}
[role="region"][aria-labelledby][tabindex] { /* Div selector for responsive tables */
    max-width: fit-content;
    border: max(3px, .15rem) solid var(--Text-Accent);
    border-top: none; /* So that the thead text looks centered. Only works if thead (or caption in this case) and border are same color */
    overflow: auto;
    th {
        text-wrap: nowrap;
    }
}
[role="region"][aria-labelledby="jogging-stats-by-day"][tabindex] { /* NOTICE: Jogging only */
    tr td:nth-child(2), tr td:nth-child(3) {
        text-align: right;
    }
}
/* END TABLE */
/* BEGIN HOMEPAGE NARROW VIEWPORT */
section[id="intro"] img {
    margin-inline: auto;
}
section[id="intro"] hgroup {
    text-align: center;
    * {
        display: inline;
    }
}
/* END HOMEPAGE NARROW VIEWPORT */
/* BEGIN WIDE VIEWPORT */
@media(min-width: 55ch) {
    body {
        width: fit-content;
    }
    main {
        width: 55rem;
        max-width: calc(100vw - min(4vw, 1.5rem) - max(6px, .3rem)) /* Subtracting inline-padding and borders */;
    }
    nav {
        padding: max(6px, .3rem) 0 0 0;
    }
    #mobile-nav {
        display: none;
    }
    nav menu {
        display: block;
        position: static;
        margin: 0 auto;
        width: fit-content;
        max-width: revert;
        border-radius: 0rem;
        font-size: 0;
    }
    menu li {
        font-size: 1.17rem;
    }
    menu a {
        display: inline-block;
        padding: .25rem .75rem;
        border: max(3px, .15rem) solid;
        border-left: none;
        border-right: max(3px, .15rem) dashed;
        border-color: var(--Text-Accent);
    }
    menu li:first-child a {
        border-top: max(3px, .15rem) solid;
        border-left: max(3px, .15rem) solid;
        border-color: var(--Text-Accent);
        border-radius: 1rem 0 0 1rem;
    }
    menu li:last-child a {
        border-bottom: max(3px, .15rem) solid;
        border-right: max(3px, .15rem) solid;
        border-color: var(--Text-Accent);
        border-radius: 0 1rem 1rem 0;
    }
    menu a:focus-visible, menu li:last-child a:focus-visible {
        box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus), inset max(3px, .15rem) 0 0 0 var(--BG-Accent-Complement);
    }
    menu li:first-child a:focus-visible {
        box-shadow: 0 0 0 max(3px, .15rem) var(--BG-Accent-Focus);
    }
section[id="intro"] img { /* NOTICE: Homepage only */
    float: right;
}
section[id="intro"] hgroup { /* NOTICE: Homepage only */
    text-align: left;
}
}
/* END WIDE VIEWPORT */
/* BEGIN HOMEPAGE VERY WIDE FLEX VIEWPORT */
@media(min-width: 60rem) {
body {
    max-width: 75rem;
}
.homepage {
    display: grid;
    grid-template-areas:
    "nav nav"
    "footer main"
    "aside main"
    ". main";
    grid-template-columns:2fr 7fr;
    gap: .75rem;
    padding-inline-start: .75rem;
nav {
    grid-area: nav;
    max-width: fit-content;
    margin: 0 auto;
}
main {
    grid-area: main;
    width: auto;
    max-width: 55rem;
    margin: 0;
    aside {
        margin-top: .25rem;
    }
}
> aside {
    grid-area: aside;
    }
footer {
    grid-area: footer;
    margin: 0;
    margin-top: .25rem;
}
> aside, footer {
    border: max(2px, .1rem) solid color-mix(in srgb, var(--Text) 15%, transparent);
    border-radius: 1rem;
    background-color: var(--BG-Body-Dark);
    padding-block: .25rem;
}
}
>
/* END HOMEPAGE VERY WIDE FLEX VIEWPORT */
/* BEGIN COLOR SCHEME & THEME VARIANTS */
@media(prefers-color-scheme: light) {
    :root {
        --BG-Body: #F6EEFD;
        --BG-Body-Dark: #EBD3FF;
/*         --BG-Accent: #DEB8FF; */
/* Using Text-Accent (lightest or darkest text) with BG-Accent (darkest or lightest bg) is low contrast. maybe don't use both together, but then what of the nav? */
        --BG-Accent: #E8D1FC;
        --Text: #1E0727;
        --Text-Accent: #5C367B;
        --Text-Accent-Hover: #360F4D;
    }
@media(forced-colors: active) {
    nav a:hover, nav a:focus, #mobile-nav:hover, #mobile-nav:focus, summary:hover, summary:focus {
        background-color: highlight;
    }
}
@media(prefers-contrast: more) {
    :root {
        --BG-Body: black;
        --BG-Body-Dark: var(--BG-Body);
        --BG-Accent: var(--BG-Body);
        --Text: white;
        --Text-Accent: var(--Text);
        --Text-Accent-Hover: var(--Text);
    }
    @media(prefers-color-scheme: light) {
        :root {
            --BG-Body: white;
            --Text: black;
        }
    }
}
/* END COLOR SCHEME & THEME VARIANTS */