* {
	transition: background-color 0.1s linear, opacity 0.1s linear;
	font-family: 'Roboto Slab', serif;
	user-select: none;
	color: #000;
}

*:focus {
	outline: none;
}

a {
	margin: 0;
	cursor: pointer;
	color: #000;
	text-decoration: none;
	transition: color 0.1s linear, opacity 0.1s linear;
}

.row {
	display: table;
}

.row > * {
	display: table-cell;
}

.row.collapse {
	width: 100%;
}

@media only screen and (orientation: portrait) {
	.row.collapse > * {
		display: block;
		width: 100%;
	}

	.row.collapse > *:not(:last-child) {
		margin-bottom: 50px;
	}

	.decollapse {
		border-collapse: separate;
		border-spacing: 20px;
	}

	.decollapse > * {
		display: table-cell;
	}
}

.center { text-align: center; margin: auto; }
.right { text-align: right; }
.left { text-align: left; }
.bottom { vertical-align: bottom; }
.middle { vertical-align: middle }
.top { vertical-align: top }

.fade:hover {
	opacity: 0.8;
}

.glow {
	filter: drop-shadow(0 0 5px var(--highlight));
}

.glow-2 {
	filter: drop-shadow(0 0 8px var(--highlight)) drop-shadow(0 0 8px var(--highlight));
}

.glow-3 {
	filter: drop-shadow(0 0 5px var(--highlight)) drop-shadow(0 0 5px var(--highlight)) drop-shadow(0 0 5px var(--highlight));
}

html {
	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	margin: 0;
	margin-top: -10px;
}

.highlight {
	color: var(--highlight-dark);
}

.highlight-glow {
	color: var(--highlight-dark);
	text-shadow: 0 0 4px var(--highlight);
}

.text-red {
	color: var(--red);
}


.text-yellow {
	color: var(--yellow);
}

.text-green {
	color: var(--green);
}

.text-white {
	color: var(--white);
}

.text-black {
	color: var(--black);
}

p, td {
	margin: 0;
	cursor: default;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.8rem;	
	margin-bottom: 0.8rem;
	cursor: default;	
}

.console {
	margin: 5px;
	padding: 5px;
	background-color: black;
	width: calc(100% - 20px);
	color: #FFF;
}

img.icon {
	filter: drop-shadow(1px 2px 1px black);
	width: 100%;
}

.icon-container {
	position: relative;
}

.optional img.icon[src*='missing'] {
	display: none;
}

