/*\

responsive

\*/

html {
	font-size:62.5%;
}
@media all {
	body {
		font-size:1.2em;
	}
}
@media (min-height:480px) {
	body {
		font-size:1.4em;
	}
}
@media (min-height:640px) {
	body {
		font-size:1.6em;
	}
}
@media (min-height:768px) {
	body {
		font-size:2em;
	}
}

/*\

global

\*/

body {
	font-family:Arial, sans-serif;
	font-weight:300;
}
header {
	line-height:2em;
	box-sizing:border-box;
	border-radius:0 1em 0 0;
}
aside {
	border-radius:0 1em 0 0;
}
h1 {
	box-sizing:border-box;
	padding:1rem 0.5rem;
}
h2 {
	box-sizing:border-box;
	padding:0.75rem 0.5rem;
}
h3 {
	box-sizing:border-box;
	padding:0.5rem 0.5rem;
}
nav > header,
nav > a {
	display:block;
	height:3.5em;
	/**/
	box-sizing:border-box;
	line-height:1.5em;
	padding:0.5em;
}
nav > header:not(:last-child),
nav > a:not(:last-child) {
	margin-bottom:-1em;
}
body > nav {
	border-radius:0 1em 0 0;
}
body > nav > header,
body > nav > a {
	border-radius:0 1em 0 0;
	box-shadow:0 0 0.25em 0.1em rgb(34,36,38);
}
code {
	white-space:pre;
}
aside {
	border-radius:0 1em 0 0;
	margin-top:-1em;
}
a {
	text-decoration:none;
}
button,
.button {
	display:inline-block;
	/**/
	height:1.6em;
	line-height:1.4em;
	font-size:1.4rem;
	text-align:center;
	/**/
	box-sizing:border-box;
	padding:0.1em 0.5em;
	/**/
	border-style:solid;
	border-width:1px;
	border-radius:0.4em;
	/**/
	background-color:transparent;
	cursor:pointer;
}
input {
	box-sizing:border-box;
	padding:0.1em 0.4em;
	/**/
	border-style:solid;
	border-width:2px;
	border-radius:0.5rem;
}

/*\

icon

\*/

.icon {
	width:4em;
	height:2em;
	/**/
	max-width:100%;
	max-height:100%;
}
svg.icon {
	pointer-events:none;
}
svg.icon path,
svg.icon rect,
svg.icon circle {
	fill:none;
	stroke-width:2;
}
svg rect.hitbox {
	visibility:hidden;
	cursor:pointer;
	/**/
	stroke:none;
	stroke-width:0;
	pointer-events:all;
}