body { background: #9999cc; }
body, textarea { font-family: sans-serif; font-size: 4.5vh; }

body {
  background: #9999cc;
}
body.animated {
  animation-name: paletteRotation;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}
@keyframes paletteRotation {
  from { background: #9999cc; }
  33% { background: #99cc99; }
  66% { background: #cc0099; }
  to { background: #9999cc; }
}

div { margin: 2ex 0px; }
div.body { width: 70%; margin: 2ex auto; text-align: center; }

h1 { margin: 1ex 0px; margin-bottom: 0px; }
p { margin: 1ex 0px; }
p.subtitle { font-size: 75%; }

textarea {
  width: calc(100% - 2em); height: 5ex; padding: 2ex 1em;
  border: 1px solid black; resize: none;
}
div.input_text textarea { border-radius: 1ex 1ex 0px 0px; }
div.transcoded textarea { border-radius: 0px 0px 1ex 1ex; }

div.input_text { position: relative; }
div.input_text span.length {
  position: absolute; bottom: 0.5ex; right: 2em;
  font-size: 50%; color: #9999cc;
}
div.input_text span.warning { color: #cc3333; }

div.fonts { width: 100%; display: flex; }
div.fonts span { flex: 1; }
div.fonts span:not(:first-child) label { margin-left: 1em; }

label {
  display: flex; height: 3ex; align-items: center;
  border: 1px solid black; border-radius: 0.5ex;
  padding: 0.5ex; background: #ccccff;
}
label span { flex: 1; }
label.selected { background: #666699; color: white; }
input[type=radio] { display: none; }