html {
    background-color: #322A2B;
    scroll-behavior: smooth;
}
body{
    margin: 0 !important;
}

@font-face {
    font-family:'Dada';
    src: url('Dada.eot');
	src: url('Dada.eot?#iefix') format('embedded-opentype'),
		url('Dada.woff2') format('woff2'),
		url('Dada.woff') format('woff'),
		url('Dada.svg#Dada') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FC;
}

a, p, h1, h2, h3, h4 {
    font-family: Dada, 'Dada', 'Franklin Gothic';
    color: #322A2B;
}

/*DIT STUK GAAT OVER DE HEADER TOT EN MET DE KNOP 'RESERVEER HIER'*/
header {
    text-align: right;
    margin: 2% 25%;
    margin-bottom: 3%;
    position: fixed;
    right: 0;
    z-index: 1000;
}
header a {
    padding: 10%;
    text-decoration: none;
    color: #E93B93;
    -webkit-text-stroke: 2px #E93B93;
    text-shadow: 2px 2px 8px #322A2B;
}

header a:hover{
    text-shadow: 2px 2px 8px #322A2B;
    -webkit-text-stroke: 2px #5675B6;
    color: #5675B6;
}

a:hover{
    text-shadow: 2px 2px 8px #322A2B;
    -webkit-text-stroke: 2px #ffffff;
    color: #ffffff;
}

#banner {
    width: 100%;
    height: 80vh;
    background-image: url("luke1.jpeg");
    background-size: cover;  
}

#banner img {
    width: 500px;
    margin: auto;
    display: block;
    padding-top: 7%;
}

#calltoaction {
    background-color:#322A2B;
    padding: 2%;
    text-align: center;
    filter: drop-shadow(4px 6px 10px rgb(0 0 0 / 0.4));
}
#calltoaction a{
    color: #FCEC36;
    -webkit-text-stroke: 1px #FCEC36;
    text-decoration: none;
    font-size: larger;
}

/*NU GAAT HET OVER DE INTRODUCTIE EN 'ONZE KEUKEN'*/

#inhoud {
    background-color:#fff;
}

#keuken{
    box-shadow: inset 4px 6px 30px rgb(0 0 0 / 0.4);
}

#inhoud h1 {
    font-family: 'Franklin Gothic';
    font-weight: 900;
    font-size: xxx-large;
    color:#E93B93;
    -webkit-text-stroke: 2px #E93B93;
    rotate: 0.5deg;
    margin: 0;
    padding-top: 4%;
}

#keuken h1  {
    font-family: 'Franklin Gothic';
    font-weight: 900;
    font-size: xxx-large;
    color:#FCEC36;
    -webkit-text-stroke: 2px #FCEC36;
    rotate: -0.5deg;
    margin: 0;
    padding-top: 4%;
}
#keuken a {
    color:#E93B93;
}
#inhoud p {
    color:#5675B6;
    rotate: -0.5deg;
    margin: 0;
    padding-bottom: 3%;
}

#keuken p {
    color:#fff;
    rotate: 0.5deg;
    margin: 0;
    padding-bottom: 3%;
}

h1, h2, p{
    padding: 1% 10%;
    text-align: center;
}

h2 {
    margin:0;
    color:#81B8E2;
}

#contactimg img {
   height: 60vh;
   object-fit:cover;
   width: 100vw;
}


 #keukenimg img {
    height: 25vh;
   object-fit:cover;
   width: 100vw;
 }
#keukenimg  {  
    height: 25vh;
 }

#contact {
    background-color:#322A2B;
}




/*VANAF HIER GAAT ALLES OVER CONTACT EN FOOTER*/

#contact, footer {
    background-color: #322A2B;
    margin: 0;
    padding-top: 3%;
}
#contact h1 {
    font-family: 'Franklin Gothic';
    font-weight: 900;
    font-size: xxx-large;
    color:white;
    -webkit-text-stroke: 2px white;
    margin: 0;
    padding-top: 1% !important;
}

#contact h1, #contact p {
    padding: 1% 1%;
    text-align: center;
    width: 100%;
    margin: auto;
    top: -200px;
    position: relative;
    background-color: #322A2B;
}

#contact p {
    color:#81B8E2;
    top: -203px;
}
   
#contact a {
    color:#E93B93;
    font-size:large;
}


iframe {
    top: -200px;
    position: relative;
}
#iframe {
    height: 50vh;
}

footer a{
    color: #A4A9B1;
}

footer{
    display: inline-grid;
    text-align: right;
    width: 99%;
    padding: 5% 1% 0% 0%;
    font-size: small;
}

/*RESPONSIVE > Zorgt ervoor dat het werkt op telefoon zoals gewenst*/

@media screen and (max-width: 480px) {
#banner {height: 50vh;}
#banner img {width: 80vw; padding-top:20%;}
header {padding: 2% 38% 2% 60%; background-color: #322A2B; margin: 0;}
#inhoud h1, #keuken h1 {padding-top:10%;}
#inhoud p {padding-bottom:5%; padding-top:4%;}
h2{padding:6%;}
#contact h1 {padding-top: 7% !important; padding-bottom: 5%;}
#contact h1, #contact p {width:100%;}
#contact a {display:inline-block; padding:1.5%}
footer {padding: 21% 0% 0% 2%; text-align:left;}
}