/* style.css

A rudimentary stylesheet

This CSS stylesheet by Kemi-Amu is marked with CC0 1.0.
To view a copy of this license,
visit https://creativecommons.org/publicdomain/zero/1.0/
*/

:root {
	--calm-back-line: #cfcfd1;
	--calm-back: #efefef;
	--calm-backer: #f9f9f9;
	--calm-callout: #e0e0e1;
	--calm-cont: #2f2f34;
	--code-cont: #870387;
	--page-back: #ffffff;
	--risk: #c30000;
	--risk-back: #f2d5d5;

	--calm-cont-dull: #77777f;
	--link-back: transparent;
	--link-contx: #468ee6;
	--link-contxx: #6ea6eb;
	--link-cont: #3584e4;
	--spacing: 0.75em;
	overflow: hidden auto;
	font-family: sans-serif;
	background-color: var(--page-back);
	color: var(--calm-cont);
}
@media (prefers-color-scheme: dark) {
	:root {
		--calm-back-line: #4d4d51;
		--calm-back: #434346;
		--calm-backer: #2e2e32;
		--calm-callout: #48484b;
		--calm-cont: #ffffff;
		--code-cont: #cd89cd;
		--page-back: #1d1d20;
		--risk: #ff938c;
		--risk-back: #4c3335;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	line-height: 1.5em;
	font-size: 1rem;
	background-color: transparent;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

.cols {
	margin: 0 -1rem;
}
.cols.is-stable {
	display: flex;
}
.cols.is-reverse {
	flex-direction: row-reverse;
}
@media (min-width: 40rem) {
	.cols {
		display: flex;
	}
}
.cols > * {
	flex: 1 1 auto;
	margin: var(--spacing) 0;
	padding: 0 1rem;
}
.cols > .is-0 {
	flex: 0 1 auto;
}
.cols > .is-1 {
	flex: 1 1 0;
}
.cols > .is-2 {
	flex: 2 1 0;
}
.cols > .is-3 {
	flex: 3 1 0;
}

main {
	margin: auto;
	padding: 6.25vmin 0;
	max-width: 60rem;
	width: 87.5%;
}

nav {
	background: #36363a;
	height: 3.5rem;
	box-shadow: 0 0 1rem #0002;
}

nav > div {
	margin: auto;
	max-width: 60rem;
	width: 87.5%;
	height: 100%;
}

nav > div > div {
	height: 100%;
	margin: 0 -1rem;
	display: flex;
}

nav > div > div > a {
	padding: 0 1rem;
	display: flex;
	height: 100%;
	align-items: center;
	color: #fff;
	font-weight: bold;
}

nav > div > div > a:hover,
nav > div > div > a:active {
	background-color: #48484b;
	text-decoration: none;
}

nav > div > a:active {
	background-color: #5a5a5e;
}

footer {
	background-color: var(--calm-backer);
}

hr {
	border-width: 0;
	border-top: 1px solid var(--calm-back-line);
	margin: 3rem 0;
}

p,
table,
ul,
ol,
.block {
	margin: var(--spacing) 0;
}

h1,
h2,
h3 {
	margin: 1em 0 0.5em 0;
	font-weight: bold;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

table {
	border-collapse: collapse;
}

th,
td {
	border-bottom: 1px solid var(--calm-back-line);
	padding: 0.5rem 1rem;
	text-align: left;
}

ul,
ol {
	padding-left: 2em;
}

ul ol,
ul ul,
ol ul,
ol ol {
	margin: 0;
}

li,
ul p,
ol p {
	margin: 0.25em 0;
}

pre,
blockquote {
	margin: var(--spacing) 0;
	padding: 1rem;
}

pre {
	overflow: auto;
	font-family: monospace;
	background-color: var(--calm-back);
}

blockquote {
	border-left: 0.5rem solid var(--calm-callout);
}

h1:first-child,
h2:first-child,
h3:first-child,
p:first-child,
pre:first-child,
blockquote:first-child,
.block:first-child {
	margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
p:last-child,
pre:last-child,
blockquote:last-child,
.block:last-child {
	margin-bottom: 0;
}

img,
video {
	max-width: 100%;
}

sup,
sub {
	line-height: 0;
	font-size: 0.875em;
}

code {
	margin: 0 0.1875em;
	padding: 0 0.3125em;
	font-family: monospace;
	background-color: var(--calm-back);
	color: var(--code-cont);
}

a {
	background-color: var(--link-back);
	color: var(--link-cont);
	text-decoration: none;
	cursor: pointer;
}

main a:hover,
main a:active {
	text-decoration: underline;
	color: var(--link-contx);
}

main a:active {
	color: var(--link-contxx);
}

.has-right {
	text-align: right;
}

.has-center {
	text-align: center;
}

.has-dull {
	color: var(--calm-cont-dull);
}

button,
.button,
input,
textarea {
	display: flex;
	border-radius: 1em;
	border: 1px solid var(--calm-back-line);
	padding: 0.5em 1em;
	height: 3rem;
	min-width: 5rem;
	background-color: transparent;
	outline: medium solid transparent;
	color: var(--calm-cont);
}

button,
.button {
	text-align: center;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	background-color: var(--link-cont);
	border-color: var(--link-cont);
}

button:not(:first-child),
.button:not(:first-child) {
	margin-left: 1rem;
}

input,
textarea {
	width: 100%;
	cursor: text;
}

textarea {
	height: 55vh;
}

input:focus,
textarea:focus {
	outline-color: var(--calm-back);
}

button:hover,
.button:hover {
	background-color: var(--link-contx);
	border-color: var(--link-contx);
}

button:active,
.button:active {
	background-color: var(--link-contxx);
	border-color: var(--link-contxx);
	transform: scale(0.95);
}

button:disabled,
.button:disabled,
input:disabled,
textarea:disabled {
	outline-width: 0;
	background-color: var(--calm-back);
	color: var(--calm-cont-dull);
	cursor: not-allowed;
}

input:invalid,
textarea:invalid {
	border-color: var(--risk);
}

input:invalid:focus,
textarea:invalid:focus {
	outline-color: var(--risk-back);
}

input::placeholder,
textarea::placeholder {
	color: var(--calm-cont-dull);
}