// Global

*
  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

// UI

nav
  position: fixed
  top: 0
  left: 0
  right: 0
  height: 40px
  line-height: 38px
  padding: 0 10%
  background: #f3f3f3

  a
    color: blue
    display: inline-block
    text-decoration: none
    margin-right: 1em


$bold: 600
$normal: 400

#output
  position: fixed
  top: 40px
  left: 0
  right: 0
  bottom: 0
  width: 100%
  padding: 2em 10%
  color: #7E7D7C // #A59086
  white-space: pre-wrap
  overflow: scroll
  padding: 2em 10%
  font-weight: $normal
  -webkit-transition: opacity 0.2s
  -webkit-overflow-scrolling: touch

#template
  display: none

// Syntax

.num
  font-weight: $bold
  color: #444

[class*=var]
  font-weight: $bold


.clr
  border-radius: 1px
  color: white
  font-weight: 400

.str,  .str i
  color: rgb(209, 0, 0) !important
  font-weight: 400 !important

.reg,  .reg i
  color: #E97900
  font-weight: 500

.cmnt, .cmnt i
  color: #8DB8AA !important
  font-weight: 400 !important
  // font-style: italic

.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