styles.css

* {
  box-sizing: border-box;
}

body {
  margin: 0; 
  background-color: #5757c7; 
  text-align: center;
  padding-bottom: 30px;
  padding-top: 30px;
}

.input {
  width: 98%;
  height: 100%;
  border: none;
  font-size: 25px;
  font-weight: bold;
  padding: 0 5px;
}

.cal {
  top: 12%;
  width: 100%;
  max-width: 322px;
  margin: 0 auto;
  background-color: rgb(20, 20, 20);
  text-align: center;
  position: absolute;
  font-family: sans-serif;
}

p {
  font-size: 0px;}

  td {
  width: 8vw; height: 10vh; 
  text-align: center; 
  font-size: 30px; 
  font-weight: bold; 
  color: white; 
  border: 2px groove white;
  border-radius: 7px;
}

td:hover {
  background-color: rgb(53, 52, 52);}

input {
  width: 98%;
  height: 100%;
  border: none;
  font-size: 25px;
  font-weight: bold;
  padding: 0px 5px;
  }

#shiftBtn {
  background-color: navy;}

#shiftBtn:hover {
  background-color: rgb(74, 74, 192);
}

#delAC {
  background-color: orangered;
 }
#delAC:hover {
  background-color: orange;
}

/* Smallest screens */
@media screen and (max-width: 600px) {
  .cal {
    left: 21%; 
  }
}

/* Small screens */
@media screen and (min-width: 601px) and (max-width: 720px) {
  .cal {
    left: 28%;
  }
}

/* Medium screens */
@media screen and (min-width: 721px) and (max-width: 900px) {
  .cal {
    left: 34%;
  }
}

/* Large screens */
@media screen and (min-width: 901px) {
  .cal {
    left: 38%;
  }
}