*{margin:0;padding:0}
			
html,body{width:100%;height:100%}
			
body{font-size:7vw;font-family:varela round, trebuchet ms, arial;text-align:center;line-height:1.7}

/* PAGE LAYOUT */			
.page{max-width:750px;margin:auto;}

h1{margin:0;padding:0;}
h2,h3{display:none;font-size:1em}
h3{font-weight:normal;font-style:italic}

/* LINKS */
a, .button{display:block;padding:0.2em 1em;margin:0.3em;border:0;border-radius:1em;cursor:pointer;text-decoration:none}
a i, .button i{margin-right:0.2em;font-size:0.9em}
.inline a{display:inline-block}

/* FIELDSETS */
fieldset{margin:1em 0.5em;padding: 0.5em;border:dotted 3px;border-radius: 1em;}
legend{padding:0 0.5em;margin:auto}


/* TABLES */
table{display:inline-block;margin:auto}
th{text-align:right;}
th,td{padding:0 1em;}

/* COLORS */
body{background:#BDC;color:#687;}
h2,h3{color:#8A9}
a, .button{background:#687;color:#BDC;}
a.light, span.light, .light a{background:#ACB;color:#798;}
a:not(.error):not(.correct):not(.selected):hover, .button:not(.error):not(.correct):hover{background:#354;color:#FFF}
a i, .button i{color: #8A9;}
fieldset{border-color: #9BA}
legend i{color:#9BA}

@media only screen and (min-width: 750px) 
{
	body{font-size:20pt;}
	h2, h3{display:block}
	a, .button{display:inline-block;}
	
	.container{margin:1em 0;}
	
	fieldset{margin-top:2em;padding: 1em;}

	.grid .button{width:35%;padding:1em;margin:0.2em 0.1em}
	.grid i{display:block;font-size:2em;margin-bottom:0.5em}
}