cal1.css

body {
  animation-name: clock-animation;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  width: 100vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  overflow-x: hidden;
  background-color: rgb(235, 234, 234);
}
#square {
  width: 420px;
  height: 550px;
  text-align: center;
  border-radius: 5px;
  border: 0.5px solid rgb(192, 192, 192);
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 19px 19px 31px #9d9d9d, -19px -19px 31px #ffffff;
  padding: 30px;
  margin: 30px;
  position: relative;
  margin-top: 10%;
}
input {
  width: 85%;
  height: 60px;
  border: 5px solid rgb(34, 34, 34);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  background: #e0e0e0;
  box-shadow: inset 20px 20px 14px #8d8d8d, inset -20px -20px 14px #ffffff;
  margin: 10px;
  font-size: xx-large;
}

button {
  padding: 7%;
  border: 1px;
  width: 70px;
  height: 88px;
  background-color: transparent;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 8px 8px 16px #aaaaaa, -8px -8px 16px #ffffff;
}
button.ezu {
  width: 170px;
  border-radius: 30px;
  background-color: #c5c5c5;
}
button:hover {
  background: linear-gradient(145deg, #cacaca, #f0f0f0);
  box-shadow: 8px 8px 16px #aaaaaa, -8px -8px 16px #ffffff;
}