nav {
       position: relative;
       top: 0;
       left: 0;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       padding: 31px;
       gap:1.5cm;
    }

    nav a{
      color: white;
      text-decoration: none;
      font-family: "Montserrat", Arial, sans-serif;
      transition: color 0.3s;
    }
    
    nav ul {
       display: flex;
       list-style: none;
       margin-left: 0px;
       padding: 0px;
       gap: 1.5em;
       position:absolute;
    }

    nav li {
       font-family: "Montserrat", Arial, sans-serif;
    }

    nav ul a {
       display: block;
       color: white;       
       padding: 20px 20px;
       position: relative;
       text-decoration: none;
       transition: color 0.2s;
       text-transform: uppercase;
       font-size: 0.9em;
       letter-spacing: 0.5px;
    }

    nav a::after {
       content: '';
       display: block;
       height: 3px;
       width: 100%;
       background: #ffc200;
       position: absolute;
       left: 0;
       bottom: 0;
       transform: scaleX(0) translateY(-5px);
       transition: transform 0.5s;
    }

    nav a:hover::after {
       color: #ffc200;
    }

    nav a:active {
       color: #ffc200;
    }

    #name-logo {
       position: absolute;
       top: 20px;
       left: 90px;
       width: 142px;
    }

    #planet-logo {
       position: absolute;
       top: 20px;
       left: 20px;
       width: 50px;
       height: 25px;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 30px;
      z-index: 10001;
    }
    
    .hamburger span {
      width: 25px;
      height: 3px;
      background: #ffc200;
      margin: 3px 0;
      transition: 0.3s;
    }
    
    .hamburger.active span:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }

    @media screen and (max-width: 800px) {
      #planet-logo {
        width: 40px;
        height: auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      
      #name-logo {
        width: 110px;
        height: auto;
        left: 55px;
        top: 50%;
        transform: translateY(-50%);
      }
      
      .hamburger {
        display: flex;
        top: 50%;
        transform: translateY(-50%);
      }
      
      nav {
        flex-direction: row;
        align-items: center;
        padding: 15px;
        gap: 0;
        justify-content: space-between;
      }
      
      nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: rgba(0, 0, 0, 0.98);
        border-left: 3px solid #ffc200;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 80px 0 0 0;
        transition: right 0.3s ease-in-out;
        z-index: 10000;
      }
      
      nav ul.active {
        right: 0;
      }
      
      nav ul li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 194, 0, 0.2);
      }
      
      nav ul a {
        padding: 20px;
        width: 100%;
        font-size: 1.1em;
      }
      
      nav ul a::after {
        display: none;
      }
      
      nav ul a:hover {
        background: rgba(255, 194, 0, 0.1);
        color: #ffc200;
      }
      
      .starheader {
        height: 70px;
        min-height: 70px;
        padding-bottom: 0;
      }
    }

nav a:hover::after {
  transform: scaleX(1) translateY(-6px);
}

#logopic{
width: 170px;
height:50px;
}

html, body {
   margin: 0;
   padding: 0;
   background: black;
   min-height: 100vh;
   overflow-x: hidden;
   }
   canvas {
   display: block;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
   }

   canvas#stars{
      position: fixed;
      top: 0;
      left: 0;
      display: block;
      z-index: 0;
      pointer-events: none;
   }

   .starheader{
   background-color:black;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
   height: 70px;
   overflow: hidden;
   z-index: 100;
   border-bottom: 3px solid white;
   position: relative;
   }

   #logo{
   width:230px;
   height:60px;
   padding: 15px;
   margin-top: px;
   margin-left : 30px;
   margin-bottom: px;
   }

   #logopic{
   width:130px;
   height:70px;
   margin-left: 20px;
   }
.hero{
   padding-top:140px;
   position: relative;
   z-index: 1;
   color: #fff;
}

main, .hero{
   position: relative;
   z-index: 1;
   color:#fff;

}