body {
  background-color: #666;
  color: #eee;
}

header {
  min-width: 850px;
}

.form-row {
  align-items: flex-end;
}

header {
  background-color: #333333;
  background-image: linear-gradient(#333333 50%, rgb(25.5, 25.5, 25.5));
}
header h1 {
  font-size: 1.5em;
  padding: 0.3em;
  padding-right: 1em;
  border-right: 1px solid #999999;
  color: #999;
}
header h1:before {
  content: "\f155";
  font-family: "FontAwesome";
  display: block;
  border-radius: 50%;
  background-color: rgb(12.75, 12.75, 12.75);
  color: #fd1;
  font-size: 1.2em;
  line-height: 140%;
  text-align: center;
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  margin-left: -1.95em;
  margin-top: -0.225em;
}

.controls {
  padding: 1em;
}

.results {
  margin-top: 2em;
}
.results h1 {
  color: #aaa;
  font-size: 1em;
}
.results .numbers {
  display: block;
  padding-top: 20px;
}
.results .numbers > .number {
  display: inline-block;
  font-size: 3em;
  width: 2em;
  height: 2em;
  line-height: 200%;
  margin: 0 0.2em;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 10px 10px RGBA(0, 0, 0, 0.3), inset 0px -10px 30px RGBA(0, 0, 0, 0.6);
  animation: show-number 0.5s ease-out;
  animation-fill-mode: backwards;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px RGBA(0, 0, 0, 0.2);
}

@keyframes show-number {
  from {
    opacity: 0;
    transform: translate(0, 50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/*# sourceMappingURL=style.css.map */