html,
body,
main {
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
}

main {
  display: flex;
  justify-content: center;
  background: radial-gradient(
    circle,
    rgba(255, 0, 0, 0.3) 0%,
    rgba(255, 255, 0, 0.3) 20%,
    rgba(0, 255, 0, 0.3) 40%,
    rgba(0, 255, 255, 0.3) 60%,
    rgba(0, 0, 255, 0.3) 80%,
    rgba(255, 0, 255, 0.3) 100%
  );
  height: 100vh;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  padding: 0;
}

.flex-item {
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#segment-sentence,
#topic-sentence {
  font-size: 4em;
}

.choice-text {
  font-size: 3em;
  padding: 10% 0;
}

.choice-button {
  font-size: 2em;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 2%;
  background: linear-gradient(
    90deg,
    rgb(255, 73, 73) 0%,
    rgb(255, 85, 85) 50%,
    rgb(224, 224, 224) 50%,
    rgb(255, 255, 255) 100%
  );
  box-shadow: inset -5px -10px 10px rgba(0, 0, 0, 0.486),
    5px 10px 10px rgba(0, 0, 0, 0.486);
}

.choice-button:hover {
  border: 3px solid white;
  background: linear-gradient(
    90deg,
    rgb(255, 85, 85) 0%,
    rgb(255, 130, 130) 50%,
    rgb(255, 255, 255) 50%,
    rgb(255, 255, 255) 100%
  );
}