@import url('https://fonts.googleapis.com/css?family=Overlock:900|Raleway:500&display=swap');

/*mobile*/
body{
	font-family: 'Raleway', sans-serif;
	font-size:1rem;
	background-image: url("achtergrond.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

main{
	background-color: white;
}

main>*{
	padding: 2% 5%;
}

header{
	grid-area:header;
}

header a,nav a,section a{/*haal link decoration weg*/
	text-decoration: none;
	color:black;
}

header img{/*logo*/
	width:50px;
	float:left;
	margin:0% 6% 0% 0%;
	/*animatie van logo*/
	animation-name: buurtsuper;
 	animation-duration: 2s;
 	animation-iteration-count: infinite;
 	transform-origin: 50% 100%;
}

@keyframes buurtsuper{/*animatie van logo*/
		0%{
			transform: scaleY(1);
		}
		50%{
			transform: scaleY(1.1);
		}
		100%{
			transform: scaleY(1);
		}
	}

h1{
	font-family: 'Overlock', cursive;
	font-size:2.5rem;
	margin: auto 0% auto auto;
	display: inline-block;
}

header p{
	margin-top:0%;
}

nav{/*navigatie menu*/
	background-color: #A0AD39;
	grid-area:nav;
	padding: 0%;
	text-align: center;
}

nav a{/*menuknoppen*/
	font-family: 'Overlock', cursive;
	font-size:1.1rem;
	padding:2% 1%;
	display: block;
}

nav a:first-child{/*huidige pagina menuknop (niet klikbaar)*/
	background-color: #808a2e;
}

nav a:hover:nth-child(2),nav a:hover:nth-child(3),nav a:hover:nth-child(4),nav a:hover:nth-child(5){/*hover menuknoppen*/
	background-color:#808a2e;
}

nav a:active:nth-child(2),nav a:active:nth-child(3),nav a:active:nth-child(4),nav a:active:nth-child(5){/*actieve menuknoppen*/
	background-color:#666e25;
}

section{
	grid-area:section;
}

section a{/*knop*/
	background-color:#D75E27;
	padding: 1.3%;
	border-radius: 50px;
	text-align:center;
	width:50%;
	display: block;
	margin:auto;
	/*animatie knop*/
	transition: all 0.4s;
}

section a:after{/*animatie knop*/
		 content: url(shop.png);
		 opacity: 0;
		 margin-right: -20px;
	  	 transition: 0.5s;
	}

section a:hover{
	background-color:#ab4b1f;
	/*animatie knop*/
	padding-right: 3%;
}

section a:hover:after{/*animatie knop*/
		opacity: 1;
	}

section a:active{
	background-color:#803817;
}

article{
	display: none;
}

article{
	padding:0%;
}

article:last-of-type{/*extra ruimte tusen laatste artikel en footer*/
	padding:0% 0% 2% 0%;
}

h2{
	font-family: 'Overlock', cursive;
	font-size:1.4rem;
	padding:0% 6.5%;
}

article img{
	width:100%;
}

article p{
	padding:0% 6.5%;
}

article:nth-of-type(1){
	grid-area:article1;
}

article:nth-of-type(2){
	grid-area:article2;
}

article:nth-of-type(3){
	grid-area:article3;
}

footer{
	background-color: #A0AD39;
	grid-area:footer;
	margin: 5% 0% 0% 0%;

}

footer>svg{/*social media iconen*/
	width:20px;
	margin:auto 5px;
}

/*tablet*/
@media only screen and (min-width: 360px){
	nav{/*navigatie menu*/
	display:flex;
	background-color: #A0AD39;
	grid-area:nav;
	padding: 0%;
	text-align: center;
	}

	nav a{/*menuknoppen*/
		font-family: 'Overlock', cursive;
		font-size:1.1rem;
		padding:2% 1%;
		flex-grow:1;/*verdeel de menuknoppen over de navigatiebalk*/
	}

	article{
		display: block;
	}

	footer{
		margin: 0%;
	}
}

/*laptop*/
@media only screen and (min-width: 768px){
	main{
		width: 70%;
		margin:0% auto;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;/*gelijke kolommen*/
		grid-template-areas:/*3x5 grid*/
	    'header header header'
	    'nav nav nav'
	    'section section section'
		'article1 article2 article3'
		'footer footer footer';
	}

	header,section,footer{
		padding:2% 5%;
	}

	header img{
		width:125px;
	}

	h1{
		font-size:3rem;
	}

	h2{
		font-family: 'Overlock', cursive;
		font-size:1.4rem;
		padding:0% 15.5%;
	}

	section a{/*knop uitlijnen*/
		background-color:#D75E27;
		padding: 1.3%;
		margin:2% 0%;
		border-radius: 50px;
		display: block;
	}

	article{
	padding:0% 0% 12% 0%;
	}
}

/*groot scherm*/
@media only screen and (min-width: 1366px){
	main{
		width: 70%;
		margin:0% auto;
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr;/*gelijke kolommen*/
		grid-template-areas:/*grid*/
	    'header header header header'
	    'nav nav nav nav'
	    'section article1 article2 article3'
		'footer footer footer footer';
	}

	header img{
		width:125px;
	}

	section p{
		padding:0% 5% 0% 0%;
	}

	section a{
		width: 80%;
	}

	article h2{
		padding:0%;
		margin-top: 10%;
	}

	article p{
		padding:0% 10% 0% 0%;
	}

	svg{
		float:right;
	}
}