body {
            color: #d7e4c2;
            background-color: #8a8c8f;
            font-family: "georgia",serif;
        }
        /* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #d7e4c2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
        
        
        header, footer {
            padding: 1em;
            color: #d7e4c2; 
            background-color: #41393d;
            clear: left;
            text-align: center;
        }
        
        
        article {
            margin-left: 170px;
            padding: 3em;
            overflow: visible; 
        }


/* slideshow container*/

.slideshow-container {
    margin: 0px auto;
    max-width: 1000px;
    position: relative;
    margin: auto;
    text-align: center;    
}

/* caption text */

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;    
}

/* number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* the dots/bullets/indicators */
.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}