body{background:url(../assets/06.png) no-repeat center fixed; background-size:cover; overflow:auto ;}

@font-face { font-family: 'carton6'; src: url('../assets/Carton_Six.ttf'); }
@font-face { font-family: 'ubuntuM'; src: url('../assets/Ubuntu-M.ttf'); }
@font-face { font-family: 'ubuntuMono'; src: url('../assets/UbuntuMono-R.ttf'); }

@keyframes blink { 50% { color:black; background-color: white;}}

#keyb-picture {
    margin-left: auto;
    margin-right: auto;
}



.textInput {
    font-size: 1.8em;
    color: black;
    background-color: white;
    padding: 5px;
    word-wrap: break-word;
}

.textInput span {
    padding:2px;
    font-family: ubuntuMono;
}

.textInputCurrent {
    background-color: black;
    color:white;
    animation: blink .4s step-end infinite alternate;
}

.textInputError {
    color: red;
}

.textInputGood {
    color: grey;
}


.red {background-color:#F23535 !important;}
.green {background-color:#93F235 !important;}
.blue {background-color:#3587F2 !important;}
.yellow {background-color:#F2EF35 !important;}
.orange {background-color:#F29A35 !important;}
.purple {background-color:#C335F2 !important;}
.pink {background-color:#FA57DC !important;}
.grey {background-color:#BABABA !important;}


.exit {
    position: fixed;
    top:3px;
    left:10px;
    font-size: 3.5em;
    cursor: pointer;
}


/* stats */
.result_item {
    font-size: 0.7em;
    text-align: center;
    margin: 1px;
    padding: 5px;
    min-width: 30px;
    max-width: 50px;
    display: inline-block;
    border:1px solid #888;
    border-radius: 5px;
}


.wrapper {
    text-align: center;
    padding:10px;
    margin-left: auto;
    margin-right: auto;
    min-width: auto;
}

.spacer { height:70px; }
.clear { clear:both; }


.firstpage input, .firstpage select { padding : 2px 5px; }
.firstpage table>tr>td {padding: 10px 15px;}

.counter {
    position: absolute;
    top:3px;
    right:100px;
    font-size: 1.3em;
    text-align: right;
}

.speedrate {
    position: absolute;
    top:3px;
    right:200px;
    font-size: 1.3em;
    text-align: right;
}

.menu {
    padding:10px 0 0 0;
    position:absolute;
    zoom:0.6;
    top: 5px;
    left: 10px;
}

.big-font {font-size: 2em;}
.medium-font {font-size: 1.5em;}
.carton6 { font-family: carton6; }
.text-stroke { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; line-height:100%;}
.text-stroke-white {color: black; text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.info {font-size:0.8em;}

/* footer */
.footer {
	position:fixed;
	padding: 2px 10px 2px 10px;
	bottom:0;
	width:100%;
	height:auto;
	max-height: 100px;
	background-color: #DBDBDB;
	border-top: 1px solid grey;
	font-size:2em;
}

.footer a {
	text-decoration: none;
	float:left;
    margin: 2px 5px;
}

.title {
    display:block;
    font-size: 2em;
    margin:5px;
    text-align: center;
}