@font-face{
	font-family: "Roboto";
	src:url(../fonts/roboto-bold.ttf);
}

* {
	cursor: url(../images/cursors/cyan_red.png), auto !important;
	font-family: "Roboto";
	user-select: none;
}

::selection{
	background:#ffd3b6;
	color:#333;
}

input:focus{
	outline:none;
}

body{
	color:#1eb2a6;
	background:#a8e6cf;
}

section{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom:0px;
	text-align: center;
	display: none;
	background:#ffd3b6;
}

section#menu #name{
	position: absolute;
	right: 10px;
	top:10px;
	 transform: rotate(4deg);
    font-size: 2em;
    transform-origin: left;
}

button#back{
	position: absolute;
	transform: rotate(-2deg);
	left: 70px;
	top: 70px;
	padding: 10px 20px 10px 20px;
}

#highscores #table{
	width: 450px;
    margin: auto;
    border-radius: 20px;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 2em;
}

section#menu{
	background:#a8e6cf;
}

section#game #view{
	width:100%;
	height:100%;
}

section#game{
	background:none;
}

section#background2{
	background:url(../images/background/illustration1.jpg);
	background-size:cover;
}

section#background1{
	background:url(../images/background/illustration2.png);
	background-size:cover;
}


button{
	background:#fdffab;
	padding:20px;
	border:none;
	border-radius: 20px;
	font-size: 3em;
	color:#1eb2a6;
	transition: 1s padding;
	text-transform: uppercase;
}

h2{
	text-transform: uppercase;
}

section p{
	margin:30px;
}

.list .input{
	display: none;
}

.list .input.current{
	display: inline;
}

.input{
	background:white;
	padding:10px;
	border-radius: 10px;
	font-size: 2em;
	margin:10px;
}

.button{
	background:#fdffab;
	padding:10px;
	border-radius: 10px;
	font-size: 2em;
}

.button:hover, p.current .button{
	background: #d4f8e8;
}

label{
	font-size:2em;
}

button#help{
	position: absolute;
	top:100px;
	right: 100px;
	transform: rotate(20deg);
}

button:focus{
	outline: none;
}

button:hover, p.current button{
	background: #d4f8e8;
	padding-left: 50px;
	padding-right: 50px;
}

h1{
	color: #ffa34d;
	font-size: 5em;
	-webkit-text-stroke:2px #d4f8e8;
	margin-top:0px;
}

#logo{
	margin-top:20px;
}

#logo img{
	height: 100px;
}


h2{
	font-size: 4em;
	color: #f67575;
}

@keyframes message_animation{
	0%{
		transform: rotate(0deg);
	}
	33%{
		transform: rotate(-10deg) scale(1.1);
	}
	66%{
		transform: rotate(10deg);
	}
	100%{
		transform: rotate(0deg);
	}
}

#message{
	position: fixed;
	left: 0px;
	top:0px;
	right: 0px;
	bottom: 0px;
	background: rgba(255, 163, 77, 0.2);
	display: none;
}

#message #notification{
	position: absolute;
	z-index: 99;
	position: fixed;
	top: 20%;
	width:400px;
	left:50%;
	margin-left:-200px;
	background:#ffa34d;
	border-radius:40px;
	text-align: center;
	padding:20px;
	font-size:2em;
	color: #fdffab;
	box-sizing: border-box;
	animation: .5s message_animation;
}

#message button{
	padding:10px;
	font-size:1em;
	width: 100%;
	box-sizing: border-box;
}

#message input{
	padding:10px;
	border:none;
	border-radius:20px;
	font-size: 1.2em;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

#message button:focus{
	color:red;
}

button#mute, button#home{
	z-index: 9999;
	position: fixed;
	padding:4px;
	font-size: 1em;
	border-radius: 100%;
	top:10px;
	display: none;
	background:white;
	border:1px solid black;
}

button#mute img, button#home img{
	vertical-align: bottom;
}

button#mute{
	left: 10px;
}

button#home{
	right: 10px;	
}

section{
	overflow: hidden;
}

section#menu #keys{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom:0px;
	z-index: -1;
}

@keyframes key_animation{
	0%{
		transform: rotate(0deg);
	}
	33%{
		transform: rotate(-10deg);
	}
	66%{
		transform: rotate(10deg);
	}
	100%{
		transform: rotate(0deg);
	}
}

section#menu #keys span{
	padding:5px;
	color:#ffa34d;
	background-color:#eee;
	border-radius: 4px;
	position: absolute;
	left: 300px;
	top:300px;
	animation: 3s key_animation infinite;
	font-size: 1em;
	text-transform: uppercase;
	opacity: .2;
	width:90px;
}

section#menu #keys span div:first-child{
	padding-top:20px;
	padding-bottom:80px;
	font-size:2em;
	background-image:url(../images/ui/award.png);
	background-size:90px 120px;
	background-repeat: no-repeat;
}

