@font-face {
  font-family: 'Inter';
  src:  url('fonts/Inter-Medium.woff2') format('woff2'),
        url('fonts/Inter-Medium.woff') format('woff');
}

body {
	background-color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	color: white;
	font-family: 'Inter';
	-moz-osx-font-smoothing: grayscale;
}

#info {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
}

.coming-soon {
	margin: 0;
	padding: 18px 0 0;
	text-align: center;
	color: #EDC914;
	font-family: 'League Gothic', sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 2rem;
}

#lottie {
	background-color: #000000;
	width: 100%;
	height: calc(100vh - 60px);
	height: calc(100dvh - 60px);
	display: block;
	overflow: hidden;
	transform: translate3d(0,0,0);
	text-align: center;
	opacity: 1;
}


@media only screen and (min-width: 600px)  {
	.coming-soon {
		font-size: 2.4rem;
	}
	
	#lottie {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}
}

.fade-in {
	opacity: 0;
	-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
	  -moz-animation: fadein 0.5s; /* Firefox < 16 */
	   -ms-animation: fadein 0.5s; /* Internet Explorer */
		-o-animation: fadein 0.5s; /* Opera < 12.1 */
		  animation: fadein 0.5s;

	-webkit-animation-fill-mode:forwards;
	 -moz-animation-fill-mode:forwards;
	  -ms-animation-fill-mode:forwards;
	   -o-animation-fill-mode:forwards;
		  animation-fill-mode:forwards;

	-webkit-animation-delay: 1.3s;
	 -moz-animation-delay: 1.3s;
	  -ms-animation-delay: 1.3s;
	   -o-animation-delay: 1.3s;
		  animation-delay: 1.3s;
}

@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1;}
}