<div class="watch"></div>

// Inspired by my favorite Stanley Hudson moment: https://www.youtube.com/watch?v=tSwNwf2VHnw

body{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  background: 
    no-repeat center center / 22vw linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 1vw, #213F4C 1vw, #182E38 21vw, rgba(0,0,0,.15) 21vw),
        no-repeat center center radial-gradient(#FF4D61, #FF3261);
}

.watch{
  display:block;
  width:30vw;
  height:30vw;
  background:
    no-repeat center right 7vw / 4vw 2vw linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)),
    no-repeat top 3vw center / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat top 6.5vw right 6.5vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat center right 3vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat bottom 6.5vw right 6.5vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat bottom 3vw center / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat bottom 6.5vw left 6.5vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat center left 3vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    no-repeat top 6.5vw left 6.5vw / 1vw 1vw radial-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25) .5vw, rgba(0,0,0,0) .5vw),
    linear-gradient(to bottom right, #B4D6C6 25%, #A1BFB1 50%, #A9C9BA 50%, #A1BFB1 100%);
  border-radius:100%;
  box-shadow:
    inset 0 0 0 1vw #F5F1D5,
    inset 0 0 0 1.75vw #182E38,
    inset 1vw 1vw 0 1.5vw rgba(0,0,0,.15),
    .5vw .5vw 0 .25vw rgba(0,0,0,.15);
  box-sizing:border-box;
  position:relative;
  &:after{
    content:'';
    display:block;
    width:1.5vw;
    height:40%;
    background:#182E38 no-repeat top center / 1.5vw 1.5vw radial-gradient(#F5F1D5, #F5F1D5 .5vw, rgba(0,0,0,0) .5vw),
;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.75vw;
    transform-origin: center 6%;
    border-radius: .75vw;
    margin-top: -.5vw;
    animation: infinite tick 2400ms linear;
  }
  &:before{
    content:'';
    display:block;
    width:1.5vw;
    height:25%;
    background:#182E38;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.75vw;
    transform-origin: center 10%;
    border-radius: .75vw;
    margin-top: -.5vw;
    animation: infinite tick 28800ms linear;
  }  
}

@keyframes tick{
  100%{
    transform:rotate(360deg);    
  }
}