* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
:root {
  --primary-color: #c2a569;
  --secondary-color: #13171a;
  --card-color: #1b1f22;
  --paragraph-color: #716042;
  --gold: #c7a86a;
  --gold2: #b5944f;
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(assets/header.png) no-repeat center/cover;
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 20, 0.65),
    rgba(10, 14, 20, 0.35)
  );
  z-index: 1;
}

.content {
  width: min(400px, 86vw);
  height: min(400px, 86vw);
  border-radius: 50%;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  color: var(--gold2);
  font-weight: bold;
  background-color: #1b1f2279;
  box-shadow:
    0 0 40px rgba(194, 165, 105, 0.25),
    0 0 80px rgba(194, 165, 105, 0.15);
}

h1 {
  font-size: 50px;
  padding: 10px;
}

.time {
  gap: 5px;
}

.cs-clock {
  padding: 20px;
  font-size: 20px;
}

.clock {
  border: solid 2px var(--gold);
  border-radius: 10px;
  padding: 10px;
}

h2 {
  margin: 10px;
}

/* === Responsive tweaks === */
h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
}

.time p {
  font-size: clamp(12px, 2.4vw, 16px);
}

#timeDisplay {
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Tablet & phone: use Syvra logo as background */
@media (max-width: 1024px) {
  .container {
    background:
      radial-gradient(
        900px 600px at 50% 35%,
        rgba(255, 255, 255, 0.05),
        transparent 60%
      ),
      #07090d;
  }
  .container::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        800px 520px at 50% 38%,
        rgba(0, 0, 0, 0.35),
        rgba(0, 0, 0, 0.78)
      ),
      url(assets/logo.png) no-repeat center / min(520px, 92vw);
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
    filter: saturate(0.95) contrast(1.05);
  }
  .container::before {
    z-index: 1;
  }
  .content {
    z-index: 2;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .content {
    width: min(340px, 92vw);
    height: min(340px, 92vw);
  }
}