html, body {
	background-color: #06000a;
	color: white;
	overflow-x: hidden;
}

#header {
	border: none;
	background-color: #ffffff00 !important;
}

#background-loop {
	position: fixed;
	z-index: -999;
	width: 800vw;
	height: 100vh;
	background-image: url(/user/themes/quark/images/bg_img/map_0.png);
	background-position: 0 0;
	background-size: auto 100%;
	background-repeat: repeat-x;
	animation: animatedBackground 180s linear infinite;
}

@keyframes animatedBackground {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-400vh);
	}
}

.profile-card-floating-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	align-items: center;
	margin-top: 4em;
}
@keyframes flyInLeft {
	0% {
		transform: translateX(100%) rotate(-30deg);
		opacity: 0;
	}
	100% {
		transform: translateX(0) rotate(-4deg) translateY(2em);
		opacity: 1;
		margin: 2em 1em;
	}
}
@keyframes flyInRight {
	0% {
		transform: translateX(-100%) rotate(-30deg);
		opacity: 0;
	}
	100% {
		transform: translateX(0) rotate(4deg) translateY(2em);
		opacity: 1;
		margin: 2em 1em;
	}
}
.profile-card-floating:nth-child(odd) a {
	transform: rotate(-4deg) translateY(2em);
	margin: 2em 1em;
	animation: flyInLeft 1s ease-in-out;
}
.profile-card-floating:nth-child(even) a {
	transform: rotate(4deg) translateY(2em);
	margin: 2em 1em;
	animation: flyInRight 1s ease-in-out;
}
.profile-card-floating a {
	display: inline-block;
	max-width: 35em;
	max-height: 12em;
	background: rgba(104, 3, 104, 0.3);
	display: flex;
	border: 0.15em solid rgb(129, 0, 155);
	border-radius: 2em;
	color: white;
	text-decoration: none;
	overflow: hidden;
}
.profile-card-floating:nth-child(odd) a {
	flex-direction: row;
}
.profile-card-floating:nth-child(even) a {
	flex-direction: row-reverse;
}
.profile-card-floating img {
	height: 13em;
	width: 13em;
	max-width: 13em;
	margin: -0.5em;
	transform: translateX(-1em);
}
.profile-card-floating:nth-child(odd) .img-container {
	border-right: 0.15em solid rgb(129, 0, 155);
	height: 12em;
	width: 10em;
	min-height: 12em;
	min-width: 10em;
	overflow: hidden;
}
.profile-card-floating:nth-child(even) .img-container {
	border-left: 0.15em solid rgb(129, 0, 155);
	height: 12em;
	width: 10em;
	min-height: 12em;
	min-width: 10em;
	overflow: hidden;
}
.profile-card-floating .text-blurb {
	padding: 0.25em 0.5em;
	font-size: 1.25em;
	overflow-y: scroll;
	width: 100%;
}
.profile-card-floating .text-blurb h3 {
	text-align: center;
	margin: 0.1em;
	color: white;
}
.profile-card-floating .text-blurb p {
	margin: 0.1em;
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.15em;
}

.treemenu li a {
	margin-left: 0;
	font-size: 1.5em;
}

.treemenu li.tree-empty > .toggler::before {
	content: '😸';
	font-size: 1.5em;
	padding-right: 0.5em;
}
.treemenu li.tree-empty > .toggler {
	opacity: 1;
}
.treemenu li {
	line-height: 1.2rem;
	margin: 0 0 1px;
	padding: 1em;
	font-size: 1.5em;
	background: none;
}
.treemenu li a, .treemenu li a.active, .treemenu li a:focus, .treemenu li a:visited {
	color: #af00ff !important;
}
.treemenu li a:hover {
	color: cyan !important;
}
.mobile-menu .button_container span {
	background: #af00ff;
}
.mobile-menu .button_container.active .top {
	background: cyan;
}
.mobile-menu .button_container.active .middle {
	background: cyan;
}
.mobile-menu .button_container.active .bottom {
	background: cyan;
}

.row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	justify-content: center;
}

.column {
	flex: 25%;
	max-width: 22%;
	padding: 0 4px;
}

.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}

@media screen and (max-width: 800px) {
	.column {
		flex: 50%;
		max-width: 45%;
	}
}

@media screen and (max-width: 600px) {
	.column {
		flex: 100%;
		max-width: 95%;
	}
}