clock.css

.clock {
    font-size: 4em;
    color: #66e2b3;
    margin-top: 70px;
    font-family: 'Suravaram', serif;
}

body {
    background-color: green;
    font-family: 'Karla', sans-serif;
}

.div {
    text-align: center;
    border: 1px darkgreen solid;
}

// ---- VARIABLES
$clockSize: 360px $clockPadding: ($clockSize / 14.4) $clockBackground: #F7F7F7 $innerBorderWidth: ($clockSize / 72) $innerBorderColor: #181818 $secondHandBackgroundColor: #ec231e // ---- DOCUMENT
html,
body height: 100% body display: flex align-items: center justify-content: center background: linear-gradient(110deg, #D2D2D2, #F5F5F5) * box-sizing: border-box !important // ---- CLOCK
.clock width: $clockSize height: $clockSize padding: $clockPadding background-color: $clockBackground border-radius: ($clockSize / 4.5) box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15) .inner position: relative width: 100% height: 100% background: #fff border: $innerBorderWidth solid $innerBorderColor border-radius: 100% box-shadow: 0 0 15px rgba(0, 0, 0, 0.75) inset .hand position: absolute top: 50% left: 50% width: ($clockSize / 50) background-color: #181818 &.hour height: ($clockSize / 4) margin-top: -($clockSize / 13.2) transform: rotate(0deg) translate(-50%, -50%) transform-origin: 0 ($clockSize / 13.2) &.minute height: ($clockSize / 3) margin-top: -($clockSize / 13.2) transform: rotate(0deg) translate(-50%, -50%) transform-origin: 0 ($clockSize / 13.2) &.second width: ($clockSize / 185) height: ($clockSize / 3) background-color: $secondHandBackgroundColor margin-top: -($clockSize / 10) box-shadow: -4px -6px 0 0 rgba(0, 0, 0, 0.15) transform: rotate(0deg) translate(-50%, -50%) transform-origin: 0 ($clockSize / 10) &:before,
&:after content: '' display: inherit position: inherit left: inherit background-color: inherit border-radius: 100% transform: translate(-50%, -50%) &:before top: ($clockSize / 3.8) width: ($clockSize / 20) height: ($clockSize / 20) box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.15) &:after top: ($clockSize / 18) width: ($clockSize / 36) height: ($clockSize / 36) box-shadow: -4px -6px 2px 0 rgba(0, 0, 0, 0.15) .graduations .graduation display: block position: absolute top: ($innerBorderWidth * 1.5) left: 50% width: ($clockSize / 185) height: ($clockSize / 40) background-color: #181818 transform: rotate(0deg) translateX(-50%) transform-origin: 0 ((($clockSize - ($clockPadding * 2)) / 2) - ($innerBorderWidth * 3)) &:nth-child(5n-4) width: ($clockSize / 90) height: ($clockSize / 18) @for $i from 1 through 60 &:nth-child(#{$i}) transform: rotate(#{( 6 * $i) - 5}deg) translateX(-50%)