/* #region: reset */
*, *::after, *::before {
	box-sizing: border-box;
}
blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
  margin: 0;
}
ul[role="list"], ol[role="list"] {
  list-style: none;
}
a:not([class]) {
	text-decoration-skip-ink: auto;
}
img, picture {
	max-width: 100%;
	display: block;
}
button, input, select, textarea {
	font: inherit;
}
/* #endregion: reset */

:root {
	--body-color: #efefef;
	--body-background: #222;

	--small-color: #aaa;

	--heading-color: #aaa;
	--heading-underline: #666;

	--link-color: #aaa;
	--link-focus-color: #ddd;

	--input-color: #ccc;
	--input-background: #333;
	--input-border: #555;

	--input-focus-color: #efefef;
	--input-focus-border: #4b90c6;
	--input-focus-shadow: 0 0 4px #4b90c6;

	--button-color: #efefef;
	--button-background: #333;
	--button-border: #444;
	--button-focus-color: #efefef;
	--button-focus-background: #555;
	--button-focus-border: #888;

	--button-danger-color: #fff;
	--button-danger-background: #d14836;
	--button-danger-border: #b0281a;
	--button-danger-focus-color: #fff;
	--button-danger-focus-background: #c53727;
	--button-danger-focus-border: #b0281a;

	--table-border-color: #555;
	--table-header-color: #aaa;
	--table-header-background: #333;
	--table-row-hover-color: #aaa;
	--table-row-hover-background: #333;

	--alert-color: #efefef;
	--alert-background: #333;
	--alert-border: #444;

	--hr-color: #555;
}

html {
	font-family: sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	text-align: initial;
}

body {
	color: var(--body-color);
	background: var(--body-background);
	margin: 0;
	padding: 2rem;
	max-width: 50rem;
}

small {
	color: var(--small-color);
}

a {
	color: var(--link-color);
}

a:hover {
	color: var(--link-focus-color);
	text-decoration: none;
}

h1, h2 {
	color: var(--heading-color);
}

h1 {
	font-weight: 600;
	font-size: 2rem;
}

h2 {
	border-bottom: 1px solid var(--heading-underline);
	font-weight: 500;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

hr {
	border: 0;
	height: 0;
	margin: 0;
	border-top: 1px dotted var(--hr-color);
	margin-top: 1rem;
	padding-bottom: 1rem;
}

header {
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

nav ul {
	margin: 0;
	padding: 0;
	margin-bottom: .25rem;
}

nav li {
	display: inline;
	list-style: none;
	margin-left: 1rem;
}

label {
	display: block;
	margin-bottom: .25rem;
}

input[type="text"] {
	appearance: none;
	color: var(--input-color);
	border: 1px solid var(--input-border);
	background: var(--input-background);
	padding: .15rem .3rem;
	margin-bottom: .75rem;
	width: 100%;
}

input[type="text"]:focus {
	color: var(--input-focus-color);
	border-color: var(--input-focus-border);
	box-shadow: var(--input-focus-shadow);
	outline: 0;
}

input[type="text"]:disabled {
	opacity: 0.8;
}

input[type="checkbox"] {
	margin: .2rem;
}

button {
	appearance: none;
	cursor: pointer;
	color: var(--button-color);
	border: 1px solid var(--button-border);
	background: var(--button-background);
	padding: .1rem 1rem;
}

button:hover, button:focus {
	color: var(--button-focus-color);
	border: 1px solid var(--button-focus-border);
	background: var(--button-focus-background);
}

button.danger {
	color: var(--button-danger-color);
	border: 1px solid var(--button-danger-border);
	background: var(--button-danger-background);
}

button.danger:hover, button.danger:focus {
	color: var(--button-danger-focus-color);
	border: 1px solid var(--button-danger-focus-border);
	background: var(--button-danger-focus-background);
}

.actions {
	margin-top: .5rem;
	text-align: end;
}

.actions > * {
	margin-left: .5rem;
}

table {
	width: 100%;
	border-collapse: collapse;
}

table, th, td {
	border: 1px solid var(--table-border-color);
}

th, td {
	padding: .25rem .5rem;
	text-align: left;
}

td {
	vertical-align: top;
}

td:first-of-type {
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

tr:hover {
	background: var(--table-row-hover-background);
	color: var(--table-row-hover-color);
}

th {
	background: var(--table-header-background);
	color: var(--table-header-color);
	font-weight: inherit;
}

.alert {
	color: var(--alert-color);
	border: 1px solid var(--alert-border);
	background: var(--alert-background);
	padding: .5rem 1rem;
	margin-bottom: .5rem;
}