/* General body */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #0b0f0c;
  color: #e0e0e0;
}

/* Header */
header {
  background: #142018;
  padding: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  border-bottom: 2px solid #2e3f34;
}

/* Navigation */
header nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* ensures links wrap if screen is small */
  gap: 16px;
  padding: 16px;
  background: rgba(26,36,29,0.95);
  border-bottom: 1px solid #2e3f34;
  z-index: 100;
}

nav a {
  display: inline-block; /* prevents collapsing */
  color: #9ad3b8;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 12px;
  border: 1px solid #2e3f34;
  border-radius: 6px;
  transition: all 0.3s ease;
}

nav a:hover {
  background: #2e3f34;
  color: #b7f5d9;
}

/* Hero sections */
.hero {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(180deg, #142018, #0b0f0c);
}
.hero h1, .hero h2 {
  font-size: 42px;
  margin-bottom: 10px;
  color: #b7f5d9;
}
.hero p {
  font-size: 20px;
  max-width: 700px;
  margin: 0 auto;
  color: #d2eadf;
}

/* Content sections */
.content {
  padding: 30px 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.content h2, .content h3 {
  color: #a3e3c4;
  margin-top: 30px;
}
.content p, .content li {
  line-height: 1.6;
  margin-bottom: 16px;
}
.content ul, .content ol {
  padding-left: 20px;
}

/* Earth Visual in index */
.earth-visual {
  margin: 40px auto;
  text-align: center;
}
.earth-visual img {
  max-width: 100%;
  border-radius: 12px;
  opacity: 0.85;
}
.earth-visual p {
  color: #b7f5d9;
  margin-top: 8px;
}
.earth-clock {
    text-align: center;
    margin: 30px auto;
    padding: 20px;
    max-width: 400px;
    border: 2px solid #2e3f34;
    border-radius: 12px;
    background: rgba(20,32,24,0.6);
    color: #b7f5d9;
}

.earth-clock h2 {
    font-size: 28px;
    margin-bottom: 12px;
    color: #9ad3b8;
}
.earth-clock p {
    font-size: 20px;
    margin: 6px 0;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background: #142018;
  border-top: 1px solid #2e3f34;
  color: #9eb5a8;
  margin-top: 40px;
}

/* Links in content */
a {
  color: #9ad3b8;
}
a:hover {
  color: #b7f5d9;
}

/* Notfound page */
.notfound {
  text-align: center;
  padding: 100px 20px;
}
.notfound h1 {
  font-size: 60px;
  color: #f55a5a;
}
.notfound p {
  font-size: 22px;
  color: #e0e0e0;
}
.notfound a {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid #2e3f34;
  border-radius: 6px;
  text-decoration: none;
  color: #9ad3b8;
  transition: 0.3s;
}
.notfound a:hover {
  background: #2e3f34;
}