/* latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../assets/fonts/Roboto-Regular-Latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../assets/fonts/Roboto-Regular-LatinExt.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Reddit Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../assets/fonts/RedditMono-Regular-Latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Reddit Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../assets/fonts/RedditMono-Regular-LatinExt.woff2) format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body, html {
	height: 100%;
	margin: 0;
	color: #fff;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Roboto', sans-serif;
	overflow: hidden;
}

.video-background, .image-background {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background: no-repeat;
	background-size: cover;
	opacity: 0;
	animation: backgroundFadeIn 4s forwards;
}
@keyframes backgroundFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
	color: white;
	background: rgba(0, 0, 0, 0.7);
	padding: 2em 4em;
	border-radius: 20px;
}
.content p {
	color: #b7ddff;
	font-family: 'Reddit Mono', sans-serif;
	font-weight: 400;
	font-size: 1.5em;
}
@media (max-width: 768px) {
	.content {
		padding: 1em 2em;
		border-radius: 10px;
	}
	.content p {
		font-size: 1em;
		min-width: 200px;
	}
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: right;
	color: white;
	padding: 10px 0;
	font-size: 0.8em;
	background: rgba(0, 0, 0, 0.5);
}
.footer > div {
	margin: 0 10px;
}
@media (max-width: 768px) {
	.footer {
		font-size: 0.6em;
	}
}