* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  font-family: "Orbitron", sans-serif;
  background: rgb(247, 247, 247);
  background: linear-gradient(
    90deg,
    rgba(246, 246, 246, 1) 35%,
    rgba(251, 251, 251, 1) 100%
  );
}
.casio {
  height: 100vh;
  width: 100vw;
  background-image: url(./img/watch.png);
  background-position: center;
  background-repeat: no-repeat;
  /* background-size: cover; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen {
  width: 28.05rem;
  height: 13.6rem;
  position: relative;
  margin-top: 2.5rem;
  margin-left: 0.5rem;
}

.hour {
  position: absolute;
  top: 70%;
  left: 22%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 90px;
  font-family: Orbitron;
  letter-spacing: 7px;
  font-weight: 900;
}
.min {
  position: absolute;
  top: 70%;
  left: 60%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 90px;
  font-family: Orbitron;
  letter-spacing: 7px;
  font-weight: 900;
}
.sec {
  position: absolute;
  top: 70%;
  left: 89%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 50px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
}
.session {
  position: absolute;
  top: 33%;
  left: 18%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 25px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
}
.day {
  position: absolute;
  top: 30%;
  left: 45%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 40px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
}
.date {
  position: absolute;
  top: 30%;
  left: 80%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 45px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
}
.light {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 5%;
  left: -37.8%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 45px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
  cursor: pointer;
}
.lightOnOff {
  background-color: rgba(36, 229, 36, 0.6);
  border-radius: 1.2rem;
  transition: background-color .3s;
}
#myAudio {
  display: none;
}
.alarm {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 99%;
  right: -52.8%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 45px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
  cursor: pointer;
}
.mode {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 99%;
  left: -38.5%;
  transform: translateX(-50%) translateY(-50%);
  color: #292c31;
  font-size: 45px;
  font-family: Orbitron;
  letter-spacing: 5px;
  font-weight: 900;
  cursor: pointer;
}
.alarm img{
  float: right;
}
.left{
  position: absolute;
  top: -28%;
  left: -38%;
  z-index: 5;
}
.right{
  position: absolute;
  top: -25%;
  right: -40%;
  z-index: 5;
}
.push-right{
  animation: push-right 1s ease-in-out alternate;
}
.push-left{
  animation: push-left 1s ease-in-out alternate;
}
@keyframes push-right {
  0%{
    
  }
  50%{
    transform:translateX(14px);
  }
  100%{
    

  }
}
@keyframes push-left {
  0%{
    
  }
  50%{
    transform:translateX(-14px);
  }
  100%{
    

  }
}