* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #0f3a52;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
}

/* 🔷 Logo */
.logo {
  position: absolute;
  top: 30px;
  left: 40px;
}

.logo img {
  height: 40px;
}

/* 🔵 Wrapper */
.wrapper {
  position: relative;
  width: 420px;
  height: 420px;
}

/* 🔵 Circle */
.circle {
  width: 100%;
  height: 100%;
  background: #123e59;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 0 0 60px rgba(255, 90, 140, 0.25);
  animation: glow 3s infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 30px rgba(255,90,140,0.2); }
  to { box-shadow: 0 0 80px rgba(255,90,140,0.5); }
}

h1 {
  letter-spacing: 6px;
  font-weight: 400;
  margin-bottom: 10px;
}

/* 🌗 Day/Night Line */
.day-line {
  width: 220px;
  height: 2px;
  margin: 10px 0;
  background: white;
  transition: 0.4s;
}

/* 📊 Progress */
.progress-bar {
  width: 220px;
  height: 10px;
  background: #0b2b3d;
  border-radius: 20px;
  overflow: hidden;
}

.progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2ea3ff, #1b6ec2);
  border-radius: 20px;
}

/* ⏰ Time */
.time {
  margin-top: 15px;
  font-size: 18px;
}

.date {
  font-size: 14px;
  opacity: 0.8;
}

/* 🌞 Orbit */
.orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.sun {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ff5c8a;
  border-radius: 50%;
  box-shadow: 0 0 25px #ff5c8a;

  top: 0;
  left: 50%;
  transform-origin: center 210px;
}

/* 📱 Responsive */
@media (max-width: 500px) {
  .wrapper {
    width: 300px;
    height: 300px;
  }

  .sun {
    transform-origin: center 150px;
  }
}