body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Inter", sans-serif;
}

/* styling for main container of both input and output containers. */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 550px;
  height: 730px;
}
/* all input container styling below */
.input-container {
  color: white;
  background-color: #6943FF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 285px;
  width: 550px;
}
.input-container h1 {
  font-size: 28px;
}
/* need to change input type to not have the arrows */
.input-container input {
  font-size: 58px;
  text-align: center;
  max-width: 130px;
  max-height: 84px;
  color: #FFFFFF;
  border: 2px solid #B295FF;
  background-color: #6943FF;
  border-radius: 5px;
  margin-bottom: 25px;
}
.input-container button {
  width: 118px;
  height: 41px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  color: #353535;
}

/* all output container styling below */
.output-container {
  color: black;
  background-color: #F4F4F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 445px;
  width: 550px;
  text-align: center;
}
.info-cards {
  width: 500px;
  height: 106px;
  background-color: #FFFFFF;
  color: #5A537B;
  margin: 10px 0px;
  border-radius: 5px;
}
.info-cards h2 {
  font-weight: 550;
}