.colored {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
	mix-blend-mode: color;

	mask-size: 100%;
	-webkit-mask-size: 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.mt-1, .my-1, .m-1 { margin-top: 	calc(var(--marg) * 1); }
.mb-1, .my-1, .m-1 { margin-bottom: calc(var(--marg) * 1); }
.mr-1, .mx-1, .m-1 { margin-right: 	calc(var(--marg) * 1); }
.ml-1, .mx-1, .m-1 { margin-left: 	calc(var(--marg) * 1); }

.mt-2, .my-2, .m-2 { margin-top: 	calc(var(--marg) * 2); }
.mb-2, .my-2, .m-2 { margin-bottom: calc(var(--marg) * 2); }
.mr-2, .mx-2, .m-2 { margin-right: 	calc(var(--marg) * 2); }
.ml-2, .mx-2, .m-2 { margin-left: 	calc(var(--marg) * 2); }

.mt-3, .my-3, .m-3 { margin-top: 	calc(var(--marg) * 3); }
.mb-3, .my-3, .m-3 { margin-bottom: calc(var(--marg) * 3); }
.mr-3, .mx-3, .m-3 { margin-right: 	calc(var(--marg) * 3); }
.ml-3, .mx-3, .m-3 { margin-left: 	calc(var(--marg) * 3); }

.mt-4, .my-4, .m-4 { margin-top: 	calc(var(--marg) * 4); }
.mb-4, .my-4, .m-4 { margin-bottom: calc(var(--marg) * 4); }
.mr-4, .mx-4, .m-4 { margin-right: 	calc(var(--marg) * 4); }
.ml-4, .mx-4, .m-4 { margin-left: 	calc(var(--marg) * 4); }

.mt-5, .my-5, .m-5 { margin-top: 	calc(var(--marg) * 5); }
.mb-5, .my-5, .m-5 { margin-bottom: calc(var(--marg) * 5); }
.mr-5, .mx-5, .m-5 { margin-right: 	calc(var(--marg) * 5); }
.ml-5, .mx-5, .m-5 { margin-left: 	calc(var(--marg) * 5); }

.mt-a, .my-a, .m-a { margin-top: 	auto; }
.mb-a, .my-a, .m-a { margin-bottom: auto; }
.mr-a, .mx-a, .m-a { margin-right: 	auto; }
.ml-a, .mx-a, .m-a { margin-left: 	auto; }

.pt-1, .py-1, .p-1 { padding-top: 	calc(var(--marg) * 1); }
.pb-1, .py-1, .p-1 { padding-bottom: calc(var(--marg) * 1); }
.pr-1, .px-1, .p-1 { padding-right: 	calc(var(--marg) * 1); }
.pl-1, .px-1, .p-1 { padding-left: 	calc(var(--marg) * 1); }

.pt-2, .py-2, .p-2 { padding-top: 	calc(var(--marg) * 2); }
.pb-2, .py-2, .p-2 { padding-bottom: calc(var(--marg) * 2); }
.pr-2, .px-2, .p-2 { padding-right: 	calc(var(--marg) * 2); }
.pl-2, .px-2, .p-2 { padding-left: 	calc(var(--marg) * 2); }

.pt-3, .py-3, .p-3 { padding-top: 	calc(var(--marg) * 3); }
.pb-3, .py-3, .p-3 { padding-bottom: calc(var(--marg) * 3); }
.pr-3, .px-3, .p-3 { padding-right: 	calc(var(--marg) * 3); }
.pl-3, .px-3, .p-3 { padding-left: 	calc(var(--marg) * 3); }

.pt-4, .py-4, .p-4 { padding-top: 	calc(var(--marg) * 4); }
.pb-4, .py-4, .p-4 { padding-bottom: calc(var(--marg) * 4); }
.pr-4, .px-4, .p-4 { padding-right: 	calc(var(--marg) * 4); }
.pl-4, .px-4, .p-4 { padding-left: 	calc(var(--marg) * 4); }

.pt-5, .py-5, .p-5 { padding-top: 	calc(var(--marg) * 5); }
.pb-5, .py-5, .p-5 { padding-bottom: calc(var(--marg) * 5); }
.pr-5, .px-5, .p-5 { padding-right: 	calc(var(--marg) * 5); }
.pl-5, .px-5, .p-5 { padding-left: 	calc(var(--marg) * 5); }

.rel { position: relative; }
.abs { position: absolute; }

.w-0 { width: 0 }
.w-25 { width: 25% }
.w-33 { width: 33% }
.w-50 { width: 50% }
.w-66 { width: 66% }
.w-75 { width: 75% }
.w-100 { width: 100% }

.h-0 { height: 0 }
.h-25 { height: 25% }
.h-50 { height: 50% }
.h-75 { height: 75% }
.h-100 { height: 100% }

.h-1 { height: calc(var(--marg) * 1); }
.h-2 { height: calc(var(--marg) * 2); }
.h-3 { height: calc(var(--marg) * 3); }
.h-4 { height: calc(var(--marg) * 4); }
.h-5 { height: calc(var(--marg) * 5); }

.popup {
	overflow-y: hidden;
	transition: height 1s ease-in-out, background-color 0.2s linear;
}

.popup.moving {
	background-color: #0002;
}

.box {
	--factor: 0.35;
	width: 100%;
	min-height: calc(100% - 40px);
	margin: 0;
	padding: 20px 0;
	position: relative;
}

.bg {

	margin-top: -20px;
	z-index: -1;
	position: fixed;
	height: calc(100vh + 20px);
	width: 100vw;

	box-shadow: 0 -70vh 70vh #000A inset;
	background-image: url('/assets/img/bg.png');
	background-repeat: repeat;
	background-size: calc(1462px * var(--factor)) calc(1520px * var(--factor));

	filter: brightness(1);

}

.container {

	padding: 15px;
	width: calc(100% - 20px * 2);
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--bg);
	/* background-image: linear-gradient(transparent 80%, #0008); */
	box-shadow: 0 3px 8px #000D;
	display: table;
	
}

button {
	
	border: none;
	padding: 5px;
	outline: 0;
	transition: background-color 0.15s linear, opacity 0.2s linear;
	
}

table {
    border: none;
    border-collapse: collapse;
}

td {
    border: none;
}

form {
	margin: 0;
}

input {
	width: calc(100% - 100px);
	padding: 10px;
	border: none;
	outline: none;
	-webkit-appearance: none;
}

input[type=text], input[type=password] {
	box-shadow: 2px 2px 2px #000D inset;
}

input:focus {
	box-shadow: none;
}

input[type=submit] {
	box-shadow: 0 3px 2px #000A;
	background: var(--highlight);
}

input[type=submit]:hover {
	box-shadow: 0 2px 2px #000A;
	background: var(--highlight-dark);
}

input.grow {
	width: initial;
	min-width: 100px;
	max-width: 500px;
	background-color: var(--highlight);
}

@keyframes slide-up {
	from {}
	to 	 {	transform: translate(0, 50px); }
}

