:root {
  --select-background: #e0e0e0;
  --select-background--dark: #ed3563;
}

/* Animation made with https://www.gradient-animator.com/ */
body {
  overflow: hidden;
  background: linear-gradient(50deg, #8484eb, #3e4fa5);
  background-size: 12000% 12000%;

  -webkit-animation: AnimationName 26s ease infinite;
  -moz-animation: AnimationName 26s ease infinite;
  animation: AnimationName 26s ease infinite;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 17%;
  }
  100% {
    background-position: 0% 84%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 17%;
  }
  100% {
    background-position: 0% 84%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 84%;
  }
  50% {
    background-position: 100% 17%;
  }
  100% {
    background-position: 0% 84%;
  }
}

h1,
h2,
h3,
p,
#result {
  color: white;
  font-family: "Gabarito", sans-serif;
  text-align: center;
}

select {
  background-color: var(--select-background);
  color: black;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  width: 150px;
}

/* Style the last select menu differently */
#selectContainer select:last-of-type {
  background-color: var(--select-background--dark);
  color: white;
}

select option {
  background-color: var(--select-background);
  color: black;
  padding: 5px;
}

#selectContainer {
  display: flex;
  gap: 1em;
  width: 100%;
  justify-content: center;
  text-align: center;
}

#result {
  margin-top: 50px;
}