/* readable.css 1.1.1-rc1, licensed 0BSD */

:root {
    --bg: #E3E3E3;
    --bg-main: #FCFCFC;
    --fg: #000;
    --fg-sec: #333;

    --accent: #848C37;
    --visited: #AE8432;

    --column-width: 67ch;
    --form-width: 50ch;
    --line-width: 0.125rem;
    
    --line-height: 1.4;
    --one-line: calc(var(--line-height) * 0.8rem);
    --half-line: calc(var(--one-line) * 0.5);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #404040;
        --bg-main: #1D1F21;
        --fg: #EEE;
        --fg-sec: #BBB;

        --accent: #A4AC57;
        --visited: #F0C674;

        font-family: var(--font-family);
        background-color: var(--background-color);
        color: var(--color);
    }

	html {
		--background-color: var(--bg);
		--color: var(--fg);
	}
	html[data-high-contrast="on"] {
		--background-color: #000;
	}
}

h1, h2 {
	line-height: calc(var(--line-height) * 2rem);
}

h1 {
	font-size: 1.8rem;
    margin: 0.5rem 0;
}

h2 {
	font-size: 1.5rem;
}

h3, h4, h5, h6 {
	line-height: var(--one-line);
	padding-top: calc(var(--line-height) * 0.75rem);
	margin-bottom: calc(var(--line-height) * 0.25rem);
}

:is(h3, h4, h5, h6) + * {
	margin-top: 0;
}

p, pre, li, hr, small { 
    color: var(--fg-sec);
}

html {
    background-color: var(--bg);
    color: var(--fg);
}

body {
    margin: 1rem auto;
    padding: 1rem;
	width: min(90%, var(--column-width));

    background-color: var(--bg-main);
    border: 1px solid var(--fg);
    box-shadow: 5px 5px 0 var(--fg);
}

header {
    text-align: center;
}
header a {
    color: var(--accent);
    font-weight: bold;
    text-decoration: none;
}
header a:visited {
    color: var(--accent);
}
header a:hover {
    text-decoration: underline;
}
header > h1 {
    font-weight: bold;
    margin: 0.5rem auto;
}
header > p {
    text-align: center;
}
header > ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 400;
}
header > ul > li {
    display: inline;
    padding: 0 0.5rem;
}

main {
    padding: 0.5rem;
}

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

footer {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin: 0.25rem;
}

hr {
	border: 0;
	border-top: var(--line-width) solid;
    margin: 0;
}

summary {
	cursor: pointer;
}

blockquote:not(.exclude) {
	padding-inline-start: var(--one-line);
	border-inline-start: var(--line-width) solid;
}

ul, ol {
	padding-inline-start: calc(var(--line-height) * 2rem);
}

:is(body, article, main, figure) > :is(img, video):not(.exclude) {
	max-width: 100%;
}

figure:not(.exclude) {
	text-align: center;
}

figure:not(.exclude) > * + figcaption {
	margin-top: 0;
	font-style: italic;
}

article aside:not(.exclude) {
	border: var(--line-width) solid;
	padding: 0 var(--one-line);
	border-radius: var(--half-line);
}

pre {
	max-width: 100%;
	overflow: auto;
	line-height: var(--one-line);
}

/* Vertical Rhythm */
p, ul, ol, figcaption, nav, td, th, label {
	line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre, nav, figure, figcaption, :is(ul, ol):not(li > *), :is(body, article, main) > :is(img, video, details):not(.exclude), table, article > aside, article > aside {
	margin: var(--one-line) 0;
}

/* Headings */

header {
	margin: 0;
}

header :first-child {
	margin-top: calc(0.5 * var(--one-line));
}

header > h1 + * {
	margin-top: 0;
}

header > :last-child {
	margin-bottom: calc(0.5 * var(--one-line));
}

header > h2:last-child {
	line-height: var(--one-line);
	font-size: 1rem;
	font-weight: normal;
}

header + * {
	margin-top: calc(0.5 * var(--one-line));
}
/* Navbar */
nav:not(.exclude:not([data-style]), [data-style="none"]) { /* This styling only affects the first nav element that is the direct child of the body */
	text-align: center;
	border-width: var(--line-width) 0;
	border-style: solid;
	line-height: var(--line-height);
	display: flex;
	flex-flow: row wrap;
	contain: layout;
}

nav:not(.exclude:not([data-style]), [data-style="none"]) > * {
	flex-grow: 1;
	margin: calc((var(--line-height) * 0.5rem) - var(--line-width)) var(--half-line); /* Put half a line's height on both top and bottom, then remove the width of the border */
	text-transform: uppercase;
}

nav[data-style="blockout"],
nav:is([data-style="boxes"], [data-style="roundesque"]) a:is(:hover, :focus) {
	background-color: var(--color);
	color: var(--background-color);
}

nav[data-style="blockout"] a {
	text-decoration: none;
}

nav[data-style="blockout"] a:is(:hover, :focus) {
	background-color: var(--background-color);
	color: var(--color);
}

nav[data-style]:is([data-style="boxes"], [data-style="roundesque"]) {
	border: 0;
}

nav:is([data-style="boxes"], [data-style="roundesque"]) a {
	text-decoration: none;
	border: var(--line-width) solid;
}

nav[data-style="roundesque"] a {
	border-radius: calc(0.25 * var(--one-line));
}

@media (prefers-reduced-motion: no-preference) {
	nav[data-style="classy"] span > a {
		text-decoration: none;
		display: inline-block;
	}

	nav[data-style="classy"] span > a::after {
		content: '';
		width: 0;
		height: var(--line-width);
		display: block;
		background: var(--color);
		transition: 150ms;
	}

	nav[data-style="classy"] span > a:is(:hover, :focus)::after {
		width: 100%;
	}
}


/* Justification (default off; use data-justify="on" on <html> to enable) */
/* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
@media (min-width: 70.5ch) {
	[data-justify="on"] body {
		text-align: justify;
		text-justify: inter-character;
	}
}

/* Tables */
table:not(.exclude) {
	width: 100%;
	overflow: auto;
	border-collapse: collapse;
	margin: calc(-0.5 * var(--line-width)) 0;
}

table:not(.exclude) :is(td, th) {
	padding: 0 calc(var(--one-line) * 0.25);
	line-height: calc(var(--one-line) - 0.5*var(--line-width));
	border: var(--line-width) solid;
}

table:not(.exclude) td {
	word-wrap: break-word;
}

/* Forms */
form {
	max-width: var(--form-width)
}

form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) + label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
	display: block;
	margin: var(--half-line) 0;
}

form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select), button {
	box-sizing: border-box;
	padding: var(--half-line);
	background: transparent;
	border: var(--line-width) solid;
	color: inherit;
	font: inherit;
	width: 100%;
}

button {
	width: initial;
}

form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) + label) {
	font-weight: bold;
}