* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
html {
  background: black;
  -webkit-text-size-adjust: 100%;
  font-size: 14pt;
}
body {
  margin: 0 auto 2em;
  max-width: 700px;
  padding: 0 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
h1 {
  margin: .25em 0 .5em 0;
  font-size: 32pt;
  color: #cef;
  text-shadow: #00c 1px 2px 2px;
}

h2 {
    margin: .25em 0 .5em 0;
  font-size: 18pt;
  color: #cef;
  text-shadow: #00c 1px 2px 2px;
}
input {
  -webkit-appearance:none;
  appearance:none;
  border:1px solid #07f;
  padding:.5em;
  font-size:14pt;
  display:inline-block;
  width:calc(100% - 100px - .5em);
  border-radius:2px;
  border-bottom-color:#02e;
  box-shadow:inset #eee 0 -.25em .5em, rgba(0,0,0,.15) 0px 1px 1px;
}
input[type=button] {
  width: calc(100px - .5em);
  margin: 0 auto 0 1em;
  padding: .5em;
  cursor: pointer;
  background: #0cf;
  background: -moz-linear-gradient(top, #0cf 0%, #0080ff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0cf), color-stop(100%, #0080ff));
  background: -webkit-linear-gradient(top, #0cf 0%, #0080ff 100%);
  background: -o-linear-gradient(top, #0cf 0%, #0080ff 100%);
  background: -ms-linear-gradient(top, #0cf 0%, #0080ff 100%);
  background: linear-gradient(to bottom, #0cf 0%, #0080ff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0cf', endColorstr='#0080ff', GradientType=0);
  text-align: center;
  font-weight: 600;
  color: white;
  text-shadow: #06e 1px 1px 0;
  border: 1px solid #07f;
  border-bottom-color: #02e;
  box-shadow: inset #0065ff 0 -.3em 1em, inset #0cf 0 1px 1px, rgba(0, 0, 0, .15) 0px 1px 1px;
}
input[type=button]:hover,
input[type=button]:focus {
  background: #7df;
  background: -moz-linear-gradient(top, #7df 0%, #07f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7df), color-stop(100%, ##07f));
  background: -webkit-linear-gradient(top, #7df 0%, #07f 100%);
  background: -o-linear-gradient(top, #7df 0%, #07f 100%);
  background: -ms-linear-gradient(top, #7df 0%, #07f 100%);
  background: linear-gradient(to bottom, #7df 0%, #07f 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7df', endColorstr='#07f', GradientType=0);
  box-shadow: inset #08f 0 -.3em 1em, inset #cef 0 1px 1px, rgba(0, 0, 0, .15) 0px 1px 1px, rgba(0, 200, 255, .5) 0 0 10px;
}
input[type=button]:active {
  background: #05f;
  border: 1px solid #00f;
  box-shadow: inset #04f 0 -.3em 1em, inset #8ad2ff 0 1px 1px;
  border-bottom-color: #01d;
}
div:empty {
  max-height: 0;
  opacity: 0;
}
div {
  opacity: 1;
  margin-top: 1em;
  word-break: break-all;
  height: auto;
  max-height: 250px;
  overflow-y: scroll;
  background: #9ce;
  padding: .5em;
  border-radius: 2px;
  transition: all .2s ease-in-out;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
  cursor: text;
  box-shadow: rgba(0,0,0,.15) 0px 1px 1px;
}
::-moz-selection {
  color: white;
  background-color: #00c;
}
::-webkit-selection {
  color: white;
  background-color: #00c;
}
::selection {
  color: white;
  background-color: #00c;
}
@media (min-width:750px) {
  body {padding-top:2em;}
}

#article {
  all:revert;
  color: white;
}


a { color:yellow;
}


/* hide menu bar */
#hbar-bar {
  visibility: hidden;}