body {
  font-size: 20px;
  line-height: 150%;
  font-family: 'Courier New', Courier, monospace;
  /* background: #333;
  color: #0F0; */
}

#main { 
  max-width: 830px;
  margin: 1rem;
}

code {
  font-weight: bold;
}

p.input {
  display: flex;
}

p.input label {
  width: 100px;
}

p.input input {
  width: 200px;
}

.error {
  padding: 1rem;
  background: #FCC;
}

.happy {
  padding: 1rem;
  background: #CFC;
}

#browser {
  margin-top: 80px;
}

#browser header {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

#toolbar {
  display: flex;
  flex-direction: row;
}

#toolbar button {
  flex-grow: 0;
  margin: 0.25rem;
  font-size: 1rem;
}

#toolbar input {
  flex-grow: 1;
  min-width: 0;
  margin: 0.25rem;
  font-size: 1rem;
}

#surface pre {
   margin: 0;
   display: block;
   line-height: 120%;
   font-size: 14px;
}

#surface pre.text {
  white-space: pre-wrap;
}

#surface a { 
  color: blue;
  text-decoration: none;
}

@media only screen and (min-width: 1200px) {
  #main {
    margin: 1rem auto;
  }
}

@media only screen and (max-width: 600px) {
  #surface pre {
          white-space: pre-wrap;
  }
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  padding: 0;
  margin: 0;
  display: inline;
}