.logins {
	background-color: var(--alternate-bg);
	padding: 8px 0;
	filter: drop-shadow(0 10px 8px #000E);
	width: 100%;
	animation: slide-up 0.5s forwards cubic-bezier(0, 0, 0.52, 1.49);
}

.login:focus {
	background-color: #DDD;
}

.login-icon {
	width: 300px;
	height: 300px;
}

.login-icon.small {
	width: 200px;
	height: 200px;
	margin-top: 100px;
}

.login-icons {
	width: 800px;
	margin: 0 auto;
}

.red {

	background-color: var(--red-light);
	border: 2px var(--red) solid;

}

.bubble {

	padding: 8px;
	margin: 0 auto;
	max-width: 600px;
	/* border-radius: 10px; */	
	
}

.banner {

	--inset: 10px;
	--length: 70px;
	--depth: 20px;

	margin-left: auto;
	margin-right: auto;

	position: relative;

	text-align: center;
	background-color: var(--alternate-bg-darker);
	color: var(--highlight);
	padding-top: 12px;
	padding-bottom: 7px;

	-webkit-clip-path: polygon(
		100% 0,
		calc(100% - var(--inset)) 40%,
		100% 80%,
		calc(100% - var(--length)) 80%,
		calc(100% - var(--length)) 100%,
		calc(var(--length)) 100%,
		calc(var(--length)) 80%,
		0 80%,
		var(--inset) 40%,
		0% 0%,
		calc(var(--length) + var(--depth) * 2) 0%,
		calc(var(--length) + var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 0);

	clip-path: polygon(
		100% 0,
		calc(100% - var(--inset)) 40%,
		100% 80%,
		calc(100% - var(--length)) 80%,
		calc(100% - var(--length)) 100%,
		calc(var(--length)) 100%,
		calc(var(--length)) 80%,
		0 80%,
		var(--inset) 40%,
		0% 0%,
		calc(var(--length) + var(--depth) * 2) 0%,
		calc(var(--length) + var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 0);

}

.banner, .banner::after {
	transition: clip-path 0.2s linear;
}

.banner:hover {
	--length: 65px;
	--depth: 15px;
}

.banner.highlight {
	color: var(--alternate-bg);
	background-color: var(--highlight-darker);
}

.banner.highlight::after {
	background-color: var(--highlight-dark);
}

.banner::after {
	z-index: -1;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--alternate-bg);

	-webkit-clip-path: polygon(
		100% 0,
		calc(100% - var(--inset)) 40%,
		100% 80%,
		calc(100% - var(--depth) - var(--length)) 80%,
		calc(100% - var(--length)) 100%,
		calc(var(--length)) 100%,
		calc(var(--depth) +var(--length)) 80%,
		0 80%,
		var(--inset) 40%,
		0% 0%,
		calc(var(--length) + var(--depth) * 2) 0%,
		calc(var(--length) + var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 0);

	clip-path: polygon(
		100% 0,
		calc(100% - var(--inset)) 40%,
		100% 80%,
		calc(100% - var(--depth) - var(--length)) 80%,
		calc(100% - var(--length)) 100%,
		calc(var(--length)) 100%,
		calc(var(--depth) +var(--length)) 80%,
		0 80%,
		var(--inset) 40%,
		0% 0%,
		calc(var(--length) + var(--depth) * 2) 0%,
		calc(var(--length) + var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 10%,
		calc(100% - var(--length) - var(--depth) * 2) 0);
}

.bar {
	/* border-radius: 5px; */
	height: 10px;	
	width: 80%;
	margin: 4px auto;
	background-color: rgba(0, 0, 0, 0.2);
}

.bar > div {
	/* border-radius: 5px; */
	height: 100%;
}

.bar.health > div {
	background-color: var(--red);
}

.bar.xp > div {
	background-color: var(--highlight-light);
}

.mirror {
  transform: scaleX(-1);
}

.feedback {
}

@keyframes flash {
	from {
		color: var(--highlight);
		text-shadow: 0 0 2px var(--highlight-light);
	}
	to {
		text-shadow: none;
		color: initial;
	}
}

.feedback.flashed {
	animation: flash forwards 0.5s linear;
}

.darken {
	background-color: #00000016;
	box-shadow: 2px 4px 6px #0004 inset;
	/*
	background-color: var(--alternate-bg);
	color: white;
	*/
}

.hidden {
	display: none !important;
}

.diagram {
	border-collapse: separate;
	border-spacing: 5px;
	table-layout: fixed;
	height: 700px;
	width: 100%;
}

.diagram td {
	width: 50% !important;
	height: 400px !important;
}

.speech {

	--arrow: 16px;
	--color: var(--alternate-bg);

	text-align: center;
	position: relative;

	background-color: var(--color);
	color: var(--highlight);
	padding: 10px;

	border-radius: 15px;

}

.speech::after {

	content: '';
	position: absolute;
	left: calc(100% - var(--arrow) * 2 - 85px);
	top: 100%;

	border-bottom: calc(var(--arrow) * 0.7) transparent solid;
	border-left: calc(var(--arrow)) transparent solid;

	border-top: calc(var(--arrow) * 0.7) var(--color) solid;
	border-right: calc(var(--arrow)) var(--color) solid;

}

.speech.right::after {

	border-bottom: calc(var(--arrow) * 0.7) transparent solid;
	border-right: calc(var(--arrow)) transparent solid;

	border-top: calc(var(--arrow) * 0.7) var(--color) solid;
	border-left: calc(var(--arrow)) var(--color) solid;

}