:root {
  --primary-light: #8abdff;
  --primary: gold;
  --primary-dark: #5b0eeb;
  
  --white: #eeb51a;
  --greyLight-1: #e7c03f;
  --greyLight-2: #b89431;
  --greyLight-3: #eebc1a;
  --greyDark: #c99505;
}

/* 
$shadow: .3rem .3rem .6rem var(--greyLight-2), 
-.2rem -.2rem .5rem var(--white);
$inner-shadow: inset .2rem .2rem .5rem var(--greyLight-2), 
inset -.2rem -.2rem .5rem var(--white); */

.clock-con {      
  width: 12rem;
  height: 12rem;
  /* top: 50%;
  left: 50%;
  margin-top: -6rem; /* Negative half of height. */
  /* margin-left: -6rem; Negative half of width.  */
}

/*  CLOCK  */
.clock {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    width: 12rem;
    height: 12rem;
    justify-self: center;
    box-shadow: .3rem .3rem .6rem var(--greyLight-2), -.2rem -.2rem .5rem var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
  
.hand {
  position: absolute;
  transform-origin: bottom;
  bottom: 6rem;
  border-radius: .2rem;
  z-index: 200;
}
.hours {
  width: .4rem;
  height: 3.2rem;
  background: var(--greyLight-3);
}

.minutes {
  width: .4rem;
  height: 4.6rem;
  background: var(--greyDark);
}
.seconds {
  width: .2rem;
  height: 5.2rem;
  background: var(--primary);
}
.point {
  position: absolute;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--primary);
  z-index: 300;
}
.marker {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: relative;
  box-shadow: inset .2rem .2rem .5rem var(--greyLight-2), inset -.2rem -.2rem .5rem var(--white);
}

.marker::after {
    content: '';
    width: 60%;
    height: 60%;
    position: absolute;
    box-shadow: inset 1px 1px 1px var(--greyLight-2), 
    inset -1px -1px 1px var(--white);
    border-radius: 50%;
    top: 20%;
    left: 20%;
    filter: blur(1px);
}

.marker__1, .marker__2, .marker__3, .marker__4 {
    position: absolute;
    border-radius: .1rem;
    box-shadow: inset 1px 1px 1px var(--greyLight-2), 
    inset -1px -1px 1px var(--white);
}

.marker__1, .marker__2 {
    width: .2rem;
    height: .6rem;
    left: 5.6rem;
}

.marker__3, .marker__4 {
    width: .6rem;
    height: .2rem;
    top: 5.6rem;
}

.marker__1 { top: 2%; }
.marker__2 { top: 98%; transform: translateY(-.6rem);}
.marker__3 { left: 2%;}
.marker__4 { left: 98%; transform: translateX(-.6rem);}