* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: radial-gradient(circle at center, #0d0d1d 0%, #150020 50%, #0a0a18 100%);
      color: #ffffff;
      overflow: hidden;
      position: relative;
    }
    
    .stars {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      background: transparent;
      animation: moveStars 60s linear infinite;
    }
    .stars::before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      background-image:
        radial-gradient(1px 1px at 10% 10%, #ffffff 100%, transparent 0%),
        radial-gradient(1px 1px at 20% 30%, #ffffff88 100%, transparent 0%),
        radial-gradient(1px 1px at 70% 20%, #ffffff44 100%, transparent 0%),
        radial-gradient(1px 1px at 50% 80%, #ffffff77 100%, transparent 0%),
        radial-gradient(1px 1px at 90% 90%, #ffffff55 100%, transparent 0%),
        radial-gradient(1px 1px at 30% 60%, #ffffff66 100%, transparent 0%),
        radial-gradient(1px 1px at 40% 40%, #ffffff 100%, transparent 0%),
        radial-gradient(1px 1px at 60% 10%, #ffffff99 100%, transparent 0%);
      background-repeat: repeat;
      background-size: 200px 200px;
      animation: twinkle 2s infinite ease-in-out;
    }
    @keyframes moveStars {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-200px);
      }
    }
    @keyframes twinkle {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rem 4rem;
      font-weight: bold;
      font-family: 'Playfair Display', serif;
      position: relative;
      z-index: 1;
    }

    div> a {
        text-decoration: none;
        color: #ffffff;
        font-size: 1.2rem;
    }

    nav a {
      margin-left: 2rem;
      text-decoration: none;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
    }

    .hero {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 3rem 4rem;
      min-height: 80vh;
      position: relative;
      z-index: 1;
    }

    footer {
        text-align:center; 
        padding: 2rem 1rem; 
        color: #e0e0e0; 
        font-size: 0.9rem; 
        position: relative; 
        z-index: 1;
    }