:root {
	font-size: 16px;
	--title-font: "Norican", cursive;
	--warband-font: "Source Serif Pro", serif;
	--sans-font: "Roboto", sans-serif;
	--monospace-font: "Roboto Mono", monospace;
	--fontawesome: "Font Awesome 5 Free";
	/* --brands-font: "Font Awesome 5 Brands"; */

	/* Generated by Paletton.com © 2002-2014 */
	/* http://paletton.com */
	--primary-white-color: #cce0fa;
	--primary-light-color: #689bdd;
	--primary-color: #306fc1;
	--primary-dark-color: #0c458e;
	--primary-black-color: #031a37;
	--complement-white-color: #ffebcb;
	--complement-light-color: #ffc76c;
	--complement-color: #ffaf2e;
	--complement-dark-color: #d88600;
	--complement-black-color: #533300;

	--menuitem-hover-foreground: #405080;
	--menuitem-hover-background: #ecf4ff;
	--menuitem-dim-hover-foreground: #96a2c0;

	--z-index-title: 5;
	--z-index-top-menu-floater: 4;
	--z-index-footer: 2;
	--z-index-overlays: 8;
	--z-index-bluebox: 10;
	--z-index-above-bluebox: 11;
	--z-index-topmost: 100;
	--z-index-loading-spinner: 900;
}

@media print {
	.screen-only,
	button {
		display: none !important;
	}
}

@media screen {
	.print-only {
		display: none !important;
	}
}

html,
body,
h1,
h2,
h3,
h4,
p,
div,
span,
a,
table,
tr,
th,
td,
input,
select,
option,
textarea {
	/* font-style: normal; */
	margin: 0;
	padding: 0;
	text-align: left;
	box-sizing: border-box;
	outline: none;
}

body {
	overflow-x: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

input[type="number"] {
	text-align: right;
}

/* #region REVIEW all below */
a {
	color: inherit;
	border-bottom: 0.1em dotted;
	text-decoration: none;
	&:hover {
		color: white;
		background-color: rgba(255, 255, 255, 0.3);
	}
	&.light:hover {
		color: black;
		background: rgba(0, 0, 0, 0.1);
	}
	&[target="_blank"]:after {
		font-family: var(--fontawesome);
		font-weight: 900;
		content: "\00a0\f35d";
		font-size: 80%;
		vertical-align: 0.1em;
	}
}

.viewport {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	padding: 0 0.3em;
}

/* #region title */
#title {
	color: white;
	background-color: var(--primary-color);
	background: linear-gradient(95deg, var(--primary-black-color) 0%, var(--primary-color) 20%, var(--primary-color) 100%);
	border-bottom: 0.15em solid var(--primary-dark-color);
	box-shadow: -0.4rem -0.8rem 0.5rem 0.8rem black;
	position: relative;
	z-index: var(--z-index-title);
	user-select: none;
	h1,
	h2,
	div.tiny {
		font-family: var(--title-font);
		font-weight: normal;
		text-align: center;
		text-shadow: 0.1rem 0.2rem 0.5rem var(--primary-black-color);
	}
	h1 {
		padding-top: 1rem;
		font-size: 4rem;
	}
	div.tiny {
		font-size: 50%;
		color: var(--primary-white-color);
		margin-top: 0.3em;
		margin-left: 2em;
		margin-bottom: -0.4em;
		text-align: left;
		line-height: 0;
	}
	h2 {
		margin: -0.3em auto 0 auto;
		font-size: 3rem;
		width: max-content;
	}
	hr {
		height: 0.15rem;
		border: none;
		background-color: white;
		border-radius: 0.3rem;
		box-shadow: 0.05rem 0.1rem 0.5rem var(--primary-black-color);
		margin: 0.5rem 0 1rem 0;
	}
	#subline {
		font-family: var(--sans-font);
		color: var(--primary-white-color);
		font-size: smaller;
		text-align: center;
		padding-bottom: 1em;
		text-shadow: 0.05rem 0.1rem 0.5rem var(--primary-black-color);
	}
}
@media screen and (max-width: 44rem) {
	#title {
		h1 {
			font-size: 9vw;
		}
		h2 {
			font-size: 7vw;
		}
	}
}
/* #endregion */

/* #region top menu */
#top-menu {
	user-select: none;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: var(--z-index-top-menu-floater);
	padding-block: 0.5em;
	background: linear-gradient(95deg, var(--complement-color) 0%, var(--complement-light-color) 100%);
	color: var(--complement-black-color);
	border-bottom: 0.15rem solid var(--complement-dark-color);
	box-shadow: -0.4rem -0.8rem 0.5rem 0.8rem black;

	.flex-box {
		display: flex;
		flex-wrap: nowrap;
		& > div {
			display: flex;
			column-gap: 1em;
			&.primary {
				flex: 1;
			}
		}
	}

	i {
		font-size: 1.5rem;
		padding: 0.3em;
		cursor: pointer;
		box-sizing: content-box;
		&:hover {
			color: var(--complement-dark-color);
			text-shadow: 0 0 0.2em var(--complement-white-color);
		}
	}
}
@media screen and (max-width: 600px) {
	#top-menu .flex-box > div {
		column-gap: 0.2em;
	}
}
/* #endregion */

/* #region page footer */
@media screen {
	#footer {
		--light-color: #cdcdd3;
		--dim-color: #888;

		font-family: var(--sans-font);
		color: var(--light-color);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #55575a;
		padding-top: 2rem;
		padding-bottom: 1rem;
		box-shadow: -0.4rem 0.8rem 0.5rem 0.8rem black;
		position: relative;
		z-index: var(--z-index-footer);

		.flex-container {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			& > div {
				width: calc(50% - 2em);
				margin: 0 1em 1.5em 1em;
			}
			div.block {
				margin-bottom: 1.5em;
				&.iconic {
					position: relative;
					padding-left: 1.5em;
				}
				span:nth-of-type(1) {
					text-transform: uppercase;
				}
				span:nth-of-type(2) {
					color: var(--dim-color);
				}
				i.fab,
				i.fas {
					position: absolute;
					top: 0.2em;
					left: 0;
				}
			}
		}
	}
}
@media screen and (max-width: 600px) {
	#footer .flex-container {
		flex-direction: column;
		& > div {
			width: calc(100% - 2em);
		}
	}
}
/* #endregion */

#print-footer {
	margin-top: 1rem;
}

#warband-print-code {
	--code-color: #888;
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: var(--monospace-font);
	word-break: break-all;
	font-size: 2mm;
	color: var(--code-color);
	border-top: 0.05mm solid var(--code-color);
	padding-top: 1mm;
}

#loading-spinner {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	z-index: var(--z-index-loading-spinner);
	cursor: wait;
	i {
		display: block;
		position: fixed;
		font-size: 20vh;
		animation:
			spin 1.3s linear infinite,
			blend 5s ease-in-out infinite;
		animation-play-state: paused; /* start paused */
		will-change: transform, color;
	}
}

[data-points] {
	&[data-sign="1"] {
		color: #564;
		background-color: #ae9;
		&::before {
			content: "+";
		}
	}
	&[data-sign="-1"] {
		color: #c00;
		background-color: #fcc;
	}
	&[data-sign="0"] {
		color: #777;
		background-color: #e8e8e8;
		&::before {
			content: "\00b1"; /* plus-minus sign */
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes blend {
	0% {
		color: #83a6ee;
	}
	33% {
		color: #ffd500;
	}
	66% {
		color: #ff8e00;
	}
	100% {
		color: #83a6ee;
	}
}