@keyframes layer1 {
	from {
		opacity:0;
	    transform: rotate(-45deg);
		transform-origin: 60% 60%;
		background-size:150%;
	}
	to {
		opacity:1;
		transform: rotate(0);
		transform-origin: 50% 50%;
		background-size:100%;
	}
}
@keyframes layer2 {
	from {
		opacity:0;
	    transform: rotate(-45deg);
		transform-origin: 60% 60%;
		background-size:50%;
	}
	to {
		opacity:1;
		transform: rotate(0);
		transform-origin: 50% 50%;
		background-size:100%;
	}
}
@keyframes logo {
	from {
		top:50%;
	}
	to {
		top:40%;
	}
}
@keyframes loader {
	from {
		top:60%;
		opacity:0;
		transform:translate(-50%, -50%) scale(.8);
	}
	to {
		top:65%;
		opacity:1;
		transform:translate(-50%, -50%) scale(1);
	}
}
@keyframes status {
	from {
		top:70%;
		opacity:0;
		transform:translate(-50%, -50%) scale(.8);
	}
	to {
		top:75%;
		opacity:1;
		transform:translate(-50%, -50%) scale(1);
	}
}
@keyframes load {
	from {
		opacity:1;
	}
	to {
		opacity:.6;
	}
}
@font-face {
  font-family: Montserrat;
  src:
    local("Montserrat"),
    url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype"),
    url("../fonts/Montserrat-Regular.ttf") format("truetype");
}

body{
	color: #fff;
	font-feature-settings: 'clig' off, 'liga' off;
	font-family: Montserrat;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 2em;
	letter-spacing: -0.015em;
}
button{
	background:#eee;
	border-radius:1vh;
	padding:1.5vh 3vh;
	font-size:3vh;
	font-family:'Roboto', sans-serif;
	color:#000000;
	border:none;
	cursor:pointer;
	margin-left:1vw;
	margin-right:1vw;
	outline:1px solid #88f;
}
button:focus, button:hover, button.focus{
	background:#64a;
	-text-shadow:0 0 3px #000;
	box-shadow:0 0 10px #0060ff80;
	color:#fff;
}
#background{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100vw;
	height:100vh;
	background: #101;
	background-image:url('background.jpg');
	background-size:cover;
	background-position:center;
	z-index:-1;
}
#logo{
	z-index:10;
	position:fixed;
	width:50vw;
	max-width:50vh;
	height:50vw;
	max-height:50vh;
	top:50%;
    left:50%;
    transform:translate(-50%, -50%);
	animation:1.5s ease-in-out 3s logo;
	animation-fill-mode:forwards;
}
#logo #layer1{
	width:100%;
	height:100%;
	background:url('TVZone.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
	animation: .7s cubic-bezier(0, 0, 0.3, 1.5) layer1;
}
#logo #layer2{
	width:100%;
	height:100%;
	background:url('TVZone.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
	animation: .7s cubic-bezier(0, 0, 0.3, 1.5) layer2;
}
#loader{
	position:fixed;
	width:50vw;
	max-width:50vh;
	height:1vw;
	max-height:1vh;
	top:60%;
    left:50%;
	opacity:0;
	transform:translate(-50%, -50%) scale(.5);
	animation:1.5s ease-in-out 3s loader, 1s ease-in-out 4.5s infinite alternate load;
	animation-fill-mode:forwards;
	background:#888;
	border-radius:1vw;
	overflow:hidden;
	border:1px solid #000;
}
#load{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:0;
	transition:all .5s ease-out;
	background:linear-gradient(45deg, #a5f 0%, #55f 100%);
	border-radius:1vw;
}
#status{
	position:fixed;
	width:90vw;
	top:60%;
    left:50%;
	opacity:0;
	transform:translate(-50%, 0) scale(.5);
	animation:2s ease-in-out 4s status, 1s ease-in-out 6s infinite alternate load;
	animation-fill-mode:forwards;
	font-size:5vh;
	text-align:center;
}
#outerPortal{
	margin:0;
	padding:0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	border:0;
	display:none;
}
#innerPortal{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:1;
	transition:none;
}
#innerPortal.hidden{
	position:relative;
	right:initial;
	bottom:initial;
	width:0;
	height:0;
	transition: none;
	opacity:.5;
}

#main_player{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100vw;
	height:100vh;
	background:#000;
}

@media(max-aspect-ratio: 1000/1000) {
	#status{
		font-size:5vw;
	}
}
@media (orientation:portrait){
    button{
    	border-radius:1vw;
    	padding:2vw 5vw;
    	font-size:5vw;
    	min-width:70vw;
    	margin-bottom:3vw;
    }
}