body {
    margin: 0;
    font-family: Arial, sans-serif;
    zoom:100%;
    user-zoom:fixed;
    background-color: #1b1a1ad9;
 }
 
 header {
    background-color: #333;
    padding: 10px;
 }
 
 nav {
    display: flex;
    justify-content: center;
 }
 
 ul {
    list-style: none;
    margin: 0;
    padding: 0;
 }
 
 li {
    margin: 0 10px;
 }
 
 a {
    text-decoration: none;
    color: #fff;
    padding: 8px 16px;
    display: inline-block;
 }
 
 a:hover {
    background-color: #555;
 }
 
 /* Style for the main navigation */
 .main-nav {
    background-color: #333;
    user-zoom: fixed;
 }
 
 .main-nav ul {
    display: flex;
    justify-content: center;
 }
 
 .main-nav li {
    margin: 0 20px;
 }
 
 /* Optional: Change color on hover */
 .main-nav a:hover {
    background-color: #555;
    border-radius: 5px;
 }
 /* Style for the active link */
 .main-nav a.active {
    background-color: #555;
    border-radius: 5px;
 }
 
 header {
    background-color: #333;
    padding: 10px;
 }
 
 .aboutSection {
    padding: 20px;
    color: lightgrey;
    max-width: 50%;
    border-radius: 10px;
    margin: 1%;
    margin-left: 23%;
 }
 h2 {
    margin-bottom: 0.1%;
 }
 
 .indexSection{
    background-color: #474e5d;
    padding: 20px;
    color: black;
    max-width: 50%;
    border-radius: 10px;
    margin: 1%;
    margin-left: 23%;
    text-align: center;
 }

   /* Styles for the button */
   .btn {
      margin-top: 10px;
      bottom: 10px;
      right: 10px;
      background-color: #59636d;
      color: #fff;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      text-decoration: none;
    }
    
    .btn:hover {
      background-color: #0056b3;
    }

/* Your existing styles */

/* Responsive Design */
@media screen and (max-width: 768px) {
    .main-nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .main-nav ul.show {
        display: flex;
    }

    .nav-toggle {
      display: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 10px;
  }

    .aboutSection {
        max-width: 90%;
        margin: 5%;
    }

    .main-nav li {
        margin: 10px 0;
    }
}

@media screen and (max-width: 768px) {
   .nav-toggle {
       display: block;
   }

   .main-nav ul {
       display: none;
       width: 100%;
       flex-direction: column;
       text-align: center;
   }

   .main-nav ul.show {
       display: flex;
   }
}