body {
  background-color: #FAF9F7;
  margin: 1em;
  color: rgba(44, 44, 44, 0.75);
  font-family: futura, 'Helvetica Neue', sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: rgb(56, 56, 56);
  font-size: larger;
}

.explanation {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 36px;
  color: white;
  padding: 1em;
}

.summary {
  margin-top: 0.5em;
}

td {
  border: solid 1px #ccc;
  padding: 0.5em;
}

pre {
  white-space: pre-wrap;
}

dl {
}

@media all and (max-width: 586px) {
  dl {
    width: 320px;
  }
}


dt {
  font-family: futura, 'Helvetica Neue', sans-serif;
  color: #525252;
  font-size: x-large;
  margin-left: 0.5em;
}

dd {
  border: 4px hsla(0, 100%, 100%, 0.35) solid;
  border-radius: 1em;
  padding: 1em;
}

input {
  font-size: larger;
  display: flex;
  /* width: 100%; */
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 0.2em;
  padding-right: 0.2em;
  /* border-radius: 0.25em; */
  margin-top: 0.3em;
  min-width: 300px;
}

button {
  font-family: futura, 'Helvetica Neue', sans-serif;
  font-size: larger;
  color: hsla(0, 100%, 100%, 1);
  background-color: hsla(0, 0%, 35%, 1.0);
  border: 2px #ccc solid;
  border-radius: 0.25em;
  
  /* width: 100%; */
  text-transform: uppercase;
  margin-top: 0.5em;
}

.outcome {
  border: 2px hsla(0, 100%, 100%, 0.37) dotted;
  font-family: futura, "Helvetica Neue", sans-serif;
  /* font-size: 48px; */
  padding-left: 0.25em;
  padding-right: 0.25em;
  /* margin-top: 0.25em; */
  border-radius: 0.5em;
  margin-top: 0.3em;
}

.outcome-container {
  opacity: 0;
  margin-top: 1.5em;
  border: 1px dashed hsl(0, 0%, 80%);
  padding: 1em;
  border-radius: 0.5em;
}

.revealed {
  opacity: 1;
  transition: opacity 0.5s;
}

.outcome li {
  margin-left: 2em;
}