:root {
	--console-width: 100vw;
	--console-height: calc(var(--console-width) * 9 / 16);
	--console-top: calc((100vh - var(--console-height)) / 2);
	--console-left: 0;

	--console-px-width: 1920;
	--console-px-height: 1080;
}

@media (min-aspect-ratio: 16/9) {
	:root {
		--console-height: 100vh;
		--console-width: calc(var(--console-height) * 16 / 9);
		--console-left: calc((100vw - var(--console-width)) / 2);
		--console-top: 0;
	}
}

@font-face {
	font-family: 'ChicagoFLF';
	src: url('ChicagoFLF.woff2') format('woff2'),
			url('ChicagoFLF.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Retron2000';
	src: url('Retron2000.woff2') format('woff2'),
			url('Retron2000.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: ChicagoFLF, Arial, Helvetica, sans-serif;
}

.video-background {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
	visibility: visible;
	opacity: 1;
	transition: opacity 1s, visibility 1s;
	z-index: -100;
}

.hidden {
	display: none;
}

.fade-hidden {
	visibility: hidden !important;
	opacity: 0 !important;
	transition: opacity 1s, visibility 1s;
}

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	pointer-events: auto;
}

#button-back {
	background-image: url("back_off.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#button-back::after {
	/* image preload */
	position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
	content: url("back_on.png");
}
#button-back:hover {
	background-image: url("back_on.png");
}