body {
  font-family: "Noto Sans", sans-serif;
  background-color: #fafafa;
}

header {
  text-align: center;
}

main {
  text-align: center;
}

#in {
  font-size: 150%;
  padding: 30px 0 20px;
}

@keyframes fadeRed {
  0%   { color: #800; }
  100% { color: #F00; }
}

#loading {
  font-size: 130%;
  padding: 20px;
  animation: fadeRed 0.5s linear alternate infinite;
}

#rawout {
  font-size: 250%;
  padding: 20px;
  /*font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;*/
}

#out {
  text-align: left;
  margin: 20px auto;
}

#out td {
  padding: 5px;
}

#out .hex {
  text-align: right;
  font-family: monospace;
}

#explainer {
  text-align: left;
  background-color: white;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px 30px 20px;
  margin: 15px auto;
  max-width: 800px;
}

#explainer>div {
  padding-top: 10px;
}

#explainer h4, #explainer h5 {
  margin-bottom: 0px;
}