/* === Base Reset === */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #e6f6ff;
  overflow: auto;
  position: relative;
  z-index: 0;
  background: #021024; /* fallback */
}

/* === Gradient Background === */
.gradient-bg {
  content: "";
  position: fixed;
  top: -100%; left: -100%;
  width: 500%; height: 500%;
  background: linear-gradient(135deg,
    #021024,
    #0a3d62,
    #1e3799,
    #2980b9,
    #3c40c6
  );
  z-index: -3;
  pointer-events: none;
  animation: driftForever 25s ease-in-out infinite;
}


@keyframes driftForever {
  0%   { transform: translate(0%, 0%); }
  50%  { transform: translate(-50%, -50%); }
  100% { transform: translate(0%, 0%); }
}

/* === Starfield Scatter (Box-Shadow Method) === */
.stars-layer {
  position: fixed;
  width: 4px; height: 4px;
  background: transparent;
  z-index: -2;
  pointer-events: none;
}

/* Example scatter — add many more for density */
.stars-far {
  animation: starDrift 35s ease-in-out infinite;
  box-shadow:
    120px 80px #999, 240px 300px #aaa, 400px 150px #bbb, 600px 500px #999,
    800px 220px #aaa, 1000px 700px #bbb, 1250px 400px #999, 1400px 600px #aaa,
    1600px 200px #bbb, 1800px 750px #999, 2000px 300px #aaa, 2200px 500px #bbb,
    2400px 100px #999, 2600px 650px #aaa, 2800px 350px #bbb, 3000px 800px #999,
    3200px 250px #aaa, 3400px 600px #bbb, 3600px 150px #999, 3800px 700px #aaa,
    4000px 400px #bbb, 4200px 200px #999, 4400px 650px #aaa, 4600px 300px #bbb,
    4800px 750px #999, 5000px 100px #aaa, 5200px 500px #bbb, 5400px 250px #999,
    5600px 600px #aaa, 5800px 350px #bbb, 6000px 700px #999, 6200px 200px #aaa,
    6400px 550px #bbb, 6600px 300px #999, 6800px 650px #aaa, 7000px 150px #bbb,
    7200px 600px #999, 7400px 250px #aaa, 7600px 700px #bbb, 7800px 400px #999,
    8000px 200px #aaa, 8200px 650px #bbb, 8400px 300px #999, 8600px 750px #aaa,
    8800px 100px #bbb, 9000px 500px #999, 9200px 250px #aaa, 9400px 600px #bbb,
    9600px 350px #999, 9800px 700px #aaa, 40px 9000px #aaa, 80px 9500px #bbb, 120px 9800px #999;
  
  opacity: 0.6;
}

.stars-mid {
  animation: starDrift 25s ease-in-out infinite;
  box-shadow:
    130px 120px #ccc, 260px 350px #ddd, 420px 180px #eee, 640px 520px #ccc,
    860px 260px #ddd, 1080px 740px #eee, 1280px 420px #ccc, 1460px 640px #ddd,
    1660px 240px #eee, 1860px 780px #ccc, 2060px 320px #ddd, 2260px 540px #eee,
    2460px 140px #ccc, 2660px 680px #ddd, 2860px 380px #eee, 3060px 820px #ccc,
    3260px 280px #ddd, 3460px 640px #eee, 3660px 180px #ccc, 3860px 720px #ddd,
    4060px 440px #eee, 4260px 240px #ccc, 4460px 680px #ddd, 4660px 340px #eee,
    4860px 780px #ccc, 5060px 140px #ddd, 5260px 540px #eee, 5460px 280px #ccc,
    5660px 640px #ddd, 5860px 380px #eee, 6060px 740px #ccc, 6260px 240px #ddd,
    6460px 580px #eee, 6660px 340px #ccc, 6860px 700px #ddd, 7060px 180px #eee,
    7260px 640px #ccc, 7460px 280px #ddd, 7660px 740px #eee, 7860px 420px #ccc,
    8060px 240px #ddd, 8260px 680px #eee, 8460px 340px #ccc, 8660px 780px #ddd,
    8860px 140px #eee, 9060px 540px #ccc, 9260px 280px #ddd, 9460px 640px #eee,
    9660px 380px #ccc, 9860px 740px #ddd, 60px 9200px #ddd, 100px 9600px #eee, 140px 9900px #ccc;
  opacity: 0.8;
}

