#filePreview {
            display: flex;
            flex-wrap: wrap;
        }

        .previewItem {
            margin: 5px;
            max-width: 100px;
            max-height: 100px;
        }
#inloggen {
	padding-bottom:50px;
	margin-top:50px;
	border:2px black solid;
	margin-left:20px;
	padding:0px;
	text-align:center;
	width:85%;
	margin-bottom:20px;
	box-shadow:5px 10px darkgray;
	
}
#Registratie{
	padding-top:50px;
	border:2px black solid;
	margin-left:20px;
	padding:0px;
	width:85%;
	box-shadow:5px 10px darkgray;
	
}
#inloggen form input[type=text], #inloggen form input[type=password]{
padding:6px;	
margin-bottom: 10px;
background-color:lightgrey;
box-shadow:5px 5px darkgrey;
border-radius: 2px;
width:55%;
} 
#Registratie form input[type=text], #Registratie form input[type=password]{
padding:6px;	
margin-bottom: 10px;
border-radius: 2px;
background-color:lightgrey;
box-shadow:5px 5px darkgrey;
width:45%;	
margin-left:80px;
}
#Registratie form input[type=submit], #inloggen form input[type=submit]{
	font-size:16px;
	padding:6px;
	margin-bottom: 10px;
border-radius: 20px;
color:white;
border:none;
background-color: gray;
}
#Registratie form input[type=submit]{
	margin-left:35%;
}
#inloggen a{
	display:inline-block;
	color:black;
	border-radius: 20px;
	color:white;
	background-color:gray;
	padding:6px;
	margin:5px; 
	margin-bottom:10px;
}
.whatsapp:hover {
    color: #25d366;
}

.instagram:hover {
    color: #d62976;
}

.facebook:hover {
    color: #3b5998;
}

.gmail:hover {
    color: #c71610;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

/* Voeg stijlen toe aan de zoekbalk (optioneel) */
.search-container {
    display: flex;
    width: auto;
    margin: 0 auto;
}

input[type="search"] {
    flex: 1;
    padding: 0.25rem;
    width: 70%;
    /* Gebruik relatieve eenheid (em) voor padding */
}


.header {
    grid-area: header;
    height: 15dvh;
    background-image: url('banner.jpg');
    background-size: auto 100%;
    background-position: 15dvh 0;
}

.header img {
    height: 15dvh;
}

.menu {
    background: black;
    grid-area: menu;
    color: white;
    height: 75dvh;
    overflow-y:auto;
}

.main {
    height: 75dvh;
    grid-area: main;
    overflow-y: scroll;
}

.footer {
    display: flex;
    justify-content: space-between;
    grid-area: footer;
    background: black;
}

.footer a {
    color: white;
}

.footer img {
    height: 10dvh;
    margin: 0;
}

.footer svg {
    height: 5dvh;
    width: 5dvh;
    padding: 2.5dvh;
    margin: 0;
}


.grid-container {
    margin: 0;
    display: grid;
    grid-template-areas:
        'header header header header header header header header header header header'
        'menu main main main main main main main main main main'
        'footer footer footer footer footer footer footer footer footer footer footer';
}

ul {
    list-style-type: none;
    /* Verwijdert de standaard bullet points voor unordered lists */
    padding: 0.1rem;
    /* Optioneel: verwijdert de standaard opvulling van de lijst */
    margin-bottom: 0.4rem;
    /* Optioneel: verwijdert de standaard marge van de lijst */
}

li {
    margin-bottom: 1dvh;
}

li span {
    margin: auto 0;
}

li a {
    text-decoration: none;
    color: white;
    display: inline-block;
}

li a:hover {
    color: lightgrey;
}

svg {
    height: 1rem;
    width: 1rem;
}

    #search-container {
        display: none;
    }

@media only screen and (max-width: 768px) {
input[type="checkbox"] {
    width: 0.75rem; /* Set the width as per your preference */
    height: 0.75rem; /* Set the height as per your preference */
}
        input, textarea, select, button {
          font-size:0.5rem;
        }
    .main {
        font-size: 0.5rem;
    }

    .menu {
        font-size: 0.5rem;
    }

    svg {
        height: 0.5rem;
        width: 0.5rem;
    }

    li a {
        justify-content: none;
        display: inline-block;
    }

    .menu {
        width: 9.8dvh;
        padding: 0.1rem;
        overflow-wrap: break-word;
    }

    input[type="search"] {
        font-size: 0.5rem;
    }

    #search-container {
        display: none;
    }
}