@import url('https://fonts.googleapis.com/css?family=Spicy+Rice');




*{
    
    
}

body{
  
  background-image: url("mrmen-clock.png");
  background-size: cover;
  height: 500px;
  background-repeat: no-repeat;


}


.clock{
    position: absolute;
    margin-top: 150px;
    margin-left: 70%;
    height: 25em;
    width:25em;

background-color: rgb(100, 29, 167);
box-shadow: 10px 8px 0 rgb(189, 81, 189);
border: 1px solid white;
border-radius: 45px;

} 

.clock-face{
  position: absolute;
  margin-top:8px;
  margin-left: 8px;
  height: 24em;
  width:24em;

background-color: rgb(243, 240, 240);
border: 2px solid rgb(18, 120, 216);
border-radius: 200px;

}

/* .mid{ 
  position: absolute;
  width: 10px;
  height: 10px;
  margin:12em;

  background-color: red;
}  */

#hour-hand{
  position: absolute;
  width: 8px;
  height: 100px;
  background-color: black;
  margin-left: 12em;
  margin-top: 6em;
  transform-origin: bottom;

  /* height: 50%;
  width:50%; */
}

#min-hand{
  position: absolute;
  width: 3px;
  height: 180px;
  background-color: black;
  margin-left: 12em;
  margin-top: 1em;
  transform-origin: bottom;

  /* height: 50%;
  width:50%; */
}


#second-hand{
  position: absolute;
  width: 3px;
  height: 180px;
  background-color: red;
  margin-left: 12em;
  margin-top: 1em;
  transform-origin: bottom;

  /* height: 50%;
  width:50%; */
}

/* @keyframe rotation{
  transform: rotate(360deg);


} */
 
#time, #date{

  position: absolute;
   font-family: 'Spicy Rice', cursive;
   color: blueviolet;
   text-shadow: 2px 5px rgb(189, 81, 189);
  font-size: 80px;

}

#time{margin-top: 15%;
  margin-left: 30%;}

#date{
  margin-top: 22%;
  margin-left: 30%;
}