@import url("https://fonts.googleapis.com/css2?family=Hubballi&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,400;1,100;1,200;1,400&display=swap");

body {
  background-color: #023047;
  color: #023047;
  /* font-family: "Hubballi", cursive; */
  font-family: "Raleway", sans-serif;
}
#main {
  width: 475px;
  height: 275px;
  position: absolute;
  top: calc(50vh - 137.5px);
  left: calc(50vw - 237.5px);
  background-color: #219ebc;
  border-radius: 10px;
}
#gridInp {
  display: grid;
  column-gap: 10px;
  row-gap: 5px;
  width: 400px;
  position: relative;
  top: calc(50% - 110px);
  margin: auto;
  left: 10px;
}
.timerInp {
  font-family: monospace;
  text-align: center;
  font-size: 80px;
  display: inline-block;
  background-color: inherit;
  height: 130px;
  width: 100px;
  border: 2px solid #023047;
  border-radius: 5px;
}
.timerInp:hover {
  cursor: default;
}
.timerInp:focus {
  outline: none;
}
#hrs {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
#mins {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
#secs {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.lbl {
  width: 100px;
  font-size: small;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  display: inline-block;
}
.but {
  font-family: monospace;
  position: absolute;
  bottom: 27px;
  display: inline-block;
  background-color: #023047;
  color: #ffb703;
  border: none;
  border-radius: 4px;
  width: 80px;
  height: 30px;
}
.but:hover {
  cursor: pointer;
  transform: scale(1.05);
}
.but:active {
  transform: scale(0.95);
}
#strt {
  left: calc(50% - 40px);
}
#rstrt {
  left: calc(25% - 40px);
}
#rst {
  left: calc(75% - 40px);
}