*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0}
body{background-color:#fffafc;color:#040002;border:none;font-family:sans-serif;font-size:1em;line-height:1.4em;overflow-y:scroll}
h1{font-size:1.5em;line-height:1.2em}
h2{font-size:1em;font-weight:bold;margin-top:1em}
h3{font-size:1em;font-weight:bold;margin-top:1em}
textarea{width:100%;background-color:#fffafc;border:solid 1px gray;padding:.2em;border-radius:.2em}
input{padding:.2em}
a{text-decoration:none}
pre{margin-top:1em;padding:.5em;overflow:auto;background-color:#f0eaff;border-radius:.5em}
p{margin-top:1em}
table{margin-top:1em;border-collapse:collapse}
th{border-bottom:solid 2px gray;text-align:left}
td{border-bottom:solid 1px gray;padding:.2em}
ul{list-style-type:none}
a{color:#3330ff}
a:visited{color:#83f}
a:hover{color:#2af}

.top{position:absolute;left:0;top:0;width:100%;height:100%;background:-moz-linear-gradient(top, #b0aaff, #fffafc 15em, #fffafc);background:-o-linear-gradient(top, #b0aaff, #fffafc 15em, #fffafc);background:-webkit-linear-gradient(top, #b0aaff, #fffafc 15em, #fffafc);background:linear-gradient(to bottom, #b0aaff, #fffafc 15em, #fffafc);z-index:-1;padding:1em}
.logocon{float:left;color:#040002;padding:.4em}
.logo{font-size:1.3em;font-weight:bold}
.tag{font-size:.8em}
.maincol{clear:both;max-width:40em}
.main{margin-bottom:1em;padding:.4em;border-radius:.4em;background-color:#fffafc}
.menu{max-width:13em;top:1em;padding:.4em;border-radius:.4em;background-color:#f0eaff;border:solid 2px #e0ddff}
.intro{margin-top:.5em;font-weight:bold}
.date{margin-top:.5em;font-size:.8em;color:#aaa}
.navlink{margin-top:1em}
.demo{margin-top:1em;background-color:#f0eaff;padding:1em;border-radius:.5em}
.output{background-color:#d8d0ff;padding:.2em;border-radius:.2em}
.jskey{color:#319}
.jsstr{color:#931}

@media all and (min-width:55em){
.logocon{padding:.5em}
.maincol{float:left;position:relative;left:14.5em;width:40em}
.main{padding:1em;border-radius:1em}
.menu{float:left;position:relative;left:-39.5em;width:13em;padding:.5em;border-radius:.5em}
}

@media all and (min-width:70em){
.header{position:relative;float:right;width:50%;left:-34.5em}
.maincol{float:right;left:0;width:50%;max-width:50%}
.main{position:relative;left:-20em;width:42em}
.menu{float:right;left:-21em}
}