html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}/*This is to remove the scroll bar that is normaly seen*/

             
body{
    margin: 0;
    background-color: #F0F3FD;
}



#nav a{
    
    text-decoration:none;
    color:black;

}
#nav{


    height:10vh;
    position:sticky;
    top:0;
    z-index:1000;
    margin: 0;
    background-color:rgba(248, 248, 248, 0.637);
    transition: background-color 0.5s ease;

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items:center;
    padding: 0px 10px;
    text-decoration: none;
    font-size: large;
    font-weight: bold;
    box-shadow: 5px 0px 5px grey;
    
 
}


.nav-links{

    list-style:none;
    display: flex;
    justify-content: space-around;
    
}

.nav-btn:hover{

    background-color: #7b7979;
    cursor: pointer;
    box-shadow: 5px 5px 5px ;
}

#menu-toggle{ 
    display:none; 
    background:transparent; 
    border:none; 
    width:40px; 
    height:40px; 
}

#menu-toggle .bar{ 
    display:block; 
    width:24px; 
    height:2px; 
    margin:4px auto; 
    background:#000; 
}

main#signup{ 
    padding:20px; 
}

.signup-hero{ 

    text-align:center; 
    padding:40px 10px 10px; 

}

.signup-form-section{ 
    max-width:500px; 
    margin:0 auto; 
}

.signup-form-section form{
    display:flex; 
    flex-direction:column; 
    gap:12px; 
}

.signup-form-section input{ 
    width:100%; 
    padding:10px; 
    border:1px solid #ccc; 
    border-radius:6px; 
}

[aria-invalid="true"]{ 
    outline:2px solid #c00; 
}


@media (max-width: 1000px){
  #menu-toggle{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
}

  .nav-links{
    position:absolute; 
    top:10vh; left:0; 
    right:0; 
    background:rgba(248,248,248,0.98);
    display:none; 
    flex-direction:column; 
    gap:8px; 
    padding:10px; 
    margin:0;
  }
  .nav-open .nav-links{ 
    display:flex; 
}
}

.nav-btn{

    border: solid 1px #414141;
    width: 7vw;
    height: 4vh;
    border-radius:5px ;
}

#logo-image {
    height: 40px; /* Adjust this to control the logo's height */
    width: auto; /* Maintains the logo's aspect ratio */
}

/* Optional: Add a transition for a smooth hover effect */
#logo-image:hover {
    opacity: 0.8;
}
/* The above section is the navigation area*/






/*The below section is the footer section*/
footer{
    background-color:#7b7979 ;
    height: 8vh;
    padding: 8px;
}