@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');


body {
  /* background-color: rgba(63, 191, 146, 0.2); */
  text-align: center;
  font-family: Montserrat, Raleway, Roboto, Arial, Helvetica, sans-serif;
}

h1 {
  color: #890064;
  font-size: 4em;
}

#result {
  font-size: 100px; 
  /* fontsize was 6em - too big */
  color: #890064;
}

.container {
  margin-top: 15px;
  margin-bottom: 0;
}

.option {
  margin-top: 10px;
  width: 250px;
  height: 30px;
  font-size: 1.8em;
  font-family: Montserrat, Raleway, Roboto, Arial, Helvetica, sans-serif;
  font-weight: 100;
  background-color: rgba(63, 191, 146, 0);
  border: 0;
  outline: 0;
  border-bottom: 2px solid #662209;
}

#add-button {
  border: 0;
  margin-top: 10px;
  background-color: rgba(63, 191, 146, 0);
  font-weight: 500;
  color: #2393a4;
  font-size: 1.5em;
}

#add-button, #choose-button, #reset-button:focus {
  outline: none;
}

input::placeholder {
  color: rgba(30, 30, 30, 0.4)
}

#choose-button {
  margin-top: 30px;
  border: #662209 2px solid;
  background-color: rgba(63, 191, 146, 0);
  color: #662209;
  font-size: 1.5em;
  -webkit-transform: rotate(-1.5deg);
  -moz-transform: rotate(-1.5deg);
  -ms-transform: rotate(-1.5deg);
  -o-transform: rotate(-1.5deg);
  transform: rotate(-1.5deg);
}

#choose-button:hover {
  background-color: rgba(63, 191, 146, 0);
  color: #D63900;
  border: #D63900 2px solid;
  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
}

#reset-button {
  margin-top: 30px;
  border: #939393 2px solid;
  background-color: rgba(63, 191, 146, 0);
  color: #939393;
  font-size: 1.5em;
  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
}

#reset-button:hover {
  color: #777;
  border: #777 2px solid;
  -webkit-transform: rotate(-6.5deg);
  -moz-transform: rotate(-6.5deg);
  -ms-transform: rotate(-6.5deg);
  -o-transform: rotate(-6.5deg);
  transform: rotate(-6.5deg);
}

.article {
  text-align: left;
  padding: 5% 10%;
}

.article p {
  all: unset;
  font-family: Montserrat, Raleway, Roboto, Arial, Helvetica, sans-serif;
  text-align: left;
}