html {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to right, #434343, #000000);
}

body {
  display: flex;
  max-width: 60vw;
  min-width: 600px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  border: 4px solid black;
  background-color: #121212;
  color: rgba(255, 255, 255, 0.87);
}

input {
  width: 20%;
  height: 20%;
  background-color: #676767;
  color: white;
}

.height-container,
.weight-container,
.button-container,
.results-container {
  text-align: center;
}

#submit-btn {
  margin-top: 1.21em;
}

.results {
  display: flex;
  justify-content: space-around;
  text-align: center;
  height: 100px;
}

.number-result,
.category-result {
  width: 20%;
}

p {
  font-weight: 600;
  font-size: 1.2em;
  margin-top: 0;
}

span {
  font-size: 1.5em;
}

#error-message {
  color: red;
  font-weight: bold;
  text-align: center;
  margin-top: 1.21em;
}

#error-message:empty {
  display: none;
}