/* This entire sheet is a sin against the CSS gods. I'm so sorry. */

body {
    /* Text spacing */
    line-height: 1.6em;
    font-size: 1em;

    /* Colors; color is text color */
    background: var(--bg-two);
    background-image: var(--bg-overlay);
    color: var(--text);

    /* Makes header and footer sit flush */
    margin: 0;
    /* The cursed part: make it Round */
    margin: auto;
    overflow: hidden;
}

body:before {
    content: "";
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    pointer-events: none;
    background: var(--bg-overlay);
    z-index: 9999;
}

main {
    background: var(--bg);
    border: 1px solid var(--bg-two);
    box-shadow: 0 0 0 10em var(--bg-two),
    0 0 0 20em var(--bg),
    0 0 0 30em var(--bg-two),
    0 0 0 40em var(--bg),
    0 0 0 50em var(--bg-two),
    0 0 0 60em var(--bg);
    border-radius: 100%;
    /* Centers everything */
    margin: 15vh auto 0 auto;
    /* Make some horizontal space for thinner screens */
    max-height: 60vh;
    max-width: 60vh;
    overflow-y: scroll;
    aspect-ratio: 1 / 1;
    position: relative;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}

main::-webkit-scrollbar {display: none;}

:focus {outline: 3px solid red;}

article {
    max-width: 40vh;
    margin: auto;
    padding: 1.5em 1em 5em 1em;
    background: var(--bg);
}

/* Makes headings easier to see */
h1, h2, h3, h4, h5, h6, dt {
    padding: 0.2em;
    border-radius: 10px;
    text-align: center;
    letter-spacing: 2px;
}

.small {
  font-size: 0.8rem;
  line-height: 1.1;
}

.xx-small {
  font-size: 0.6rem;
  line-height: 1.05;
  text-align: center;
}

/* Make header list fit all on the same line, no bullet points */
nav ul {
	margin: 0; padding: 0;
	padding-bottom: 0.5em;
	list-style-type: none;
}
nav ul li {display: inline-block; padding: 0 0.5em;}
nav {margin: auto; text-align: center; border-bottom: 2px dashed var(--accent);}

/* Makes it obvious you can click on dropdowns */
summary:hover {cursor: pointer;}

/* Makes highlights less eyestrainy */
mark {background: var(--highlight);}

/* Marks asides as being... aside. */
aside {border: 2px solid var(--accent); padding: 1em;}

/* Bold description title elements */
dt {font-weight: bold; text-align: left; margin: 0.5em;}

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

/* Horizontal rule */
hr {border: 2px dashed var(--accent);}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

#skip {
    display: block;
    position: absolute;
    top: 0; left: 0;
    color: transparent; background: transparent;
    pointer-events: none;
    z-index: 9999;
}
#skip:focus, #skip:active, #skip:focus-visible {
    color: var(--link);
    background: var(--bg);
    border: 2px solid var(--bg-two);
    pointer-events: auto;
    padding: 1em;
    font-size: 1.2em;
}

/* Dark mode tweaks */
@media screen and (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6, dt, mark {color: var(--highlighttext);}
    mark {padding: 2px 5px;}
    ::selection {color: var(--highlighttext); background: var(--highlight);}
}

@media screen and (max-width: 600px) {
    body {overflow: visible;}
    main {
        border-radius: 0%;
        margin: 15vh auto 14em auto;
        max-height: 60vh;
        aspect-ratio: auto;
        box-shadow: 0 0 0 2em var(--bg-two),
        0 0 0 4em var(--bg),
        0 0 0 6em var(--bg-two),
        0 0 0 8em var(--bg),
        0 0 0 10em var(--bg-two),
        0 0 0 12em var(--bg);
        max-height: none;
        overflow-y: visible;
        overflow-x: clip;
        min-width: 100vw;
    }
    article {
        max-width: 40ch;
        margin: auto;
        padding: 1em;
    }
}