* {
margin: 0;
padding: 0;
font: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
}
html {
font: 14px/1.3 "Source Code Pro", "Fira Mono OT", monospace;
}
body {
color: black;
background: white;
}
*:focus {
outline: none;
}
a, a:link, a:active, a:visited {
color: blue;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
line-height: 38px;
padding: 0 10%;
background: #f3f3f3;
}
nav a {
color: blue;
display: inline-block;
text-decoration: none;
margin-right: 1em;
}
#output {
position: fixed;
top: 180px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding: 2em 10%;
color: #7e7d7c;
white-space: pre-wrap;
overflow: scroll;
padding: 2em 10%;
font-weight: 400;
-webkit-transition: opacity 0.2s;
-webkit-overflow-scrolling: touch;
}
#template {
display: none;
}
.num {
font-weight: 600;
color: #444444;
}
 [class*=var] {
 font-weight: 600;
}
.clr {
border-radius: 1px;
color: white;
font-weight: 400;
}
.str, .str i {
color: #d10000 !important;
font-weight: 400 !important;
}
.reg, .reg i {
color: #e97900;
font-weight: 500;
}
.cmnt, .cmnt i {
color: #8db8aa !important;
font-weight: 400 !important;
}
.title {
opacity: 0.5;
}
 @media (min-width: 1400px) {
#output {
padding: 2em 20%;
}
nav {
padding: 0 20%;
}
}
@media (max-width: 700px) {
#output {
padding: 1em;
}
nav {
padding: 0 1em;
}
}
@media (max-width: 400px) {
html {
font-size: 12px;
}
}