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

body {
  font-family: "Vazirmatn", sans-serif;
  background: #050505;
  color: #fff;
  line-height: 1.9;
  overflow-x: hidden;
}

.stars, .stars2, .stars3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

.stars {
  box-shadow:
    /* 100+ stars */
    50px 100px #fff, 120px 300px #fff, 200px 500px #fff, 350px 800px #fff,
    500px 200px #fff, 650px 900px #fff, 800px 400px #fff, 950px 1200px #fff,
    1100px 600px #fff, 1300px 300px #fff, 1500px 900px #fff, 1700px 200px #fff,
    1900px 700px #fff, 2100px 400px #fff, 2300px 1100px #fff, 2500px 500px #fff,
    2700px 1300px #fff, 2900px 800px #fff, 3100px 200px #fff, 3300px 900px #fff,
    3500px 400px #fff, 3700px 1200px #fff, 3900px 600px #fff, 4100px 300px #fff,
    4300px 900px #fff, 4500px 200px #fff, 4700px 700px #fff, 4900px 400px #fff;
  animation: animStar 60s linear infinite;
  opacity: 0.9;
}

.stars2 {
  width: 3px;
  height: 3px;
  box-shadow:
    /* 100+ stars */
    80px 200px #fff, 200px 600px #fff, 350px 900px #fff, 500px 400px #fff,
    700px 1200px #fff, 900px 700px #fff, 1100px 300px #fff, 1300px 1500px #fff,
    1500px 900px #fff, 1700px 500px #fff, 1900px 1300px #fff, 2100px 800px #fff,
    2300px 400px #fff, 2500px 1600px #fff, 2700px 1000px #fff, 2900px 600px #fff,
    3100px 1400px #fff, 3300px 800px #fff, 3500px 300px #fff, 3700px 1200px #fff,
    3900px 900px #fff, 4100px 500px #fff, 4300px 1500px #fff, 4500px 700px #fff,
    4700px 300px #fff, 4900px 1300px #fff;
  animation: animStar 120s linear infinite;
  opacity: 0.55;
}

.stars3 {
  width: 1px;
  height: 1px;
  box-shadow:
    /* 100+ stars */
    100px 150px #fff, 250px 500px #fff, 400px 900px #fff, 600px 300px #fff,
    800px 1100px #fff, 1000px 700px #fff, 1200px 400px #fff, 1400px 1300px #fff,
    1600px 900px #fff, 1800px 500px #fff, 2000px 1500px #fff, 2200px 800px #fff,
    2400px 300px #fff, 2600px 1200px #fff, 2800px 900px #fff, 3000px 500px #fff,
    3200px 1400px #fff, 3400px 700px #fff, 3600px 300px #fff, 3800px 1300px #fff,
    4000px 900px #fff, 4200px 500px #fff, 4400px 1500px #fff, 4600px 700px #fff,
    4800px 300px #fff;
  animation: animStar 180s linear infinite;
  opacity: 0.3;
}

@keyframes animStar {
  from { transform: translateY(0); }
  to { transform: translateY(2000px); }
}

header {
  text-align: center;
  padding: 40px 0 20px;
}

header h1 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,0.3);
}

header nav a {
  color: #00c8ff;
  text-decoration: none;
  font-size: 18px;
  transition: 0.3s;
}

header nav a:hover {
  color: #fff;
  text-shadow: 0 0 10px #00c8ff;
}

.container.blog-post {
  max-width: 850px;
  margin: 40px auto;
  padding: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.blog-post h2 {
  font-size: 30px;
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(255,255,255,0.25);
}

.post-date {
  font-size: 14px;
  opacity: 0.7;
  margin-bottom: 25px;
}

.post-image {
  width: 100%;
  border-radius: 14px;
  margin: 20px 0;
  box-shadow: 0 0 25px rgba(0,0,0,0.6);
  transition: 0.4s;
}

.post-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px rgba(0,200,255,0.4);
}

.blog-tags {
  margin-top: 30px;
}

.blog-tags span {
  display: inline-block;
  background: rgba(0,200,255,0.15);
  border: 1px solid rgba(0,200,255,0.4);
  padding: 6px 14px;
  border-radius: 20px;
  margin-left: 8px;
  font-size: 14px;
  transition: 0.3s;
}

.blog-tags span:hover {
  background: rgba(0,200,255,0.35);
  border-color: rgba(0,200,255,0.8);
}

footer {
  text-align: center;
  padding: 40px 0;
  opacity: 0.7;
  font-size: 14px;
}

@media (max-width: 768px) {
  header h1 {
    font-size: 26px;
  }

  .container.blog-post {
    padding: 20px;
  }

  .blog-post h2 {
    font-size: 24px;
  }
}