/* Variables */
:root {
	--spacing: 16px;
	--background-colour: #ffffff;
	--normal-text-colour: #000000;
	--focus-shadow: 0 0 8px 1px var(--normal-text-colour) inset;
	--hover-shadow: 0 0 4px 1px var(--normal-text-colour);
}
@media (prefers-color-scheme: dark) {
	:root {
		--background-colour: #000000;
		--normal-text-colour: #ffffff;
	}
}

/* Reset */
* {
	box-sizing: border-box;
	font-family: monospace;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	padding: 0;
	border: 0;
	margin: 0;
}

/* Page & content styles */
html,
body {
	background-color: var(--background-colour);
	color: var(--normal-text-colour);
	overflow-x: hidden;
}
::selection {
	color: var(--background-colour);
	-webkit-text-fill-color: var(
		--background-colour
	); /* Make gradient text legible when selected. More here: https://zade.viggers.net/interesting-things/text-gradients */
	background-color: var(--normal-text-colour);
}
a {
	color: var(--normal-text-colour);
	border: 2px solid transparent;
	border-bottom-color: var(--normal-text-colour);
	text-decoration: none;
}
a:hover,
a:focus {
	border-color: var(--normal-text-colour);
	text-decoration: none;
}
code {
	color: #ffffff;
	background-color: #000000;
	border: 1px solid var(--normal-text-colour);
	padding: 1px;
}
code::selection, code ::selection {
	color: #000000;
	-webkit-text-fill-color: #000000; /* Make gradient text legible when selected. More here: https://zade.viggers.net/interesting-things/text-gradients */
	background-color: #ffffff;
}
pre > code {
	overflow-x: auto;
	display: block;
	padding: var(--spacing);
}

body {
	padding: var(--spacing);
}
ul,
ol,
dl {
	margin-left: calc(var(--spacing) * 2);
}

dl > dt {
	font-weight: bold;
}
dl > dd {
	margin-left: var(--spacing);
}
fieldset {
	padding: var(--spacing);
	position: relative;
	border: 2px solid var(--normal-text-colour);
}
fieldset > legend {
	position: absolute;
	--space: calc(var(--spacing) / 2);
	top: calc(-1 * var(--space));
	padding-left: var(--space);
	padding-right: var(--space);
	background-color: var(--background-colour);
	border: 1px solid var(--normal-text-colour);
}

/* Layout utilities */
.flow > * + * {
	margin-top: var(--flow-space, 2em);
}

.stack {
	display: flex;
	flex-direction: column;
}

.row {
	display: flex;
}

/* Input elements */
input {
	accent-color: var(--normal-text-colour);
	border-radius: 0; /* Safari applies a border-radius to all input elements by default */
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="image"],
input[type="file"]::file-selector-button {
	cursor: default;
	padding: var(--spacing);
	background-color: var(--background-colour);
	border: 2px solid var(--normal-text-colour);
	color: var(--normal-text-colour);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="image"]:focus-visible,
input[type="file"]::file-selector-button:focus-visible,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="image"]:hover,
input[type="file"]::file-selector-button:hover {
	box-shadow: var(--hover-shadow);
}
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="image"]:active,
input[type="file"]::file-selector-button:active {
	box-shadow: var(--focus-shadow);
}

/* Text field-like things */
textarea,
input,
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
	color: var(--normal-text-colour);
	border: 2px solid var(--normal-text-colour);
	background-color: var(--background-colour);
	padding: var(--spacing);
}

textarea:focus,
input:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus {
	outline: none;
	box-shadow: var(--focus-shadow);
}

textarea::placeholder,
input::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="email"]::placeholder,
input[type="month"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="time"]::placeholder,
input[type="url"]::placeholder,
input[type="week"]::placeholder {
	color: var(--normal-text-colour);
}

form > * {
	margin-top: var(--spacing);
}
form label {
	display: block;
}
form label > .label-text {
	display: block;
	margin-bottom: calc(var(--spacing) / 4);
}
form input {
	width: 100%;
}
form textarea {
	resize: vertical;
	width: 100%;
}