styles.css

* {
  text-align: center;
  font-family: 'Verdana', sans-serif;
  margin: 0;
  padding: 0;
}

.content {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 15% auto 25%;
}

.output {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 10% 70% 20% ;
}

.output .info {
  height: 100%;
  vertical-align: middle;
  color: #ddd;
}

.output .history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 100%;
}

.output .average {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}

.output .average output {
  font-size: 5rem;
  font-weight: bold;
  margin: auto;
}

.output .history output {
  margin: auto;
}

.buttons {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
}

button {
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 1.5rem;
}

.hidden {
  display: none;
}


img {
  width: 20px;
}

h1 {
  font-size: 2rem; margin: 30px 0;
}

p {
  font-size: 1rem;
}