html, body {
  height: 100%;
  margin: 0;
  /* slightly grey instead of full black */
  background: #2b2b2b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Topbar clock container */
#clock {
  position: fixed;
  top: 10px;
  right: 10px;
  color: white;
  text-align: right;
  user-select: none;
  /* Ensure the topbar doesn't grow beyond the boundary line */
  max-height: 80px;
  overflow: hidden;
}

#time {
  font-size: 1.8rem;
  letter-spacing: 0.02em;
}

/* Date + weekday inline wrapper */
#date-wrap { 
  /* keep items inline and similar width */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  color: rgba(255,255,255,0.95);
}

#date {
  opacity: 0.85;
  /* shift date 10px to the right as requested */
  position: relative;
  left: 10px;
}

#current-weekday {
  opacity: 0.85;
  min-width: 90px; /* give a bit of fixed width so it aligns with date visually */
  text-align: left;
}

/* small inline rotating weekday (kept for accessibility but moved to left column) */
#weekday {
  margin-top: 6px;
  letter-spacing: 0.08em;
  font-weight: 500;
  transition: opacity 160ms ease, transform 240ms ease;
  opacity: 1;
}

/* Left full-height column for short weekdays */
#weekday-column {
  position: fixed;
  left: 1140px;
  top: -670px;
  bottom: 0;
  rotate: -90deg;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
}

/* Vertical separator right before (to the right of) the weekday column */
#weekday-column::before {
    content: "";
    position: absolute;
    left: 122px;
    top: 640px;
    transform: translateY(-50%);
    rotate: -90deg;
    width: 4px;
    height: 100px; /* adjustable length */
    background: #ffffff;
    pointer-events: none;
    z-index: 25;
}

.weekday-left {
  color: white;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  writing-mode: horizontal-tb;
  transform: none;
}

.fade-in {
  opacity: 0;
  transform: translateY(-6px);
  animation: slideIn 260ms forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make sure content is accessible on small screens */
@media (max-width: 480px) {
  #time { font-size: 1.4rem; }
}

/* Horizontal top boundary line across the page */
/* Top boundary line across the page */
#topline {
  position: fixed;
  /* move the line further down as requested */
  top: 100px; /* lowered boundary */
  left: 0;
  right: 0;
  /* make it thicker and fully white */
  height: 4px;
  background: #ffffff;
  pointer-events: none;
}