* {
    margin: 0;
    padding: 0;
    
  }

  #main-header {
    background: linear-gradient(to bottom, #0a0a23 0%, #050517 50%, #01010a 100%);
     
    width: 100%;
    position: static; 
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: left;
      
    }
    
  .nav-bar {
      
      justify-content: center;
      font-family: 'Orbitron', sans-serif;
      opacity: 0;
      animation: fadeInNav 1s ease-out forwards;
      animation-delay: 3.2s; /* Adjust to match typing duration */
      position: static; 
      
    }
  
  @keyframes fadeInNav {
    to {
      opacity: 1;
    }
  }
    
  .nav-btn {
      background: transparent;
      color: white;
      font-family: 'Orbitron', sans-serif;
      text-decoration: none;
      
      padding: 10px 20px;
      cursor: pointer;
      font-weight: bold;
      text-transform: uppercase;
      transition: all 0.3s;
      padding: 10px;
      font-size: 16px;
      margin: 10px;
      border-radius: 8px;
      border: none;
      color :gray
    }
    
  .nav-btn:nth-child(1):hover {
      background: purple;
      border-color: purple;
      color: white;
    }
    
  .nav-btn:nth-child(2):hover {
      background: red;
      border-color: red;
      color: white;
    }
    
  .nav-btn:nth-child(3):hover {
      background: yellow;
      border-color: yellow;
      color: black;
    }
    
  .nav-btn:nth-child(4):hover {
      background: black;
      border-color: black;
      color: white;
    }
    
  .nav-btn:nth-child(5):hover {
      background: white;
      border-color: white;
      color: black;
    }

    body {
        margin: 0;
        font-family: 'Exo', sans-serif;
        background: linear-gradient(to bottom, #0a0a23 0%, #050517 50%, #01010a 100%);
        color: black;
        min-height: 100vh;
        display: block;
        background-attachment: fixed;
        background-size: cover;
        padding: 2rem;
        background-image: url("beonboard.jpg");
        background-size: cover; /* make it cover the whole area */
        background-position: center; /* center the image */
        background-repeat: no-repeat; /* prevent repetition */
        align-items: center;
        
  justify-content: center;

      }

    .form {
      
      display: flex; /* this was missing */
      align-items: center; 
    justify-content: center;

    }
      
      .form-container {
        max-width: 600px;
        width: 100%;
        background: white;
        padding: 2rem;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(173, 216, 230, 0.2);
        backdrop-filter: blur(10px);
        text-align: center;
      }
      
      h1 {
        font-family: 'Orbitron', sans-serif;
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #00bfff;
      }
      
      #nameDescription {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
      }
      
      #input {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      
      input, select, textarea {
        padding: 0.75rem 1rem;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-family: 'Exo', sans-serif;
        background: black;
        color: white;
        outline: none;
        transition: box-shadow 0.2s;
      }
      
      input:focus, select:focus, textarea:focus {
        box-shadow: 0 0 0 2px #00bfff;
      }
      
      textarea {
        resize: vertical;
        min-height: 80px;
      }
      
      button {
        background: black;
        color: white;
        padding: 0.8rem 1rem;
        font-size: 1.1rem;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-family: 'Orbitron', sans-serif;
        transition: background 0.3s ease, transform 0.2s ease;
      }
      
      button:hover {
        background: #00a2d6;
        transform: translateY(-2px);
      }
      
      #response {
        margin-top: 1rem;
        font-weight: bold;
        font-family: 'Orbitron', sans-serif;
        color: #90e0ef;
      }
      .page-wrapper {
        display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px); /* leave space for header */
  padding: 2rem;
  box-sizing: border-box;
  z-index: 1;
  position: relative;
      }

      #starfield {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background: black;
      }

  
      .oval-title {
        background: black;
        color: white;
        padding: 45px 45px;
        border-radius: 50%;
        font-size: 2em;
        box-shadow: 0 0 20px rgba(255,255,255,0.5);
        max-width: 80%;
        border: 10px solid white; /* added border */
        
      }

      .title {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
      }

      @media (max-width: 768px) {
        .oval-title {
          font-size: 1.2em;
          padding: 15px 35px;
          border: 3px solid white;
        }
      }
      
      /* iPhones (Pro / Mini / SE) */
      @media (max-width: 480px) {
        .oval-title {
          font-size: 0.9em;
          padding: 12px 25px;
          border: 2px solid white;
        }
      }