style.css

/* FONT IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

body {
  background-color: #FFF0E5; 
  text-align: center;
  font-family: Roboto, sans-serif; /* Not my favorite font but it's a decent placeholder */
}

main {
  background-color: white;
  margin: 0 50px;
  padding: 20px;
}

h1 {
  font-family: "PT Serif", serif;
  font-weight: 600;
  font-size: 36px;
}

h2 {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-size: 24px;
}

hr {
  background-color: whitesmoke;
  border: none;
  display: block;
  height: 2px;
  margin: 1.5rem 0;
}

.hidden {
  display: none;
}

#inputlabel {
  width: 150px;
  margin: 0 auto;
  display: block;
  border-radius: 5px;
  padding: 0.5em;
  color: white;
  background-color: #1557FF;
  transition: 150ms ease-in;
  outline: none;
}

#inputlabel:hover {
  background-color: #3A10E5;
  transform: scale(1.05)
}

#result-container {
  display: none;
}

#result {
  width: 100%;
  max-width: 15rem;
}