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

body {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background: radial-gradient(
    circle at center,
    #172033 0%,
    #080b12 55%,
    #030408 100%
  );

  font-family: "Orbitron", sans-serif;

  overflow: hidden;
}

.clock {
  position: relative;

  width: min(90%, 850px);

  padding: 45px 50px;

  background: #080b10;

  border: 2px solid #202733;

  border-radius: 18px;

  box-shadow:
    0 0 0 1px #05070a,
    0 25px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(255, 255, 255, 0.02);

  text-align: center;
}

.clock-label {
  margin-bottom: 25px;

  font-size: 0.75rem;

  letter-spacing: 6px;

  color: #667085;
}

.display {
  position: relative;

  padding: 35px 25px;

  background: #020305;

  border: 2px solid #161b24;

  border-radius: 10px;

  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 1),
    0 0 20px rgba(0, 0, 0, 0.8);

  overflow: hidden;
}

.display::before {
  content: "";

  position: absolute;

  inset: 0;

  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 4px,
    rgba(255, 255, 255, 0.025) 5px
  );

  pointer-events: none;
}

.time {
  position: relative;

  font-family: "Orbitron", sans-serif;

  font-size: clamp(3.5rem, 11vw, 8rem);

  font-weight: 700;

  letter-spacing: 8px;

  line-height: 1;

  color: #ff3b3b;

  text-shadow:
    0 0 5px #ff3b3b,
    0 0 15px rgba(255, 59, 59, 0.8),
    0 0 35px rgba(255, 59, 59, 0.4);
}

.ampm {
  position: absolute;

  right: 25px;
  bottom: 18px;

  font-size: 0.8rem;

  font-weight: 600;

  letter-spacing: 3px;

  color: #ff3b3b;

  text-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
}

.date {
  margin-top: 25px;

  font-size: clamp(0.65rem, 2vw, 0.9rem);

  letter-spacing: 4px;

  color: #667085;
}

@media (max-width: 600px) {
  .clock {
    padding: 30px 18px;
  }

  .display {
    padding: 30px 10px;
  }

  .time {
    letter-spacing: 3px;
  }

  .clock-label {
    letter-spacing: 3px;
  }

  .date {
    letter-spacing: 2px;
  }
}