* { box-sizing: border-box; }

@keyframes rainbow {
  from { backdrop-filter: hue-rotate(0deg); -webkit-backdrop-filter: hue-rotate(0deg); }
  to { backdrop-filter: hue-rotate(360deg); -webkit-backdrop-filter: hue-rotate(360deg); }
}

body {
	background-color: #ebc;
	background: url(/assets/images/bg.gif);
	background-attachment: fixed;
	min-height: 100vh;
	color: #201;
	margin: 0;
	padding: 1px 0.5rem 1rem 0.5rem;
	animation: 10s linear 0 rainbow;
	animation-iteration-count: infinite;
}

header {
	margin-bottom: 1rem;
}

kbd {
	background: #fde;
	border: 2px outset #fde;
	padding: 0 2px;
}

form {
	margin-bottom: 0.25rem;
}

hr {
	border-top: 1px solid #c99;
	border-bottom: 0;
	margin: 0.5rem 2rem;
}

h1, h2, h3 {
	margin-bottom: 0;
}

h1:first-child, h2:first-child, h3:first-child {
	margin-top: 0;
}

h2 > small, h3 > small {
	font-size: 16px;
}

input:not(:last-child),
button:not(:last-child),
label:not(:last-child) {
	margin-right: 0.25rem;
}

input, button {
	color: black;
	border: 2px outset #fde;
	background-color: #fde;
}

input:not(:disabled):active, button:not(:disabled):active,
input[type=text], input:not([type]), input[type=number] {
	border-style: inset;
}

input:disabled, button:disabled {
	opacity: 50%;
}

.container {
	max-width: 640px;
}

.center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.block {
	background-color: #fcd;
	border: 5px outset #dab;
	margin-bottom: 10px;
	padding: 0 5px;
}

footer {
	background-color: #ebc;
	border: 5px inset #dab;
	padding: 10px;
}

footer p:first-of-type {
	margin-top: 0;
}
footer p:last-of-type {
	margin-bottom: 0;
}

img.btn {
	margin: 0 2px;
}

.fl {
	float: left;
}

.list-unstyled {
	list-style: none;
	padding: 0;
	margin: 0;
}

.alert {
	border: 3px inset #fde;
	margin: 1rem;
	padding: 0 0.25rem;
}

.bg-green {
	background-color: #cfc;
	border-color: #dfd;
}

.bg-blue {
	background-color: #ccf;
	border-color: #ddf;
}

.bg-red {
	background-color: #faa;
	border-color: #fbb;
}

.width-90 { width: 90% }
.d-flex { display: flex }
.flex-fill { flex: 1 1 auto !important }
.text-left { text-align: left }

.mb-1 { margin-bottom: 0.25rem }
.mb-2 { margin-bottom: 0.5rem }
.mb-3 { margin-bottom: 1rem }