body {

    margin: 0;
    padding: 0;
    background-color: #14181f;
    color: #e6e6e6;

    font-family: Arial, Helvetica, sans-serif;
}

.middle {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.middle_img {

    width: 1200px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid;
    border-radius: 2px;
    border-color: #e6e6e6;
    margin: auto;

}

.middle_img2 {

    width: 1200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid;
    border-radius: 2px;
    border-color: #e6e6e6;
    margin: auto;

}

.middle_vid {

    width: 700px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid;
    border-radius: 2px;
    border-color: #e6e6e6;
    margin: auto;

}

.galerie {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
}

.galerie img {

    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid;
    border-radius: 2px;
    border-color: #e6e6e6;
    margin: auto;

}

input:hover {
    transform: scale(1.1);
    transition-duration: 0.5s;
}


button:hover {
    transform: scale(1.05);
    transition-duration: 0.5s;
    color: #e6e6e6;
    background-color: #1f242e;
}

#TopBar {

    margin: 0;
    padding: 0;
    position: sticky;


    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;

        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        background-color: #14181f;

        #inactive:hover {
            transform: scale(1.1);
            transition-duration: 0.5s;
        }

    }

    ul.accueil {

        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;

    }


    li {

        margin: 5px 15px;
        
        height: 100%;        
        a {
            background-color: #14181f;

            

            display: block;

            width: 100%;
            height: 100%;

            border-radius: 10px;
            padding: 10px;

            border: 3px solid #29303d;

            text-decoration: none;
            color: #e6e6e6;
        }
        a:hover {
            background-color: #1f242e;
        }
        #active {
            background-color: #29303d;
        }

        p {
            display: block;
            width: 100%;
            height: 100%;

            border-radius: 10px;
            padding: 10px;
            border: 3px solid #29303d;

            text-decoration: none;
            color: #e6e6e6;
        }
        
    }
}

#sideNav {

    background-color: black;
    color: #e6e6e6;
    border: solid;
    border-color: #e6e6e6;
    border-radius: 5px;
    
}


.karmann {

    display: flex;
    justify-content: center;
    align-items: center;
    
}


main {
    display: flex;
    text-align: center;
}





.f {
    font-size: smaller;
    font-style: italic;
}