/* This is the CSS for the Horizontal Nav bar */
nav {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    width: 960px;
    margin: 20px 0;
    /*padding: 5px;*/
    padding: 10px; 
    /*background-color: #1928fc; */
    border: 1px solid #7eb2f5;
    margin: 10px; 
    background-color: rgb(22, 19, 211);
}
nav ul {
    list-style-type: none;
        height: auto;
        background: white;
}

nav ul li {  
    display: inline-block; 
    margin-right: 0.5em;
}

nav ul li a {
    padding: 0.25em 1em;
    text-decoration: none; /* no underline */
    background-color: #509ae4; /* pale bluish white */
    color: #020244; /* dark blue */
    border: 2px solid black;
    border-top-left-radius: 1em 1em; /* rounded corner! */
    border-bottom-right-radius: 1em 1em; /* another rounded corner! */
    border-top-right-radius: 1em 1em;
    border-bottom-left-radius: 1em 1em;
    
    
   
}
/*Now add :hover and :focus pseudo-classes so the menu items change color when users point or tab to them:*/
nav ul li a:hover, nav ul li a:focus {
    color: rgb(63, 97, 250);
    background-color: white;
    font-weight: bold;
}
/*You might also need to adjust the style of the nav itself to make the menu fit better, but that's up to you. */
        
   /*Now center the menu  */   
nav ul li a {
    width: 960px;
    margin: 0 auto;

}