body {
    background-color: rgb(115, 148, 209);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    /* width: 100%; */
    /* margin-left: 5%;
    margin-right: 5%; */
}

body p a:visited {
    color: black !important;
}

ul, li {
    color: azure;
}


.header-container {
    display: flex;
    align-items: center;
    background-color: black;
    padding-left: 10px;
    padding-right: 10px;
    /* width: 100%; */
}

.main-nav {
    display: flex;
    background-color: azure;
    width: 100%;
}
 
.logo {
    /* display:inline; */
    margin-right: 15px;
}

.logo img {
    vertical-align: middle;
}

.nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Creates horizontal layout */
    background-color: azure;
}

.nav-list li {
    height: 100%;
    /* margin-right: 15px; */
}

.nav-list li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.nav-list a:hover {
    background-color: rgb(115, 148, 209);
    color: darkorange;
}

.active {
    background-color: rgb(115, 148, 209);
    border-left: 2px solid darkorange;
    border-right: 2px solid darkorange;
    margin-bottom: 2px solid darkorange;
}

p {
    color: azure;
}

p a {
    color: black;
}

p a:hover {
    color: darkorange;
}

a:active {
    color: darkorange;
}


h1 {
    text-align: center;
    color: azure;
    text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* Vertical layout for screens 650px and below */
@media screen and (max-width: 768px) {
    .header-container {
        align-items: center;
        padding: 0;
        background-color: rgb(115, 148, 209);
        flex-direction: column;
    }

    .main-nav {
        width: 100%;
        background-color: transparent;
    }

  .nav-list {
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* This centers the menu items horizontally! */
    width: 100%;
    background-color: azure;
  }
  
  .nav-list li {
    margin-right: 0; /* Remove horizontal spacing */
    width: 100%; /* Full width items */
  }

  .active {
    background-color: rgb(115, 148, 209);
    color: darkorange;
    border: 0;
    /* margin: 0;
    padding: 0; */
    } 

    .nav-list li a.active {
        color: black;
        border-left: 2px solid darkorange;
        border-right: 2px solid darkorange;
        border-bottom: 2px solid darkorange;
        border-top: 2px solid darkorange;
    }

    .nav-list li a.active:hover {
        color: darkorange !important;
    }

    .logo {
        display: none;
    }
}