*{margin:0;padding:0;}

body {text-align:center;line-height:1.5;font-family:ubuntu,trebuchet ms,arial;font-size:4vw;}

a{text-decoration:none}
a:focus { outline: none; }
p{text-align:left;padding:1em 0;}
strong{font-weight:normal;}

h1 {font-size:1.5em;}
h2{display:none;}
h3{font-size:1em;}
h4{margin:1em 0;}

fieldset{border:0;padding:0}
legend{width:auto;padding:1em;margin:auto}

table{margin:auto;}
th, td{text-align:left;padding:0.2em 1em;}
th{text-align:right;}

ul,ol{display:inline-block;margin:1em 2em;padding:0;text-align:left;}
li{margin:0.2em}

input, textarea, select, option{width: 90%;font-size: 1em;padding:0.5em; margin-bottom: 1em;}

.logo{font-family:"Varela Round"; font-weight:bold;}

.page{max-width:728px;margin:auto;padding:0.5em;}

.fa-cookie-bite{color:chocolate;font-size:1.5em;margin:0.5em}

.infobar{background:#070;color:#FFF;padding:0.5em 1em;}
.infobar a{color:gold;}
.infobar a:hover{color:yellow;}

.container{padding:1em 0}

.top a:hover{text-decoration:none;}
.top i{font-size:2em;}

.left{float:left;}
.right{float:right;}

.info{padding:1em 0;}


.footer a {display: inline-block;margin: 0.5em;}
.footer .version{font-size:0.7em}

.small{font-size:0.8em;}

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

/* BUTTONS: */

.buttons{display:block;padding:1em 0;}
.buttons li{display:inline;}
.buttons a{display:block;padding:0.7em 2em;margin:0.1em;text-decoration:none;border-style:solid;border-width:1px;border-radius:1em;}

.buttons a:hover{text-decoration:none;}

ul.columns-2 li{display:block;}
ul.columns-2 li i{font-size:1.2em;}

/* KEYBOARD: */

.keyboard{width:auto;margin:1em auto;}
.key{width:1.5em;height:1.6em;float:left;font-size:0.9em;border-style:dotted;border-width:1px;border-radius:0.1em}

.shift{width:4em;}
.space{width:9em;color:transparent}
span.upper{display:none;}

div.upper{padding-left:2em}
div.base{padding-left:3em}
div.space{padding-left:6em;}

div.row{clear:both;}
div.clear{clear:both;}

@media only screen and (min-width: 600px) 
{
    body{font-size:4vw;}

    ul.columns-2{columns:3;-webkit-columns: 3;-moz-columns: 3;}
    ul.columns-2 li{display:inline-block;width:100%;}

}
@media only screen and (min-width: 750px) 
{
    body{font-size:16pt;}
    h2{display:block;font-size:1em;font-style:italic;}
    h3{padding:1em;font-size:1.2em;}

    fieldset{border-style:dotted;border-width:2px;border-radius:2em;padding:1em 2em;}
    fieldset>fieldset{padding:0.5em;}
    legend{padding:0 0.5em;}
    p{padding:1em;}

    .page{padding:1em;}
    .buttons a{display:inline-block;padding:0.7em 2em;margin:0.1em;text-decoration:none;border-style:solid;border-width:1px;border-radius:2em;}
    .block a{display:block;}

    /* Responsive: */
    .keyboard{width:auto;}
    .key{width:2em;height:2em;}
    .shift{width:5em;}
    .space{width:12em;}

    div.upper{padding-left:3em;}
    div.base{padding-left:4em;}
    div.space{padding-left:9em;}
}


/* EXERCISE */
.exercise{margin-bottom:1em;}
.todo{width:14em;height:1.5em;margin:0 auto;overflow:hidden;}
.todo{font-family:'lucida console', 'Courier New';font-size:1.3em;text-align:left;}
.todo, input, textarea, select {border-style:dotted;border-width:1px;}

/* HANDS */
.hands{font-size:0.8em;margin:1em;}
.hands>div{display:inline-block;width:1.5em;height:3em;border-radius:2em;margin:0px;border-style:solid;border-width:1px;}
.hands>div:nth-child(5){margin-right:2em;height:2em}
.hands>div:nth-child(6){height:2em;}
.hands>div.highlight{background-color:#373;border-color:#080;}

.result td, .result th{width:50%}
.result td{text-align:left!important;}

.code{font-size:3em;}

/* STATISTICS: */
.stat>span{padding:0 1em;font-weight:bold;}


/* ADS*/
.container>.ad{margin:0 1em;}
.page>.ad{background:#eee;margin:0.5em 0;}
fieldset>.ad {max-width:85vw;margin:auto;}