/* style <Reservation/> */
#reservation,
#reservation form,
#reservation h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ed7e90;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#reservation h1 {
  margin: 1.5rem 0 1.5rem 0;
}

#reservation input,
#reservation select {
  color: #ed7e90;
  text-align: center;
  width: 30vw;
  background-color: #fefae0;
  border: 0;
  margin: 0.5rem 0 1.25rem 0;
}

#reservation input::placeholder {
  color: #fae560;
}

#reservation-button {
  font-weight: 700;
  width: 10vw !important;
  color: #fefae0 !important;
  background-color: #ed7e90 !important;
  margin-bottom: 2rem !important;
}

/* responsive styling */
@media (max-width: 575px) {
  #reservation input,
  #reservation select {
    width: 70vw;
  }
  #reservation-button {
    height: 80px;
    width: 40vw !important;
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 6rem !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #reservation input,
  #reservation select {
    width: 60vw;
  }
  #reservation-button {
    width: 15vw !important;
    margin-bottom: 4rem !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #reservation input,
  #reservation select {
    width: 50vw;
  }
  #reservation-button {
    margin-bottom: 4rem !important;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  #reservation input,
  #reservation select {
    width: 40vw;
  }
}