:root {
	--bar-height: 2.5em;
}

body {
	margin: 2em;
	margin-top: 4em;
	font-size: large;
}

#bar {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100vw;
	max-width: 100%;
	height: var(--bar-height);
	display: flex;
	align-items: center;
	padding: .8em;

	background-color: white;
	border-bottom: thin solid lightgrey;
}

#bar > ul.left {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}

#bar > ul.right {
	list-style: none;
	margin-left: auto;
}

#bar > ul > * > a:not(.button):hover {
	color: rgba(0, 0, 0, .6);
}

#bar > ul > * > a:not(.button) {
	text-decoration: none;
	color: black;
	padding: .4em .4em;
}

#bar > ul > li {
	display: inline-block;
	padding: 0 .2em;
}

#bar > ul > li > a > img.icon {
	padding: 0.1em;
	width: calc(var(--bar-height) - .8em);
	border-radius: .2em;
}

aside {
	float: right;
	margin: .2em;
}

.credentials > aside {
	float: none;
	font-size: smaller;
	margin-bottom: 2em;
}

.icon {
	border: thin solid rgba(0, 0, 0, .2);
	width: 1.5em;
}

input[type="image"].icon {
	margin: .15rem;
	padding: .15rem;
	border-radius: .4em;
}

input[type="image"].icon:hover {
	border-color: rgba(0, 0, 0, .4);
}

span.warning {
	display: flex;
	width: fit-content;
}

span.warning > .icon {
	border: none;
	margin-right: .5em;
}

span.warning > p {
	text-decoration: solid orange underline;
	text-decoration-thickness: .15em;
}

.error {
	background-color: red;
	border: thin solid darkred;
	border-radius: .25rem;
	width: fit-content;
	margin: .5rem 0 ;
	padding: .2rem;
}

.error > p {
	margin: 0;
	display: inline;
	vertical-align: middle;
}

.error > input[class="icon"] {
	width: 1rem;
	vertical-align: middle;
}

input:not([type]), input[type="password"], input[type="email"] {
	background-color: #FAFAFA;
	border: thin solid lightgrey;
	border-radius: .2em;
	padding: .2em;
}

button, input[type="submit"] {
	font-size: large;
}

form.credentials {
	width: fit-content;
	max-width: 60ch;
	padding: 4em;
	border-radius: .2em;
}

form.credentials > label, form.credentials > input {
	display: block;
}

form.credentials > input {
	margin-bottom: 2em;
}

.break {
	display: block !important;
}

.hidden {
	display: none !important;
}

.small {
	font-size: smaller;
}

a.button:hover {
	background-color: rgba(0, 0, 0, .03);
}

a.button {
	padding: .3em .8em;
	border-radius: .25em;
	text-decoration: none;
	border: thin solid lightgrey;
	color: black;
	display: inline-block;
	width: fit-content;
	background-color: rgba(0, 0, 0, .015);
}

a.pop:hover {
	background-color: #6363FF;
	border-color: lightgrey;
}

a.pop {
	border: medium solid #0000FF;
	font-weight: bold;
	background-color: blue;
	color: white;
	border: thin solid darkblue;
}

dd, p {
	max-width: 65ch;
}

#wait {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 2em;

	display: flex;
	justify-content: center;
	align-items: center;

	background-color: rgba(0, 0, 0, .8);
	backdrop-filter: blur(1px);
	color: white;
}