@font-face {
	font-family: comfortaa, monospace;
	src: /var/www/fonts/comfortaa/Comfortaa-Regular.ttf;
}

* {
	margin-top: 0.6em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.6em;
	box-sizing: border-box;
}

a {
	color: #89b4fa;
	text-decoration: none;
}

a:visited {
	color: #f38ba8;
}

body {
	background: url(bg.png) rgba(30,30,46,0.6);
	background-blend-mode: overlay;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	max-width: 90%;
	min-height: 90vh;
	color: #cdd6f4;
	font-family: comfortaa, monospace;
}

ul {
	list-style-type: none;
	background: rgba(49,50,68,0.6);
	text-align: center;
	padding: 0px;
	margin-top: 8px;
	margin-bottom: 2.4em;
	outline: 8px solid rgba(49,50,68,0.6);
}

li {
	display: inline-block;
	margin-inline: 3rem;
	padding: 0.4rem;
	font-size: 1.4rem;
}

li a {
	color: #94e2d5;
	text-shadow: 2px 2px 2px #1e1e2e;
	text-decoration: none;
}

li a:visited {
	color: #94e2d5;
}

li a:hover, li a:focus {
	background: #1e1e2e;
	outline: 8px solid #1e1e2e;
}

h1 {
	background: rgba(148,226,213,0.8);
	padding: 0.4em;
	outline: 8px solid rgba(49,50,68,0.6);
	margin-bottom: 16px;
	color: #f5c2e7;
	text-shadow: 2px 2px 2px #313244;
	font-size: 2.4rem;
	font-family: comfortaa, monospace;
}

h2 {
	background: rgba(148,226,213,0.8);
	padding: 0.4em;
	outline: 8px solid rgba(49,50,68,0.6);
	margin-top: 0px;
	margin-bottom: 6px;
	color: #f5c2e7;
	text-shadow: 2px 2px 2px #313244;
	font-size: 2rem;
	font-family: comfortaa, monospace;
}

h3 {
	background: rgba(49,50,68,0.6);
	padding: 0.6em;
	margin-top: 16px;
	margin-bottom: 0px;
	outline: 8px solid rgba(49,50,68,0.6);
	color: #cdd6f4;
	font-size: 1.6rem;
	text-shadow: 2px 2px 2px #1e1e2e;
	font-family: comfortaa, monospace;
}

p {
	background: rgba(49,50,68,0.6);
	margin-top: 16px;
	margin-bottom: 16px;
	outline: 8px solid rgba(49,50,68,0.6);
	padding-left: 1.2em;
	padding-right: 1.2em;
	color: #cdd6f4;
	font-size: 1.2rem;
	font-family: comfortaa, monospace;
}

.home {
	position: fixed;
	bottom: 4%;
	background: rgba(148,226,213,0.8);
	padding: 0.4rem;
	outline: 4px solid rgba(148,226,213,0.8);
	font-size: 1.4rem;
}

.home a {
	color: #f5c2e7;
	text-shadow: 2px 2px 2px #1e1e2e;
	text-decoration: none;
}

.home a:visited {
	color: #f5c2e7;
	text-shadow: 2px 2px 2px #1e1e2e;
}

.home a:hover, .home a:focus {
	background: #1e1e2e;
	outline: 8px solid #1e1e2e;
}

.animate {
	animation-name: bounce;
	position: absolute;
	z-index: -1;
	-webkit-animation: moveX 6s linear 0s infinite alternate, moveY 8s linear 0s infinite alternate;
	-moz-animation: moveX 6s linear 0s infinite alternate, moveY 8s linear 0s infinite alternate;
	-o-animation: moveX 6s linear 0s infinite alternate, moveY 8s linear 0s infinite alternate;
	animation: moveX 6s linear 0s infinite alternate, moveY 8s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
	from { left: 0; } to { left: calc(100% - 330px); }
}

@-moz-keyframes moveX {
	from { left: 0; } to { left: calc(100% - 330px); }
}

@-o-keyframes moveX {
	from { left: 0; } to { left: calc(100% - 330px); }
}

@keyframes moveX {
	from { left: 0; } to { left: calc(100% - 330px); }
}

@-webkit-keyframes moveY {
	from { top: 0; } to { top: calc(100% - 360px); }
}

@-moz-keyframes moveY {
	from { top: 0; } to { top: calc(100% - 360px); }
}

@-o-keyframes moveY {
	from { top: 0; } to { top: calc(100% - 360px); }
}

@keyframes moveY {
	from { top: 0; } to { top: calc(100% - 360px); }
}