styles.css

.inputContainer {
  background-color: #5c5c5c;
  width: 70%;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#amount {
  font-size: 1.1rem;
  background: none;
  border: none;
  outline: none;
  padding: none;
  color: white;
  width: 100%;
}

/* from https://coolors.co */
body {
  background: hsla(332, 53%, 82%, 1);

  background: linear-gradient(
    135deg,
    hsla(332, 53%, 82%, 1) 0%,
    hsla(176, 57%, 89%, 1) 100%
  );

  background: -moz-linear-gradient(
    135deg,
    hsla(332, 53%, 82%, 1) 0%,
    hsla(176, 57%, 89%, 1) 100%
  );

  background: -webkit-linear-gradient(
    135deg,
    hsla(332, 53%, 82%, 1) 0%,
    hsla(176, 57%, 89%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#E9B7CE", endColorstr="#D3F3F1", GradientType=1 );
  overflow: hidden;
}

.mainContainer {
  background: #353535;
  height: 85%;
  width: 30%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -95%);
  border-radius: 25px;
  font-family: "Lato", Avenir Next, Helvetica, sans-serif;
  color: white;
}

#button {
  border: none;
  outline: none;
  padding: 10px;
  background-color: white;
  width: 15%;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 40%;
  color: black;
  border-radius: 5px;
  font-size: 1.2vw;
}

.title {
  position: absolute;
  top: 12%;
  left: 14%;
  font-size: 1.5vw;
}

#output {
  position: absolute;
  top: 45%;
  font-size: 2vw;
  width: 100%;
  text-align: center;
}