/**
 * index.scss
 * - Add any styles you want here!
 */

 body {
    background: #2C303A;
  }
  
  #clock {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background: linear-gradient(145deg, #282b34, #2f333e);
    box-shadow: 20px 20px 60px #252931, -20px -20px 60px #333743;
  }
  
  #center {
    background: #D53A40;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5%;
    height: 5%;
    z-index: 10;
  }
  
  #bigHand {
    display: block;
    height: 40px;
    width: 2px;
    background-color: #D53A40;
    position: absolute;
    left: 50%;
    top: 17%;
    transform: translate(-50%, -50%), rotate(90deg);
    transform-origin: 50% 100%;
    -webkit-animation: spin-right 60s infinite steps(60);
    -moz-animation: spin-right 60s infinite steps(60);
    -ms-animation: spin-right 60s infinite steps(60);
    -o-animation: spin-right 60s infinite steps(60);
    animation: spin-right 60s infinite steps(60);
  }
  
  #smallHand {
    display: block;
    height: 30px;
    width: 2px;
    background-color: #fff;
    position: absolute;
    left: 48.9%;
    top: 26.6%;
    transform: translate(-50%, -50%), rotate(90deg);
    transform-origin: 50% 100%;
    -webkit-animation: spin-right 3600s infinite steps(60);
    -moz-animation: spin-right 3600s infinite steps(60);
    -ms-animation: spin-right 3600s infinite steps(60);
    -o-animation: spin-right 3600s infinite steps(60);
    animation: spin-right 3600s infinite steps(60);
  }
  
  #hour {
    display: block;
    height: 20px;
    width: 3px;
    background-color: #fff;
    position: absolute;
    left: 48.5%;
    top: 32%;
    -webkit-animation: spin-right 43200s infinite steps(12);
    -moz-animation: spin-right 43200s infinite steps(12);
    -ms-animation: spin-right 43200s infinite steps(12);
    -o-animation: spin-right 43200s infinite steps(12);
    animation: spin-right 43200s infinite steps(12);
  }
  
  @-webkit-keyframes spin-right {
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes spin-right {
    100% {
      -moz-transform: rotate(360deg);
    }
  }
  
  @-keyframes spin-right {
    100% {
      transform: rotate(360deg);
    }
  }