* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
}

.clock-container {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#ring {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: block;
}

.date-above {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
font-weight: 300;
z-index: 1;
pointer-events: none;
}

.link-below {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
z-index: 1;
pointer-events: auto;
}

.link-below a {
color: inherit;
text-decoration: none;
opacity: 0.35;
transition: opacity 0.3s;
}
.link-below a:hover { opacity: 1; }