*{margin:0;padding:0;text-align:center;}

body{font-size:5vw;font-family:trebuchet ms, arial;background:#123;color:#789;}

h1,h2{font-size:1.5em;color:#FFF;}
h1,h2,h3{font-family:courier new;text-shadow: 0px 0px 5px #000;}

p{line-height:1.7;max-width:500px;margin:1.5em auto;text-align:left}

q{font-style:italic;}

a{text-decoration:none;color:#FFF;}
a:hover{text-decoration:underline;color:#0F0;}

strong{color:#EEF;font-weight:normal;}

fieldset{border:0;padding:1em;}
fieldset>h1{margin:0 2em;}
legend{padding:0 0.5em;text-transform: uppercase;font-weight:bold;text-shadow: 0px 0px 7px #000;color:orange;margin-bottom:1em;}

fieldset>fieldset legend{text-transform:none;color:#79B;}

textarea{width:20em;text-align:left;background:#036;font-size:1em;border:solid 2px #369;padding:0.5em;margin:1em;color:#ACE;font-family:courier new;}

table.log td{background:#258;margin:0.5em;padding:1em 2em;text-align:left;}

table.info-table{display:inline-block;margin:auto;}
table.info-table td{text-align:left;padding:0.5em;}

i.large{font-size:3em;}

.top{}
.middle{background:#468;color:#ABD;}
.footer{padding:2em 0;}
.footer a{display:inline-block;margin:1em;}
.footer a i{opacity:0.5}

.container{max-width:28em;margin:auto;padding:2em 0;}

.left{float:left;}
.right{float:right;}
.align-right{text-align:right;}

.icons-large i{font-size:2em;margin:0 0.5em}

.info{padding:0.5em 0;background:#050;color:#8C8;}

/*** BANNER ***/

.banner h1{font-size:2.5em;}
.banner h2{font-size:1.5em;}

/*** CONSENT ***/

.consent{background:#333;color:#DDD;padding: 2em 0;}
.consent{box-shadow: 0px 0px 10px #000;}
.consent .buttons a{background:#444;}
.consent .buttons a:hover{background:#777;}
.consent p{max-width:600px;}
.fa-cookie-bite{font-size:3em;color:chocolate;text-shadow: 0px 0px 10px #000;}

/*** NAV ***/

.nav{margin:auto;}
.nav a{font-size:1.5em;margin:0.5em;color:#789;}
.nav a:hover{color:#0F0;}

/*** INFO TOP ***/
.info-top{background:#012;padding:1em 0;border-bottom:dashed 3px #246;color:#777}
.fa-exclamation-triangle{color:orange;}
.fa-exclamation-circle{color:#0C0;}

/*** LIST ***/

.list a{display:block;padding:1em 2em;margin:0.5em;background:#258;color:#ABC;border-radius:0.3em;text-align:left;line-height:1.5;font-family:courier new}
.list a:hover{background:#080;color:#FFF;text-decoration:none;}
.list a.selected{background:#080;color:#FFF;}
.list a .footer{height:2em;padding-top:1em;}

/*** BUTTONS ***/

.buttons{margin:1em 0;}
.buttons a{margin:0.5em 0;display:inline-block;padding:1em 2em;border-radius:2em;text-decoration:none;font-size:0.8em;font-family:verdana}
.buttons a{background:#147;color:#FFF;box-shadow: 2px 2px 5px #000;}
/*.buttons a.selected{background:#070;color:#FFF;border-color:#0F0;font-weight:bold;}*/
.buttons a i{opacity:0.3}
.compact a{margin:0.5em;margin:0.2em 0;width:2em;padding:1em;}
.half a{width:10em;}
.buttons a:hover{background:#080;color:#FFF;text-decoration:none;}
.buttons a:hover i{color:#0F0;opacity:1;}

.buttons a:focus{outline:none;background:#070;color:#FFF;}
.buttons a.repeat:focus{background:orangered;}

.buttons .green{background:#363;color:#AFA;}
.buttons .blue{background:#246;color:#AAF;}
.buttons .purple{background:#582A72;color:#9775AA;}
.buttons .gray{background:#222;color:#AAA;}
.buttons .white{background:#FFF;color:#333;}
.buttons-block a{display:block;}

/*** KEYBOARD: ***/

.keyboard {display: inline-block;font-size:0.6em;margin:2em 0}
.keyboard button {float: left;width: 2em;height: 2em;font-size: 1em;border:dotted 1px #369;background:#258;color:#ABD}
/*.key {text-transform: uppercase;}*/
.keyboard button:nth-of-type(14){clear: both;margin-left: 2.5em;}
.keyboard button:nth-of-type(27) {clear: both;margin-left: 3em;}
.keyboard button:nth-of-type(38) {clear:both;width: 3.5em;}
.keyboard button:nth-of-type(49) {width: 3.5em;}
.keyboard button:nth-of-type(50) {clear: both;margin-left: 8em;width: 12em;}

.top .keyboard button{border-color:#024}

.keyboard button.highlight{background:#070;color:#FFF;border-color:#0F0;border-style:solid}
.upper .shift{background:#070;color:#FFF;border-color:#0F0;border-style:solid}
.groups .keyboard button.highlight{border:transparent;}

/*** HANDS: ***/
.hands{font-size:0.8em}
.hands>div{width:1em;height:3.5em;display:inline-block;background:burlywood;border-radius:2em;border:solid 2px chocolate;opacity:0.8}
.hands>div:nth-of-type(1){height:3em;}
.hands>div:nth-of-type(10){height:3em;}
.hands>div:nth-of-type(5){height:2em;margin-right:3em}
.hands>div:nth-of-type(6){height:2em;}
.hands>div.highlight{background:chocolate;}

/*** EXERCISE: ***/

.sampletext{width:11em;font-size:1.5em;font-family:courier new;font-weight:bold;text-align:left;padding:0.1em 0;margin-bottom:1em;}
.sampletext{background:#036;border:solid 2px #369;color:#ABD;}

.error{border-color:red;}

/*** RESULTS: ***/

.results{margin:auto;}
.results td{text-align:right;padding:0.3em;}
.results td span{opacity:0.5}
.results i{opacity:0.5}
i.fa-check{color:#0F0;}
i.fa-times{color:#F33;}

/*** RESPONSIVE: ***/
@media only screen and (min-width: 400px) 
{
	.min400{display:inline-block;}
}
@media only screen and (min-width: 728px) 
{
	body{font-size:18pt;}	
	fieldset{border:dotted 3px #246;border-radius:1em;margin-bottom:2em}
	fieldset>fieldset{border-color:#579;border-style:solid;}
	.nav{width:800px;}
	.container{width:700px;}
	.keyboard {display: inline-block;font-size:0.8em}
	.min728{display:inline-block;}
	.nav{height:auto;}
}