section#game #info{
	position: absolute;
	left: -2px;
	top:30%;
	width:100px;	
	background-color: white;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding:4px;
	padding-right: 200px;
	border:2px inset black;
	background-color: #333;
	color:white;
	box-shadow: 4px 2px 5px #222;
	font-size: .8em;
}

pre{
	display: none;
	position: fixed;
	right: 10px;
	left: 45%;
	color: black;
	font-family: monospace;
	color: #ddd;
}

section#game #info div{
	border:2px outset black;
	margin:4px;
	font-size: 1.4em;
	background:linear-gradient(20deg, black,#333);
}

section#game #info div.big{
	font-size: 3em;
}

section#game #info div.small{
	font-size: .8em;
	background:black;
}

section#game #info .inner{
	position: relative;
}

section#game #info #graph{
	position: absolute;
	left: 50px;
	top:50px;
	width:200px;
	height:200px;
}

section#background_video{
	filter: sepia(1);
}


section#background_video video{
	min-width:100%;
	min-height: 100%;
}

section#game #info #time{
	position: absolute;
    width: 200px;
    left: 100px;
    top:4px;
    box-sizing: border-box;
    font-size: 2.3em;
}

button#mute img{
	display: block;
}

button#mute img.mute{
	display: none;
}

button#mute.mute img{
	display: none;
}

button#mute.mute img.mute{
	display: block;
}

#keyboard{
	font-size: 1.5em;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	/*background:rgba(0,0,0,0.1);*/
	padding:10px;

}

#keyboard div{
	display: flex;
	justify-content: center;
}

#keyboard div:nth-child(1){
	padding-left: 0em;
}

#keyboard div:nth-child(2){
	padding-left: 2em;
}

#keyboard div:nth-child(3){
	padding-left: 0em;
}



#keyboard span{
	width:2.5em;
	height:2.5em;
	background:#222;
	color:white;
	border:6px outset #333;
	text-transform: uppercase;
	display: inline-block;
	margin:3px;
	border-radius: 2px;
	padding-top: 2px;
	box-sizing: border-box;
}




#keyboard span:active{
	padding-top: 4px;
	color:#ddd;
	background:#444;
	border:6px inset #333;
}

#keyboard span.correct{
	background:linear-gradient(green,lime);
	border:6px inset green;
}

#keyboard span.wrong{
	background:linear-gradient(red,orange);
	border:6px inset red;
}

@keyframes current_animation{
	0%{
		background-color:dodgerblue;
	}
	50%{
		background-color:navy;
	}
	100%{
		background-color:dodgerblue;
	}
}

#keyboard span.current{
	color:white;
	border-color:navy;
	animation: 5s current_animation infinite;
}









#keyboard.style_kids{
	background: rgba(255,255,255,0.9);
}

#keyboard.style_kids span{
	border-radius: 10px;
	border:4px solid black;
	border-color: black !important;
	background:white;	
	color:black !important;
	font-weight: bold;
}

#keyboard.style_kids span.l0{
	background-color:#ee3242;
}

#keyboard.style_kids span.l1{
	background-color:#faa51d;
}

#keyboard.style_kids span.l2{
	background-color:#6fc17a;
}

#keyboard.style_kids span.l3{
	background-color:#00b0eb;
}

#keyboard.style_kids span.r0{
	background-color:#5984c0;
}

#keyboard.style_kids span.r1{
	background-color:#ee3242;
}

#keyboard.style_kids span.r2{
	background-color:#96d6f5;
}

#keyboard.style_kids span.r3{
	background-color:#bfe0bf;
}

#keyboard.style_kids span.current{
	transform: scale(1.3);
	animation: none;
	transition: .5s;
}

#keyboard.style_kids span:not(.current){
	opacity: .4;
}








#keyboard.style_mac{
	background: #eaeaea;
}

#keyboard.style_mac span{
	border-radius: 10px;
	border:2px solid #cdcdcd;
	border-color: #cdcdcd !important;
	background:white;	
	color:#8e8e8e !important;
	font-weight: bold;
	padding-top: .5em !important;
}



#keyboard.style_mac span:active{
	padding-top: 4px;
	color:#ccc;
	background:#eee;
	border:3px solid #cdcdcd;
}

#keyboard.style_mac span.correct{
	background:hsl(125, 100%, 90%);
	border:3px solid #cdcdcd;
}

#keyboard.style_mac span.wrong{
	background:hsl(0, 100%, 90%);
	border:3px solid #cdcdcd;
}

#keyboard.style_mac span.current{
	background:hsl(205, 100%, 60%);
	color: #eee !important;
	border-color: white !important;
	animation: none;
}





#keyboard.style_cbb{
	background: rgba(255,255,255,0.9);
}

#keyboard.style_cbb span{
	border-radius: 0px;
	margin:2px;
	border:4px outset #fff;
	background:white;	
	color:black !important;
	font-weight: bold;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent !important;
}

#keyboard.style_cbb span:active{
	padding-top: 4px;
	color:#ddd;
	background:white;
	border-color:white !important;
}




