@font-face {
	font-family: "grotesk";
	font-weight: bold;
	font-display: swap;
	src: url(../assets/fonts/akzidenzgrotesk.ttf) format('truetype')
}

@font-face {
	font-family: "futura0";
	font-weight: bold;
	font-display: swap;
	src: url(../assets/fonts/FUTURAB_0.TTF) format('truetype')
}

@font-face {
	font-family: "robotoblack";
	font-weight: bold;
	font-display: swap;
	src: url(../assets/fonts/Roboto-Medium.ttf) format('truetype')
}

@font-face {
	font-family: "futurah";
	font-weight: bold;
	font-display: swap;
	src: url(../assets/fonts/futurah.ttf) format('truetype')
}

@font-face {
	font-family: "futuramd";
	font-weight: bold;
	font-display: swap;
	src: url(../assets/fonts/ftramd.ttf) format('truetype')
}

@font-face {
	font-family: "bebas";
	font-weight: normal;
	font-display: swap;
	src: url(../assets/fonts/Bebas-Regular.otf) format('opentype')
}

html {
	height: 100%;
	width: 100%;
}

body {
	background: black;
	color: white;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	text-align: center;
}

canvas {
	margin: 0;
	padding: 0;
	/* Virtual full-window size; visual scaling handled in JS (letterbox). */
	outline: none;
	border: none;
	background: #000;
}

video {
	margin: 0;
	padding: 0;
	background: #000;
}

#preloaderLayout {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	font-size: 145%;
	background-color: rgb(196, 9, 9);
	color: rgb(227, 227, 227);
	align-items: center;
	justify-content: center;
	text-shadow: 3px 3px 3px #000000, 4px 9px 6px #ffcb03, 6px 6px 9px #000000, -1px -4px 4px #ff0909;


}

@keyframes mymove {
	50% {
		transform: rotate(36deg);
	}
}



.preloaderLayout {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.zoomOut {
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes zoomOut {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	100% {
		opacity: 0;
	}
}

@keyframes zoomOut {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}

	100% {
		opacity: 0;
	}
}