@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');


/* ALGEMEEN */
body {
    /*border: 10px solid #874f25;*/
    padding: 0;
    margin: 0;
    background: #dbca97;
    /*font-size: 16px;begin waarde voor lettertype!*/    
}

h1 {
        font-family: "Modak", serif;
        font-weight: 400;
        font-style: normal;
        color:#6ab446;
        margin-top: 10px;
}

/* Navigatie */
.navbar {
    background-color:#874f25;
}

.nav-link, 
.navbar-brand { /* spatie laat zien dat je 2 klases hebt in html, zorgt voor het inklapbare*/
    color: #fff;
    cursor: pointer;
    margin: 10px; /* zodat logo en menu niet aan de zijkant plakt*/
}

.nav-link {
    margin-right: 1em !important;
    /* dwingt af = ! important */
}

.nav-link:hover, 
.navbar-brand:hover {
    color: #6ab446;
    font-weight: bold;
}

.navbar-collapse {
    justify-content: flex-end;
} 


/* HOME - Welcome deel*/
.header {
    background-image: url('images/openart-achtergrond.jpg');
    background-size: cover;
    background-position: center;
    position: relative; /*parent relatief staat, kan het zich positioneren in de child*/
}

.overlay {
    
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0; /* van zn parrent*/
    top: 0; /* van zn parrent*/
    background: rgba(0, 0, 0, 0.3); /* rgba -> alfachannel 0.7 is 30procent bedekking, anders meer transparantie*/
}

.description {
	left: 50%;
	position: absolute;
	top: 45%;
	transform: translate(-50%, -50%); /* zorgt voor de positie van je tekst x/y as*/
	text-align: center;
    
}
.submitbtn {
    background-color: #6ab446;
    border: none;
    border-radius: 12px;
}

.description h1 {
	color: #6ab446;
    font-family: "Dancing Script","Arial",sans-serif; /* als eerste lettertype niet ondersteund wordt, dan wordt deze ondersteund door het volgende en ga zo maar door*/
    text-shadow: 4px 4px 8px rgba(10, 8, 8, 0.8);
}

.description p {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.5;
    text-shadow: 4px 4px 8px rgba(10, 8, 8, 0.8);

}

.description a {
    border:1px solid #6ab446;
    background:#6ab446;
    border-radius: 12px;
    color:#fff;
}

.description a:hover {
	border:1px solid #fff;
    background:#fff;
    color:#000;
}

/* HOME - categorieen deel*/
.features {
	margin: 4em auto;
	padding: 1em;
	position: relative;
}
.feature-title {
	color: #6ab446;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}


.features img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
}
/* ONZE SPELLENKAST */

/* CATEGORIEEN */


/* TIPS */
div #tipsgallerij   {
    text-align: center;
}

.photo-grid-container {
    display: flex;
    justify-content: center;
}
  
.photo-grid {
    width: 1000px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
  
.photo-grid-item {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px;
}

.photo-grid-item h4:hover {
    color: white;
    font-weight: 600;
}

.achtergrond-donkerbruin {
    background-color: #874f25;
}

.achtergrond-lichtbruin {
    background-color: rgb(228, 180, 103);
}

/* CONTACT */
form {
    margin-top: 25px;
    margin-bottom: 25px;
    background-color:rgb(193, 182, 137);
    padding: 15px;
}

form #submitbtn {
    background-color: #6ab446;
    border: none;
    border-radius: 12px;
}

form #submitbtn:hover {
    background-color: #fff;
    color:#000
}

form p {
    margin-bottom: 5px;
}

.form-group{
    margin-bottom: 1em;
}

/* FOOTER*/
.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 20px 0;
}
.footer-copyright {
    color: #666;
    margin-top: 20px;
}