html {
    box-sizing: border-box;
    font-size: 70%;
    overflow-y: scroll;
}

/*  CLOCK  */
.clock {
    grid-column: 2/3;
    grid-row: 1/3;
    width: 12rem;
    height: 12rem;
    justify-self: center;
    box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.clock .hand {
    position: absolute;
    transform-origin: bottom;
    bottom: 6rem;
    border-radius: 0.2rem;
    z-index: 1;
}

.clock .hours {
    width: 0.4rem;
    height: 3.2rem;
    background: #bec8e4;
}

.clock .minutes {
    width: 0.4rem;
    height: 4.6rem;
    background: #9baacf;
}

.clock .seconds {
    width: 0.2rem;
    height: 5.2rem;
    background: #6d5dfc;
}

.clock .point {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #6d5dfc;
    z-index: 1;
}

.clock .marker {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
}

.clock .marker::after {
    content: "";
    width: 60%;
    height: 60%;
    position: absolute;
    box-shadow: inset 1px 1px 1px #c8d0e7, inset -1px -1px 1px #FFFFFF;
    border-radius: 50%;
    top: 20%;
    left: 20%;
    filter: blur(1px);
}

.clock .marker__1,
.clock .marker__2,
.clock .marker__3,
.clock .marker__4 {
    position: absolute;
    border-radius: 0.1rem;
    box-shadow: inset 1px 1px 1px #c8d0e7, inset -1px -1px 1px #FFFFFF;
}

.clock .marker__1,
.clock .marker__2 {
    width: 0.2rem;
    height: 0.6rem;
    left: 5.6rem;
}

.clock .marker__3,
.clock .marker__4 {
    width: 0.6rem;
    height: 0.2rem;
    top: 5.6rem;
}

.clock .marker__1 {
    top: 2%;
}

.clock .marker__2 {
    top: 98%;
    transform: translateY(-0.6rem);
}

.clock .marker__3 {
    left: 2%;
}

.clock .marker__4 {
    left: 98%;
    transform: translateX(-0.6rem);
}