html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

* {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
}

header {
    color: white;
    background-color: grey;
}

main {
    color: white;
    background-color: grey;
}

footer {
    color: white;
    background-color: grey;
}

.bovenkant {
    width: 1100px;
    display: flex;
    gap: 8%;
    height: auto;
    padding: 10px;
    
}

.bovenkant__tekst {
    text-align: end;

}

.bovenkant__tekst a {
    color: white;

}

.Top {
    display: flex;
    justify-content: center;
    background-color: black;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    background-color: grey;
}

.nav {
    justify-content: end;
    padding: 10px;
    column-gap: 20px;

}

.nav a {
    text-decoration: none;
    display: flex;
    column-gap: 20px;
    color: white;
}


.nav li {
    display: flex;
    column-gap: 20px;
    padding: 2px;
}


.banner {
    font-size: large;
    background-image: url(../img/porsche-911.jpg);
    background-size: cover;
    background-position: center;
    height: 500px;
    width: 100%;
    display: flex;
}

#Naam .text__banner {
    color: white;
    padding: 20px;
}

.title {
    color: black;
    display: flex;
    justify-content: center;
}

/* als hij zijn auto wilt naast zetten 
.auto img {
    margin: 10px;
    width: 40%;
}

.auto h3 {
    font-size: x-large;
    margin: 10px;

}

.auto p {
    margin: 10px;
    padding-bottom: 5px;
}

.auto a {
    background-color: darkblue;
    color: white;
    text-decoration: none;
    margin: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: solid;

}

h4 {
    font-size: x-large;
    margin: 10px;
    color: darkblue;
}

*/
.Auto a {

    background-color: lightgrey;
    color: black;
    display: flex;
    text-decoration: none;
    margin: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: solid;
    justify-content: center;
    font-size: x-large;
}

.Merken h2 {
    display: flex;
    justify-content: center;
}

h2 {
    color: black;
    margin-bottom: 10px;
}

button {
    color: white;
    background-color: black;
}

footer p {
    justify-content: center;
    display: flex;
}

#social_icons li {
    display: flex;
    color: white;

}

.merken ul {
    max-width: 150px;
    column-gap: 20px;
    display: flex;
    padding: 5px;

}

.Merken li {
    display: flex;
    padding: 10px;
    justify-content: center;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.Merken img {
    display: flex;
    width: 10%;
    padding: 20px;

}

#social_icons {
    display: flex;
    column-gap: 20px;
    color: white;
    padding-bottom: 10px;
    padding-right: 10px;
    font-size: 20px;
    justify-content: center;
}

.icon {
    color: white;
}

/* contact */
.wrapper_contact {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    color: black;
    background-color: lightgrey;
}

address {
    padding-left: 10px;
    margin: 5px;
}

.gegevens {
    padding-left: 10px;
    margin-top: 10px;
}

.Map {
    font-size: 20px;
    margin: 8px;
}

.Opening_hours {
    padding-left: 10px;
    list-style-type: none;
    border-bottom-style: solid;
}

.Opening_hours :last-child {

    padding-bottom: 5px;
}

.contact {
    padding-bottom: 15px;
}

/* responsive */
@media(min-width: 1210px) {}

@media(min-width: 1050px) {
    .nav {
        display: flex;
    }
}


/* Tablet- en kleine desktopweergave */
@media (max-width: 1024px) {

    .banner {
        height: 300px;
        font-size: medium;
    }
}

@media(max-width: 760px) {
    .banner {
        height: 200px;
        font-size: small; 
    }

    .wrapper {
        max-width: 100%;
        padding: 0 20px;
    }

    .nav {
        flex-direction: column;
        align-items: flex-end;
    }
    h1,
    .bovenkant__tekst{
        font-size: medium;
    }
    nav a {font-size: x-small;}
}

/* Mobiele weergave */
@media (max-width: 600px) {
    .banner {
        height: 200px;
        font-size: x-small;
    }
    .nav {
        flex-direction: column;
        padding: 10px;
    }

    .wrapper_contact {
        padding: 0 10px;
    }
}