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

body {
  font-family: sans-serif;
  font-weight:300;
  font-size: max(12px, 2vw);

  background: darkred;
  color: #ddd;

  display: flex;
  flex-direction: column;
  gap: 2vh;
}

body > * {
  flex-grow: 1;
  margin: 0 2vw;
}

h1 {
  font-size: max(18px, 3vw);
  font-weight: 100;

  padding:2vh 0 1vh 0;
}

h2 {
  font-size: max(14px, 2vw);
  color: #ccc;

  padding:0 0 1vh 0; margin: 0;
}

b, strong {
  font-weight: 500;
}

select, button {
  font-size: 2vw;
  padding: 1vh 1.5vw;
  border-radius: 0.5vw;
}

button:disabled {
  opacity: 0.25;
}

input {
  font-size: 1.5vw;
  border-radius: 0.5vw;
  padding: 0.5vw;
}


.hidden {
  display: none;
}

/* --------------------------------- */

#story-form {
  border: 1px solid green;
  padding: 1vw;
}

#form-content {
  display: flex;
  flex-direction: column;
  gap: 0.7vh;
}

#form-content > div {
  flex-grow: 1;

  display: flex;
  flex-direction: row;
  gap: 3vw;
}

#form-content label {
  flex-grow: 1;
}

#submit-answers {
  margin-top: 1vh;
  width: 100%;

  background: green;
  color: white;
  font-weight: bold;
}

#story {
  border: 1px solid green;
  background: white;

  padding: 1vw;
  color: black;
}

#story em {
  font-weight: bold;
  font-style: normal;
  text-decoration: dotted;
  color: green;
}

#restart-button {

}