@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
@keyframes idle {
  0%   {top:0px;}
  50%  {top:-10px;transform: rotate(-1deg);}
  100% {top:0px;}
}

@keyframes rotate {
  0%   {transform: rotate(-0.5deg);}
  50%  {transform: rotate(0.5deg);}
  100% {transform: rotate(-0.5deg);}
}

@keyframes bounce {
  0%   {top:0px;}
  50%  {top:-10px;}
  100% {top:0px;}
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  /* display: grid;
  place-items: center;
  background: #131419; */
  background-image: url(./img/bg.jpg);
  background-size: cover;
}
.clock{
  padding-top: 30vh;
  padding-left: 45vw;
  background: #6288b475;
  height: 8vh;
  
  line-height: 8vh;
  text-align: center;
  padding: 0 20px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
  border-radius: 5px;
}
.clock .display{
  font-size: 4vh;
  color: white;
  letter-spacing: 2px;
  font-family: 'Libre Baskerville', serif;
}
#haruna{
  height: 80vh;
  position: relative;
  animation-name: idle;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  transform-origin: 50% 100%;
}