html {
    background-color: #D3D3D3;
    height: 100%;
}


/* Add a background color to the top navigation */
.navigation {
    background-color: #FFF;
    overflow: hidden;
    text-align: right;
    border-bottom: 1px solid #CCC;
}

/* Style the links inside the navigation bar */
.navigation a {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 5px 18px;
    text-decoration: none;
    font-weight: normal;
}

/* Change the color of links on hover */
.navigation a:hover {
    background-color: #000000;
    color: #FFF;
    text-decoration: underline;
}

/* Hide the link that should open and close the navigation on small screens */
.navigation .icon {
    display: none;
} 

#hamburgerOnly {
    display: none;
}

/* Add an active class to highlight the current page */
.navigation .active {
    background-color: #000000;
    color: #FFF;
    font-weight: bolder;
    text-decoration: underline;
}

/* When the screen is less than 900 pixels wide, hide all links. Show the hamburger manu icon */
@media screen and (max-width: 900px) {
    .navigation a {
        display: none;
    }

    .navigation a.icon {
        float: right;
        display: block;
        text-decoration: none;
        background-color: #000000;
        color: #FFF;
    }

    .navigation a.icon:hover {
        opacity: .8;
    }


    /* The "responsive" class is added to the navigation with JavaScript when the user clicks on the icon. 
    This class makes the navigation look good on small screens (display the links vertically instead of horizontally) */
    .navigation.responsive {
        position: relative;
    }

    .navigation.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .navigation.responsive a {
        float: none;
        display: block;
        text-align: left;
        background-color: #000000;
        color: #FFF;
    }

    .navigation.responsive #hamburgerOnly {
        display: block;
        font-weight: bolder;
        background-color: #000000;
        color: #FFF;
    }
} 

/* For screens smaller than 600px, the menu becomes an overlay */
@media screen and (max-width: 600px) {
    .navigation a.icon {
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        background-color: #000000;
        color: #FFF;
    }

    .navigation.responsive {
        background-color: #000000;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 100;
    }
img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}
}