#keyboard.style_cbb div:nth-child(2) span.l0{
	background-image:url(../images/keyboard/Qualm.png);
}

#keyboard.style_cbb div:nth-child(2) span.l1{
	background-image:url(../images/keyboard/Welle.png);
}

#keyboard.style_cbb div:nth-child(2) span.l2{
	background-image:url(../images/keyboard/Eis.png);
}

#keyboard.style_cbb div:nth-child(2) span.l30{
	background-image:url(../images/keyboard/Rakete.png);
}

#keyboard.style_cbb div:nth-child(2) span.l31{
	background-image:url(../images/keyboard/Tennis.png);
}

#keyboard.style_cbb div:nth-child(2) span.r00{
	background-image:url(../images/keyboard/Zebra.png);
}

#keyboard.style_cbb div:nth-child(2) span.r01{
	background-image:url(../images/keyboard/Uhr.png);
}


#keyboard.style_cbb div:nth-child(2) span.r1{
	background-image:url(../images/keyboard/Irre.png);
}

#keyboard.style_cbb div:nth-child(2) span.r2{
	background-image:url(../images/keyboard/Ohr.png);
}

#keyboard.style_cbb div:nth-child(2) span.r3{
	background-image:url(../images/keyboard/Polen.png);
}



#keyboard.style_cbb div:nth-child(3) span.l0{
	background-image:url(../images/keyboard/Alarm.png);
}

#keyboard.style_cbb div:nth-child(3) span.l1{
	background-image:url(../images/keyboard/See.png);
}

#keyboard.style_cbb div:nth-child(3) span.l2{
	background-image:url(../images/keyboard/Döner.png);
}

#keyboard.style_cbb div:nth-child(3) span.l30{
	background-image:url(../images/keyboard/Flugzeug.png);
}

#keyboard.style_cbb div:nth-child(3) span.l31{
	background-image:url(../images/keyboard/Golf.png);
}

#keyboard.style_cbb div:nth-child(3) span.r00{
	background-image:url(../images/keyboard/Hase.png);
}

#keyboard.style_cbb div:nth-child(3) span.r01{
	background-image:url(../images/keyboard/Joggen.png);
}

#keyboard.style_cbb div:nth-child(3) span.r1{
	background-image:url(../images/keyboard/Krass.png);
}

#keyboard.style_cbb div:nth-child(3) span.r2{
	background-image:url(../images/keyboard/Laut.png);
}

#keyboard.style_cbb div:nth-child(3) span.r3{
	background-image:url(../images/keyboard/.png);
}




#keyboard.style_cbb div:nth-child(4) span.l0{
	background-image:url(../images/keyboard/.png);
}

#keyboard.style_cbb div:nth-child(4) span.l1{
	background-image:url(../images/keyboard/Nixe.png);
}

#keyboard.style_cbb div:nth-child(4) span.l2{
	background-image:url(../images/keyboard/Currywurst.png);
}

#keyboard.style_cbb div:nth-child(4) span.l30{
	background-image:url(../images/keyboard/Vogel.png);
}

#keyboard.style_cbb div:nth-child(4) span.l31{
	background-image:url(../images/keyboard/Ball.png);
}

#keyboard.style_cbb div:nth-child(4) span.r00{
	background-image:url(../images/keyboard/Nilpferd.png);
}

#keyboard.style_cbb div:nth-child(4) span.r01{
	background-image:url(../images/keyboard/Muskel.png);
}

#keyboard.style_cbb div:nth-child(4) span.r1{
	background-image:url(../images/keyboard/.png);
}

#keyboard.style_cbb div:nth-child(4) span.r2{
	background-image:url(../images/keyboard/.png);
}

#keyboard.style_cbb div:nth-child(4) span.r3{
	background-image:url(../images/keyboard/.png);
}

#keyboard.style_cbb span.l0{
	background-color:#ff6633;
}

#keyboard.style_cbb span.l1{
	background-color:#ff9933;
}

#keyboard.style_cbb span.l2{
	background-color:#ffcc66;
}

#keyboard.style_cbb span.l3{
	background-color:#ffff66;
}

#keyboard.style_cbb span.r0{
	background-color:#ccffff;
}

#keyboard.style_cbb span.r1{
	background-color:#99ccff;
}

#keyboard.style_cbb span.r2{
	background-color:#6699ff;
}

#keyboard.style_cbb span.r3{
	background-color:#6699cc;
}


#keyboard.style_cbb span.current{
	transform: scale(1.2);
	color: transparent !important; 
	animation: none;
}

#keyboard.style_cbb span:not(.current){
	opacity: .3;
}


#keyboard.style_cbb span.correct{
	background-color:green;
	border:3px inset hsl(125, 100%, 80%);
	opacity: 1;
}

#keyboard.style_cbb span.wrong{
	background-color:red;
	border:3px inset hsl(0, 100%, 80%);
	opacity: 1;
}