/* clean upo the navbar because there is wayy too much u
nessacary code happening here */

nav {
    display:inline;

} 

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    /*this could be auto  */
    background-color:rgb(101, 99, 99);
    
} 

li{
    float: right;
}

li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;  
}

nav li a:hover:not(.active) {
    background-color:rgb(86, 84, 84);
}


/* add an active elemant that checks what page you are on and highlights the nav bar */
.active{
    background-color:rgb(56, 54, 54);
}

.sticky{
    position: sticky;
    top: 0;
}

body {
    /* background-color: brown; */
    background-image: url(../img/shadowcutinV2.3.png);
    background-size: cover;
    text-align: center;
    color: white;
}

body div {
    border: 2.5px solid black;
    background-color:tan;
    color:black;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    margin:auto;
    width: 50%;
}


footer{
    color:black;
}
/* add the fixed or sticky element to maske the navbar stick 
to the top  of the page when scrolled passed VVV

sticky is the element 
position: fixed or sticky;

*/