*{
    box-sizing: border-box;
    font-family: montserrat;
    margin: 0;
    background-color: whitesmoke;
    color: #141442;
}
@font-face {
    font-family: "montserrat";
    src: url(assets/fonts/Montserrat-VariableFont_wght.woff);
    src: url(assets/fonts/Montserrat-VariableFont_wght.woff2);
    font-style: normal;
    font-display: "swap";
}

h1{
    width: 100%;
    text-align: center; 
    font-weight: 800; 
    font-size: 1.25rem;
    margin: 0 0 1rem;
    padding: .5rem;
    border-top: solid .15rem #141442;
    border-bottom: dotted .15rem #141442b1;

}
a{text-decoration: none; color: #141442;}
a:hover{color: #3140f3;}
/*de header en navigatie bovenaan de pagina*/
.header{
    margin: 1rem;
    }
    .header a{
    text-decoration: none;
    text-align: center;
    }
.title{display: flex;}
    .title a{ margin:auto; padding: auto}
    .title img{width:50%; margin: auto;}
.nav{
    overflow: hidden;
    float: center;
    width: fit-content;
    margin: 1rem auto;
    }
    .nav a{
    font-size: 1rem;
    margin: .5rem;
    color: #aeaeae;
    }
    .nav a:hover{
    color: #3140f3;
    }
    .nav .active{
    color: #141442;
}
    .contact p{
    width: fit-content;
    margin: auto;
}
img{border-radius: .2rem;}

/*gallerij op home pagina regelen*/
.gallery{
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    margin: 1rem 5%;
}
.galobject{margin: .5rem; 
    width: 25rem;max-width: 30vw; 
    filter: drop-shadow(.15rem .3rem);
    border-style: solid; 
    border-width: .2rem;
    border-radius: .3rem;
    }
    .galobject img{
    width: 100%;
    border-radius: .1rem;
    }
    .galobject p{
        padding: .5rem 0;
        font-size: medium; 
        font-weight: 600;
        text-decoration: none; 
        text-align: center;
    }
    .galobject:hover {filter:drop-shadow(.2rem .4rem #3140f3);border-width: .2rem;border-color: #3140f3; }
    .galobject:hover p{color: #3140F3}

/* about me pagina foto en tekst positioneren*/
.aboutme{display: flex; justify-content: center ;margin-bottom: 2rem;}
    .aboutme img{
        width: 20rem ;
        margin: 0rem 2rem 2rem;
        filter:drop-shadow(.2rem .4rem #121242);
        border: solid .2rem #141442;
        }
    .aboutme p{width: 20rem; margin: auto 0;}
    br{margin-bottom: .5rem;}
@media screen and (orientation:portrait) {
    .aboutme{flex-direction: column; align-items: center;}
}
/* in gallerij de titel stijl*/
.galtitle{
    width: 100%;
    text-align: center;
    margin: 1rem auto;
}
    .galtitle p{color:gray;}
    .galtitle a{color: #3140f3;}

/* het beeld stileren en vergroten*/
.main {
    display: flex;
    flex-direction: column;
      width: fit-content;
      margin: 0 auto 20px auto;
      justify-content: center;
    }
    .main  img , video{
    max-width: 80%;
    max-height: 40rem;
    margin: .5rem auto;
    border: solid .2rem #141442;
    border-radius: .2rem;
    filter: drop-shadow(.15rem .3rem #141442);
    }
    .main p{
        text-align: center;
        margin-bottom: 1rem;
        color: gray;
    }
    .thumb {
        max-width: 70vw;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 0 auto 3rem;
    }
    .thumb img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      cursor: pointer;
      border: solid .2rem #141442;
      filter: drop-shadow(.15rem .3rem #141442);
      transition: border 0.3s;
    }
    .thumb img:hover,
    .thumb img.active {
      border: 2px solid #3140f3;
    }
    .sketch{
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        justify-content: center;
        margin: auto;
    }
    .sketch img{
        max-height: 30rem;
        max-width: 80%;
        margin: 2vw 1vw;
        filter: drop-shadow(.15rem .3rem .5rem #14144247);
    }
    .ABsketch{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 80%;
        justify-content: center;
        margin: auto;}
        .ABsketch img{
        max-height: 23rem;
        margin: 2rem 1rem;
    }
 
    #kali img{
        max-width: 17rem;
    }
    .dots{
        border-top: dotted .15rem #141442b1; 
        margin: 2rem 0rem;
    }
    .bach{margin: -.5vh 10vw;
    }
    .bach iframe{
        width: 100vw;
        height: 110vh; 
        zoom: 80%; 
        border: solid .2rem #141442;
        border-radius: .2rem;
        filter: drop-shadow(.15rem .3rem #141442);
    }
    .balink {
        width: fit-content;
        height: 2rem;
        align-content: center;
        padding: 0 .5rem;
        margin: -1.2rem auto 0;
        text-align: center;
        border: solid .2rem #141442;
        border-radius: .2rem;
        filter: drop-shadow(.15rem .3rem #141442);
    }