* {
  box-sizing: border-box;
}

body {
  background-color: grey;
  color: black;
  font-family: Verdana;
}

h1 {
  font-size: calc(2vw + 1em);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  font-size: calc(1vw);
}
.pane {
  height: 100%;
  /* Solution: Set container width percentage and min
  and max width with one declaration, using the clamp()
  function  */
  width: clamp(480px, 60%, 1000px);
  /* Solution: Center container using auto margins */
  margin: 0 auto;
  /* Solution: Set container top/bottom padding of 0 on both sides
  and left/right padding of 20px on both sides */
  padding: 0 20px;
  /* Solution: Apply linear gradient from top to bottom */
  background: linear-gradient(to bottom, #96bf88, #6f756d);
}

h1,
.controls {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Solution: Set the h1 and controls div to each be 100px high */
  height: 100px;
}