.stars-near {
  animation: starDrift 15s ease-in-out infinite;
  box-shadow:
    140px 160px #fff, 280px 380px #eee, 440px 200px #fff, 680px 560px #ddd,
    900px 300px #fff, 1120px 780px #eee, 1320px 440px #fff, 1520px 660px #ddd,
    1720px 280px #fff, 1920px 800px #eee, 2120px 360px #fff, 2320px 560px #ddd,
    2520px 160px #fff, 2720px 700px #eee, 2920px 400px #fff, 3120px 840px #ddd,
    3320px 300px #fff, 3520px 660px #eee, 3720px 200px #fff, 3920px 740px #ddd,
    4120px 480px #fff, 4320px 260px #eee, 4520px 700px #fff, 4720px 380px #ddd,
    4920px 800px #fff, 5120px 160px #eee, 5320px 560px #fff, 5520px 300px #ddd,
    5720px 660px #fff, 5920px 400px #eee, 6120px 760px #fff, 6320px 260px #ddd,
    6520px 600px #fff, 6720px 360px #eee, 6920px 720px #fff, 7120px 200px #ddd,
    7320px 660px #fff, 7520px 300px #eee, 7720px 760px #fff, 7920px 440px #ddd,
    8120px 260px #fff, 8320px 700px #eee, 8520px 360px #fff, 8720px 800px #ddd,
    8920px 160px #fff, 9120px 560px #eee, 9320px 300px #fff, 9520px 660px #ddd,
    9720px 400px #fff, 9920px 760px #eee, 50px 9300px #fff, 90px 9700px #eee, 130px 9950px #fff;
  opacity: 1;
}

@keyframes starDrift {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-300px,-300px); }
  100% { transform: translate(0,0); }
}

/* === Navigation Bar === */
nav {
  background-color: #061a3a;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

nav a {
  color: #bfe1ff;
  text-decoration: none;
  padding: 0.6rem 4rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  position: relative;
  transition: all 0.3s ease;
  border-left: 1px solid rgba(180,220,255,0.25);
}

nav a:first-child {
  border-left: none;
}

nav a:hover {
  color: #fff;
  background: radial-gradient(circle at center,
    rgba(80,140,255,0.4) 0%,
    rgba(40,80,160,0.25) 60%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(120,180,255,0.6),
              0 0 24px rgba(80,140,255,0.4);
  border-radius: 6px;
  transform: scale(1.05);
}

/* === Gradient Content Boxes === */
.header-box, .description-box {
  width: min(1200px, 95%);
  margin: 1.25rem auto;
  padding: 1.25rem 1.8rem;
  border-radius: 12px;
  border: 1px solid rgba(120,170,255,0.25);
  background-color: #061a3a; /* solid dark blue */
  box-shadow: 0 8px 28px rgba(2,16,48,0.35);
  position: relative;
  z-index: 1;
}

/* === Centered Header Title with Glow === */
.header-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

@keyframes glowFade {
  0%   { text-shadow: 0 0 18px #74b9ff, 0 0 36px #2b6fbf; }
  42%  { text-shadow: 0 0 18px #74b9ff, 0 0 36px #2b6fbf; }
  100% { text-shadow: none; }
}

.header-box h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #cfe9ff;
  text-align: center;
  transition: transform 0.4s ease, text-shadow 0.4s ease;
  transform-style: preserve-3d;
}

/* Tilt effect on hover */
.header-box h1:hover {
  transform: perspective(600px) rotateX(10deg) rotateY(10deg);
  text-shadow: 0 8px 20px rgba(116,185,255,0.7);
}


/* === Description Text === */
.description-box p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #dbefff;
}

/* Box look: same as description-box */
.blog-box {
  width: 95%;
  margin: 1.25rem auto;
  padding: 1.25rem 1.8rem;
  border-radius: 12px;
  border: 1px solid rgba(120,170,255,0.25);
  background-color: #061a3a;
  box-shadow: 0 8px 28px rgba(2,16,48,0.35);
  position: relative;
  z-index: 1;
}

/* Text inside the blog-box */
.blog-box p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #dbefff;
}

.about-box {
  width: 95%;
  margin: 1.25rem auto;
  padding: 1.25rem 1.8rem;
  border-radius: 12px;
  border: 1px solid rgba(120,170,255,0.25);
  background-color: #061a3a;
  box-shadow: 0 8px 28px rgba(2,16,48,0.35);
  position: relative;
  z-index: 1;
}

/* Text inside the blog-box */
.about-box p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #dbefff;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #001f3f, #003366, #000000); /* cosmic gradient */
  color: #fff;
}

.projects {
  padding: 2rem;
  text-align: center;
}

.projects h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3rem;              /* bigger text */
  margin: 2rem auto;            /* space above/below, centered */
  background-color: #002244;    /* deep cosmic blue */
  color: #ffffff;               /* bright white text */
  padding: 1rem 2rem;           /* more breathing room */
  border-radius: 12px;
  width: 95%;                   /* stretch across screen */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  text-align: center;
}

@keyframes glow {
  from { text-shadow: 0 0 10px #00aaff; }
  to { text-shadow: 0 0 20px #00aaff, 0 0 30px #00ccff; }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 per row desktop */
  gap: 2rem;
}

.project-box {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  text-decoration: none;
  color: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.project-box h2 {
  font-family: 'Orbitron', sans-serif;
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.project-box p {
  font-size: 0.95rem;
  color: #333;
}

.project-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.6); /* glowing hover effect */
}

    /* Responsive: 2 per row on smaller screens */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr; /* single column on very small screens */
  }
}

/* === Responsive Tweaks === */
@media (max-width: 640px) {
  .header-box { min-height: 100px; padding: 1rem; }
  nav a { margin: 0 8px; display: inline-block; font-size: 0.95rem; }
}