body {
  margin: 0;
  background: black;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;

  display: grid;
  grid-template-areas:
    "datum"
    "status"
    "logo"
    "icons";

  row-gap: 16px;
  justify-items: center;
  text-align: center;
}

/* DATUM */
.datum {
  grid-area: datum;
  font-size: 1.05rem;
}

/* STATUS BASIS */
.status {
  grid-area: status;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 1.1rem;
  font-weight: 600;
}

/* STATUS ICON */
.status .icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* ===================== */
/* OPEN (iets groter + zacht knipperen) */
/* ===================== */

.status.open {
  color: #6dff9c;
  font-size: 1.35rem;              /* iets groter */
  animation: softPulse 4s ease-in-out infinite;
}

.status.open .icon {
  background: #00ff66;
  box-shadow: 0 0 6px rgba(0, 255, 102, 0.6);
}

/* ===================== */
/* DICHT (rustig) */
/* ===================== */

.status.closed {
  color: #ff7777;
  font-size: 1.1rem;
}

.status.closed .icon {
  background: #ff3333;
}

/* ===================== */
/* ONBEKEND */
/* ===================== */

.status.unknown {
  color: orange;
  font-size: 1.1rem;
}

.status.unknown .icon {
  background: orange;
}

/* LOGO */
.logo {
  grid-area: logo;
  max-width: 360px;
  width: 100%;
}

/* ICONS ONDERAAN */
.icons {
  grid-area: icons;
  font-size: 1.5rem;
  letter-spacing: 12px;
  opacity: 0.65;
}

/* ===================== */
/* ZEER SUBTIELE ANIMATIE */
/* ===================== */

@keyframes softPulse {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.85; }
}

/* MOBIEL */
@media (max-width: 600px) {
  .logo {
    max-width: 280px;
  }

  .status.open {
    font-size: 1.25rem;
  }

  .icons {
    font-size: 1.3rem;
    letter-spacing: 10px;
  }
}