.button {
  padding: 0.2em 0.8em;
  border-radius: 0.2em;
  font-size: 1.2rem;
  -webkit-appearance: none;
  text-decoration: none;
}
.button.button--primary {
  color: #ffffff;
  background: #6F2C86;
}
.button:hover {
  transition-duration: 100ms;
  background: #4f1f60;
}

body {
  background: red;
}

.content-wrapper {
  background: white;
}

#question h1 {
  margin-top: 0;
}

@media screen and (max-width: 820px) {
  #question {
    margin-right: auto;
    margin-left: auto;
    padding-top: 4em;
    padding-bottom: 4em;
    text-align: center;
  }
  .quiz-info ul {
    padding: 0 2rem;
  }
  .ready, .quiz-info p {
    padding: 0 2rem;
  }
  #question svg {
    width: 80%;
  }
  #question > #answer {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
  }
  .left {
    background-color: #E3E3E3;
    box-shadow: 0.25em 0.25em 0.375em rgba(0, 0, 0, 0.25);
    border-radius: 3.75em;
    margin-bottom: 1em;
    width: 22em;
    margin-right: auto;
    margin-left: auto;
  }
  .left h3 {
    padding-top: 1em;
  }
  .right {
    background-color: #E3E3E3;
    box-shadow: 0.25em 0.25em 0.375em rgba(0, 0, 0, 0.25);
    border-radius: 3.75em;
    width: 22em;
    margin-right: auto;
    margin-left: auto;
  }
  .right h3 {
    padding-top: 1em;
  }
  .developers {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .info {
    display: flex;
    justify-content: start;
  }
  .desc {
    width: 5.5em;
    font-weight: 700;
    padding-left: 2em;
    text-align: initial;
  }
}
@media screen and (min-width: 820px) {
  #question {
    margin-right: auto;
    margin-left: auto;
    width: 66em;
    padding-top: 4em;
    padding-bottom: 4em;
    text-align: center;
  }
  #question > #answer {
    width: 58em;
    margin-left: auto;
    margin-right: auto;
  }
  .left {
    background-color: #E3E3E3;
    width: 23.75em;
    height: 16.875em;
    box-shadow: 0.25em 0.25em 0.375em rgba(0, 0, 0, 0.25);
    border-radius: 3.75em;
  }
  .left h3 {
    padding-top: 1em;
  }
  .right {
    margin-right: 4em;
    background-color: #E3E3E3;
    width: 23.75em;
    height: 16.875em;
    box-shadow: 0.25em 0.25em 0.375em rgba(0, 0, 0, 0.25);
    border-radius: 3.75em;
  }
  .right h3 {
    padding-top: 1em;
  }
  .developers {
    display: flex;
    justify-content: center;
  }
  .info {
    display: flex;
    justify-content: start;
  }
  .desc {
    width: 6.5em;
    font-weight: 700;
    padding-left: 2em;
    text-align: initial;
  }
}