/* Aftelklok — Nordic Warmth design */
#timer {
  display:inline-flex;
  gap:12px;
  padding:0;
  border:none;
}

#timer div {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100px;
  height:110px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  font-family:'Instrument Serif', serif;
  font-size:3rem;
  font-weight:400;
  color:#1c1917;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s;
}
#timer div:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}

#timer span {
  display:block;
  font-family:'Outfit', sans-serif;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#78716c;
  margin-top:4px;
}

#days    { color:#c45d3e; }
#hours   { color:#a34a2f; }
#minutes { color:#365314; }
#seconds { color:#78716c; }
#seconds { width:80px; height:90px; font-size:2.25rem; }

@media (max-width:575.98px) {
  #timer { gap:8px; }
  #timer div { width:72px; height:82px; font-size:2rem; border-radius:12px; }
  #timer span { font-size:.6rem; }
  #seconds { width:60px; height:70px; font-size:1.5rem; }
}