html, body {
  width: 100%; height:100%;
  margin: 0; padding: 0;
}

body {
  font-family: "Jura", sans-serif;
  font-weight: 300;
  font-size: calc(12px + 1vw);

  background: #333;
  color: #ddd;

  padding: 5vw;
}

/* All screens start off disabled until we explicitly enable them */
.screen {
  display: none;
}






body.recording {
  background: #a33;
}

h1 {
  font-size: 24px;
  font-size: calc(24px + 5vw);
  font-weight: 300;
  margin-top: 0;
}

h2 {
  font-size: 18px;
  font-size: calc(18px + 2.5vw);
  color: #ccc;
}

b, strong {
  font-weight: 500;
}

button {
  height: 4vw;
  font-size: 2vw;
  font-weight: bold;
  padding: 0.5vw 2vw;
  border-radius: 1vw;
  cursor: pointer;
}

#audio-controls {

}
  #audio-controls.disabled {
    opacity: 30%;
    pointer-events: none;
  }

#save-form {
  margin: 5vw 0;
}

label {
  display: block;
  margin: 1vw 0;
}

input[type="text"] {
  height: 3vw;
  margin: 0 2vw;
  width: 30vw;
  font-size: 2vw;
  font-weight: bold;
}