body {
  margin: 5em 1rem 5em 1rem;
  background: #ecf0f3;
  align-items: center;
  text-align: center;
  justify-content: center;
  place-items: center;
  overflow: hidden;
  font-family: poppins;
}

h2 {
  margin: auto;
  width: 40%;
  height: 40px;
  margin-bottom: 3em;
  /* background-color: black; */
  color: rgb(15, 10, 10);
  text-align: center;
  font-size: 40px;
}

main {
  display: flex;
  justify-content: space-around;
}

input {
  width: 14em;
  height: 3em;
  background: #ecf0f3;
  font-size: 14px;
  padding-left: 30px;
  border-radius: 50px;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button {
  cursor: pointer;
  border-radius: 8px;
  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
}

button:hover {
  background-color: blue;
  width: 6em;
  height: 2em;
  border-radius: 8px;
  box-shadow: inset 6px 6px 6px #cbced1;
}

.result {
  background-color: orangered;
  width: 14em;
  height: 2em;
  text-align: center;
  padding: 1.5em 0 0 0;
  border-radius: 10px;
}