:root {
	/* --theme-background: #ff3333; */
	--theme-background: #d01404;
	--theme-color: #fff;
}

* {
	box-sizing: border-box;
}

body {
	font: 16px/1.2 system-ui, sans-serif;
	margin: 0;
}

section {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: auto;
}

form {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin: 0.75rem;
}

form * {
	margin: 0.25rem;
}

header {
	background: var(--theme-background);
	box-shadow: 0 0.25rem 0.25rem #0003;
	color: var(--theme-color);
	display: flex;
	/*height: 3.5rem;*/
}

header a {
	padding: 1rem;
}

header a:focus {
	background: #fff3;
}

header a:hover {
	background: #fff4;
}

header a:active {
	background: #fff6;
}

header h1 {
	flex-grow: 1;
	margin: 1.09rem 1rem;
	user-select: none;
}

header img {
	display: block;
}

header input {
	margin: 0.5rem;
	min-width: 3rem;
}

nav {
	background: #fff;
	box-shadow: 0.25rem 0.25rem 0.25rem #0003;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 3.5rem;
	right: 0;
}

nav a {
	padding: 1rem;
}

article {
	overflow: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus, a:hover, a:active {
	outline: none;
	text-decoration: underline;
}

h1, h2, h3, p {
	margin: 1rem;
}

h1, h2, h3 {
	font-size: 1.1rem;
}

input, textarea {
	border: 0.0625rem solid #0003;
	border-radius: 0.25rem;
	font: inherit;
	min-width: 16rem;
	padding: 0.5rem;
}

input::placeholder, textarea::placeholder {
	color: #0009;
}

input:focus {
	outline: none;
}

input[type=submit] {
	background: var(--theme-background);
	color: var(--theme-color);
	cursor: pointer;
}

input[type=submit]:focus {
	background: #fff3;
}

input[type=submit]:hover {
	background: #fff4;
}

input[type=submit]:active {
	background: #fff6;
}

small {
	font-size: 0.9em;
}

svg {
	display: block;
	fill: currentColor;
	height: 1.5rem;
	width: 1.5rem;
}

textarea {
	flex-grow: 1;
}

.alert {
	background: #333;
	border: 0.0625rem solid #0006;
	border-radius: 0.25rem;
	box-shadow: 0.25rem 0.25rem 0.25rem #0003;
	color: #ccc;
	margin: 1rem;
	padding: 1rem;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}

.auth {
	align-items: center;
	background: var(--theme-background);
	color: var(--theme-color);
}

.auth form {
	align-items: center;
}

.auth input {
	border-color: #fff9;
}

.list ul {
	list-style: none;
	margin: 0;
	overflow: auto;
	padding: 0;
}

.list li {
	background: url("favicon.svg") 1rem/2rem no-repeat;
	display: flex;
	cursor: pointer;
	/*mask-image: url("favicon.svg");
	max-position: 1rem;
	mask-size: 2rem;
	mask-repeat: no-repeat;*/
	padding: 1rem;
	padding-left: 4rem;
}

.list li:focus {
	background-color: #0002;
}

.list li:hover {
	background-color: #0003;
}

.list li:active {
	background-color: #0004;
}

.list li + li {
	border-top: 0.0625rem solid #ccc;
}

.list li[data-status="2"] {
	color: #900;
}

.item {
	white-space: pre-line;
}

.hidden {
	display: none;
}

/*.refreshing {
	filter: blur(1px);
	touch-action: none; prevent scrolling
}*/

/*#importButton {
	display: none;
}*/

/* Desktop */

/*@media (min-width: 480px) {
	#importButton {
		display: initial;
	}
}*/