* {box-sizing: border-box;}
body{margin:0;
	font-family:Arial,sans-serif;
	padding:30px;height:100%;
	color:#444;
	min-width:400px;
	background:#edefe6;
	background:linear-gradient(to bottom right,#c1d3c5,#fff);
	background-repeat: no-repeat;
	background-attachment: fixed;
}
html,body {height:100%}


h1, h2 {
	text-transform: uppercase;
	letter-spacing: .2em;
	color: black;
	padding-top: 10px;
	font-size:x-large;
}
h2{margin-top:0;font-size:medium;}
.blacklink{color:inherit;text-decoration-color:#bbb}

pre{background-color:rgba(255,255,255,0.4);box-shadow:0 3px 7px 0 rgba(0,0,0,0.3);}

/* =	TOP MENU	= */
nav{display:flex;justify-content:space-between;flex-direction:column}
@media only screen and (min-width:768px){nav{flex-direction:row}}
nav>*{flex:1;text-align:center;margin:0.25em;padding:0.25em;border:1px solid #777;text-decoration:none;color:#555}
nav>span>input[type="checkbox"]:checked ~ div{display:none}
nav>span>label{display:block}
nav>span>input[type="checkbox"]{position:absolute;left:-999px}
label{cursor: pointer}