@import url("https://fonts.googleapis.com/css?family=Lato");
*,
*::before,
*::after {
  box-sizing: inherit;
}
body,
input {
  font-family: Lato, sans-serif;
}
body {
  counter-reset: h3;
  box-sizing: border-box;
}
p img {
  float: right;
}
h2 {
  clear: both;
}
@media (max-width: 550px) {
  body > p:first-of-type,
  h1 {
    text-align: center;
  }
  p img {
    float: none;
  }
}
form h3 {
  clear: both;
  margin-top: 0;
  padding-top: 1em;
}
form h3::before {
  counter-increment: h3;
  content: "— " counter(h3) ". ";
}
form div {
  float: left;
  padding: 0.3em;
  width: 24%;
  margin-right: 1%;
  margin-bottom: 1%;
  height: 8em;
}
@media (max-width: 1023px) {
  form div {
    width: 32%;
  }
}
@media (max-width: 799px) {
  form div {
    width: 49%;
  }
}
@media (max-width: 539px) {
  form div {
    width: 100%;
    margin-right: 0;
  }
}
form div:not(:hover) {
  background-color: #eee;
  opacity: 0.6;
}
form div p {
  font-weight: bold;
  margin-top: 0;
}
form div p em {
  font-style: normal;
  display: block;
  font-weight: normal;
}
form [type=submit] {
  font-weight: bold;
  font-size: 150%;
}
[type=range] {
  background-color: transparent;
  width: 100%;
  margin: 0;
}
#output > div {
  float: left;
}
#output:not(.raster) .raster,
#output:not(.vector) .vector {
  display: none;
}
#output textarea {
  margin-top: 0.5em;
  width: 100%;
  height: 6em;
}
footer {
  clear: both;
  padding-top: 2em;
  text-align: center;
}