body {
  margin: 0;
  padding: 0;
  font-family: "Arial MT Medium", sans-serif;
}

@font-face {
    font-family: "Arial MT Medium";
    src: url("Arial MT Medium.ttf") format("truetype"),
         url("Arial MT Medium.woff") format("woff"),
         url("Arial-MT-Medium.woff2") format("woff2");
}

#timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 55vh;
}

#display {
   font-size: 35rem;
  font-weight: regular;
  text-align: center;
    font-family: "Arial MT Medium";
  color: white;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.wrapper + .wrapper {
  margin-top: 5px;
}

#time-buttons, #control-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#display {
  font-size: 22vw; 
  font-weight: regular;
  text-align: center;
  margin-top: 220px;
    font-family: "Arial MT Medium";
  color: white;
}

#button-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #f1f1f1;
  padding: 30px 0;
  background-color: black;
}

#time-control {
  margin-top: 0px;
}

button {
  font-size: 32x;
  font-weight: bold;
  padding: 0px;
  margin: 0 5px;
  width: 60px;
  height: 60px;
  font-family: ARIAL;
  background-color: black;
  border-color: darkgreen ;
  border-style: solid;
  color: darkgray;
}


   p {
      position: fixed;
      bottom: 00px;
      font-size: 0.65em;
      color: #707070;
      font-family: Arial;
      text-align: left;
    }

.myInput {
  width: 100px;
  font-size: 1rem; 
  font-weight: bold;
  padding: 0.5rem; 
  border-radius: 5px;
  border: 2px solid darkgreen; 
  outline: none; 
  background-color : black; 
  color:white;

}