/* RESET */
html, body {
	margin: 0;
	padding: 0;
	border: none;

	height: 100%;
	min-height: 100%;
}

h1, h5, p {
	margin: 0;
}

/* BODY */
body:before {
	content: "";
	height: 100%;
	width: 100%;
	z-index: -1;
	position: fixed;
	background-color: #1d1f30;
	background-image: linear-gradient(#1d1f30ff, #1d1f30cc),
					  url('/static_noise.gif');
}

/* HEADER */
header {
	position: fixed;

	width: 100%;
	height: 75px;
}

header::before {
	position: absolute;
	top: 0;
	width: 100%;
	height: 75px;

	backdrop-filter: blur(2px);

	content: '';

	z-index: -1;
}

header > div {
	margin: 5px 0 0 15px;

	font-size: 3em;
}
header > div > p {
	display: inline-block;
}
header > div > p.h-subtitle {
	margin-right: -15px;

	font-size: .7em;

	color: #eff0f6;
}
header > div > p.h-subtitle > a {
	color: #eff0f6;
	text-decoration: none;
}
header > div > p.h-subtitle > .dotto {
	margin-left: -5px;
}

header > div > p.h-title {
	position: relative;
}

header > div > p.h-title > a.h-name {
	color: #39ffba;
	text-shadow: 2px 2px #2dad86;

	font-weight: bold;
	text-decoration: none;
}

header > div > p.h-title > a.h-tld {
	position: absolute;
	right: 0;

	font-size: .4em;

	text-decoration: none;
	color: #ffee7a;
}

header > nav {
	display: inline-block;

	position: fixed;
	right: 10px;
	top: 10px;

	font-size: 1.5em;
}

header > a > .h-name {
	color: #39ffba;
	text-shadow: 2px 2px #2dad86;

	font-weight: bold;
}

header > nav > a {
	color: #01f7f7;
	text-shadow: 1px 1px #01a8ad;
	word-spacing: -7px;
	text-decoration: none;
}

header > nav > a:hover {
	text-decoration: underline;
}

header > nav > a:not(:last-child) {
	margin-right: 10px;
}

/* MAIN */
main {
	padding: 5em 1em 0 1em;
}

/* FOOTER */
footer {
	position: fixed;
	right: 1%;
	bottom: 0%;

	color: #ffee7a;
}

footer > p {
	font-size: 1em;
}