/*@font-face{
	font-family: "SANDRE";
	src:url("../font/SANDRE-Regular.otf");
}
@font-face{
	font-family: "Street";
	src:url("../font/Street_Blues.ttf");
}*/
@font-face{
	font-family: "Geo";
	src:url("../font/GeosansLight.ttf");
}



html, body{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background: #220;
	color:#fff;
	font-family: Arial;
	background-image:url("../media/screen.jpg");
	background-size: fit;
}

.shake{
    animation: shake 2s infinite;
}
h1{
	font-family: "Geo";
	font-size: 60px;
	transition:all 0.6s ease;
}
h1:hover{
	transform:scale(1.1);
	transition:all 0.6s ease;
	cursor:default;
}
a{
	text-decoration: none;
	color: #fff;
}
a:hover{
	opacity: 0.5;
}

video{
	object-fit: cover;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	z-index: 0;
	position: absolute;
	top: 0;
	left: 0;
}

#background2{
	opacity: 0;
}

.screen{
	width: 100%;
	height: 100%;
	padding: 5%;
	box-sizing:border-box;
	background-color: rgba(0,0,0,0.1);
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	overflow: auto;
}

.screen .center{
	position: absolute;
	display: block;
	background-color: rgba(255,255,255,0.2);
	top: 50%;
	left: 50%;
	-webkit-transform-origin: center center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding:5% 10%;
}

.screen .center p, .screen .link{
	display: block;
	border: 1px solid #fff;
	padding:20px;
	opacity: 0.8;
	transition: all 0.4s ease;
	font-size: 20px;
	background: rgba(255,255,255,0);
}

.screen .center p:hover, .screen .center p:active, .screen .link:hover{
	opacity: 1;
	transition: all 0.4s ease;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
	background: rgba(255,255,255,0.8);
	color: #653;
}

.settings, .credits, .play{
	background: rgba(0,0,0,0.5);
}

.active{
	top:0;
	filter:blur(0);
	transition: all 0.8s ease;
}

.inactive{
	top:100%;
	filter:blur(20px);
	transition: all 0.8s ease;
}

.visible{
	opacity: 1;
	filter:blur(0);
	transition: all 0.5s ease;
    height: auto;
    min-height: 50px;
    clear: both;
}
.invisible{
	opacity: 0;
	filter:blur(20px);
	transition: all 0.5s ease;
    height: 0;
    overflow: hidden;
}

input[type="checkbox"]{
	display: none;
}
input[type="checkbox"] +label{
	margin:30px; 
	height: 20px;
	border: 2px solid rgba(255,255,255,0.8);
	background-color: rgba(255,255,255,0.1);
	padding: 20px;
	transition:all 0.3s ease;
} 
input[type="checkbox"]:checked +label{
	border: 2px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.8);
	transition:all 0.3s ease;
}

input[type="checkbox"] +label:hover, #advanced_settings input[type="checkbox"]+label:hover{
    background-color: rgba(255,255,255,0.5);
    transition: all 0.3s ease
}

#settings p, #credits p, #play p{
	float: left;
	margin:30px;
	font-size: 20px;
}
#settings .link, #credits .link{
	clear: both;
	float: left;
	margin:30px;
}

#credits p{
	font-size: 20px;
}

.loading{
	display: block;
	background: rgba(255,255,255,0.5);
	height: 10px;
	animation: load 3s;
}
.loading2{
	display: block;
	background: rgba(255,255,255,0.5);
	height: 10px;
	animation: load2 3s;
}


@keyframes load{
	0%{width: 0%;opacity: 1;}
	30%{opacity: 0.5;}
	60%{opacity: 1;}
	90%{opacity: 0.5;}
	100%{width: 80%;opacity: 1}
}

@keyframes load2{
	0%{width: 0%;opacity: 1;}
	30%{opacity: 0.5;}
	60%{opacity: 1;}
	90%{opacity: 0.5;}
	100%{width: 80%;opacity: 1}
}

@keyframes hyper{
    0%{transform: scale(1)}
    5%{transform: scale(1.5); filter: blur(7px)}
    10%{transform: scale(1)}
    15%{transform: scale(1.3); filter: blur(3px)}
    25%{transform: scale(1); filter: blur(5px)}
    35%{transform: scale(1.2)}
    100%{transform: scale(1)}
}

.rainbow{
    animation: rainbow 0.5s infinite !important;
}

@keyframes rainbow{
    0%{filter: hue-rotate(0deg) saturate(150%)}
    50%{filter: hue-rotate(180deg) saturate(200%)}
    100%{filter: hue-rotate(0deg) saturate(150%)}
}

@keyframes shake{
    0%{transform: scale(1)}
    50%{transform: scale(1.05); filter: blur(4px) grayscale(80%)}
    100%{transform: scale(1)}
}

#advanced_settings input[type="checkbox"]+label, #advanced_settings2 input[type="checkbox"]+label{
	margin: 20px; 
	height: 15px;
	font-size: 10px;
	line-height: 5px;
	border: 2px solid rgba(255,255,255,0.8);
	background-color: rgba(255,255,255,0.1);
	padding: 20px;
	transition:all 0.3s ease;
}

#advanced_settings input[type="checkbox"]:checked +label, #advanced_settings2 input[type="checkbox"]:checked +label{
	border: 2px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.8);
	transition:all 0.3s ease;
}
#advanced_settings p, #advanced_settings2 p{
	font-size: 16px;
} 

#hd{
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 40px;
	font-family: "Geo";
	opacity: 0.5;
	z-index: 2;
}

#twitter-widget-0{
	display: block;
	position: absolute!important;
	bottom: 50px;
	left: 50px;
	font-size: 20px;
	font-family: "Geo"!important;
	opacity: 0.3;
	z-index: 5;
	transition:all 0.4s ease;
	outline: none;
	background: none!important;
}
#twitter-widget-0:hover{
	opacity: 1;
	transition:all 0.4s ease;
}
#twitter{
	opacity: 0;
}