/*basic*/

body {
    font-family: Arial, Helvetica, sans-serif; 
    background-color: #283f3b; 
    color: #eaffda;         
    line-height: 1.6;
    
}

h1 {
    font-family: 'Cinzel', serif;
    color: #906323;
    font-weight: 700;
    margin-bottom: 0.5em;
    font-size: 75px;
    margin-bottom: 0;
    text-align: center;
}


p {
    color: #eaffda;
    font-size: 1rem;
    margin-bottom: 1em;
    font-size: 20 px;
    margin-left: 50px;
    margin-right: 50px;
}


h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #906323;
    font-size: 35px;
    color: #EAFFDA;
    margin-left: 50px;
    margin-right: 50px;
}

/*header*/
#header{
    background-color: #283F3B;
    color: #fff;

}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}
#logo img{
    max-width: 100px;
}
nav ul{
    list-style: none;
    margin: 0;
    padding: 0;

}
nav li{
    display: inline;
    margin-right: 20px;

}
nav a{
    text-decoration: none;
    color: #EAFFDA;
}
nav a:hover {
    text-decoration: underline;
}

nav #reserveren {
    display: inline-block;
    padding: 10px 20px;
    background:#906323;
    color: #283F3B;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
}

/*footer*/
footer{
    background-color: #283F3B;
    color: #fff;

}
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}
footer ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

footer a{
    text-decoration: none;
    color: #fff;
}

footer li{
    text-decoration: none;
    color: #EAFFDA;
}


/*hero*/
.hero {
   
    
    background-size: cover;      
    background-position: center;  
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;                
    display: flex;
    flex-direction: column;
    justify-content: center;       
    align-items: center;          
    text-align: center;
    color: white;
    position: relative;
}



.hero a.button {
    display: inline-block;
    padding: 10px 20px;
    background:#906323;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    margin-top: 15px;
    font-weight: bold;
}

/*text blok*/
.tekst {
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center;       
}

/*home page over ons*/
article {
    max-width: auto;
    margin: 0 auto;
    padding: 20px;
}

article h1 {
    text-align: center;
    margin-bottom: 30px;
}


#foto {
    display: flex;
    gap: 20px;               
    margin-bottom: 30px;
}

#foto img {
    width: calc(50% - 10px); 
    height: 300px;           
    object-fit: cover;        
    border-radius: 10px;
}


#seizoensmenu {
    display: flex;
    flex-direction: column;
    gap: 20px;               
    
}


.maandmenu {
    flex: 1;                 
    display: flex;
    flex-direction: column;  
    justify-content: center;
    text-align: center;
    
}


.maandmenu{                   
    background-color: #42635c; 
    border-radius: 15px;  
    height: 300;    
}


.maandmenu ul {
    list-style: none; 
    padding: 0;
    margin: 0;
}

.maandmenu li {
    margin-bottom: 15px;
}

.foto-maandmenu {
    flex: 1;
    display: flex;
}

.foto-maandmenu img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    
}

/*menu*/
   
.menu{
     max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
    
}
#apero{
    display: flex;
    flex-direction: column;  
    justify-content: center;
    text-align: center;
    
}
#hoofdgerechten{
    display: flex;
    flex-direction: column;  
    justify-content: center;
    text-align: center;
}

#desserts{
    display: flex;
    flex-direction: column;  
    justify-content: center;
    text-align: center;
}


section{
     display: flex;
    flex-direction: column;  
    align-items: center;
    text-align: center;
}
.menu img{
     width: 300px;
    max-width: 100%;
    border-radius: 10px;
}

.dranken{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 

}

/*blog*/
#blog1{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}
#blog1 h3{
    width: 300px;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
}

#blog1 img{
     width: 300px;
    max-width: 100%;
    border-radius: 10px;
}

#blog2{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

#blog2 h3{
     width: 300px;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
}

#blog2 img{
     width: 300px;
    max-width: 100%;
    border-radius: 10px;
}

#blog3{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

#blog3 h3{
     width: 300px;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
}

#blog3 img{
     width: 300px;
    max-width: 100%;
    border-radius: 10px;
}

/*overons*/

#team{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

#team img{
    width: 300px;
    max-width: 100%;
    border-radius: 10px;
}

/*contact*/
.contacteren{
    font-family: 'Cinzel', serif;
    color: #906323;
    font-weight: 700;
    margin-bottom: 0.5em;
    font-size: 75px;
    margin-bottom: 0;
}
.contact{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
    
}
.contact a{
    color: #eaffda;
    text-decoration: none;
}

.openingsuren{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

.contactformulier{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

/*reservatie*/

.formulier{
    max-width: auto;         
    margin: 50px 20px;        
    padding: 50px;             
    background-color: #42635c; 
    border-radius: 15px;      
    text-align: center; 
}

legend{
    
      font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #906323;
    font-size: 35px;
    color: #EAFFDA;
    margin-left: 50px;
    margin-right: 50px;
}