:root {
	--sky-blue: #93C0D7ff;
	--cerulean: #1D82ACff;
	--rich-black: #0c101e;
	--timberwolf: rgb(235, 224, 221);
	--sandy-brown: #FE9F4Fff;
	--coral: #FB8351ff;
	--blush: #DC5880ff;
	--font-primary: 'aktiv-grotesk', sans-serif;
	--font-titles: 'kanit', sans-serif;
	--font-text: 'aktiv-grotesk', sans-serif;
	--font-primary-weight-light: 300;
	--font-primary-weight-regular: 400;
	--font-primary-weight-medium: 500;
	--font-primary-weight-semibold: 600;
	--font-primary-weight-bold: 700;
	--font-primary-color: var(--rich-black);
	--background-color: var(--timberwolf);
	background-color: var(--background-color);
	color: var(--color);
}

/* 
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe, abbr,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

*::selection {
	background-color: var(--sky-blue);
	color: var(--background-color);
}

body {
	line-height: 1;
	font-family: var(--font-primary);
	box-sizing: border-box;
}

@media screen and (min-width:320px) {

	.container {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(auto);
		grid-template-areas:
			"banner"
			"title"
			"pictures"
			"info"
			"video"
			"list"
			"footer";
		grid-gap: 20px;
		margin-bottom: 10px;
	}

	.banner {
		padding: 0 0 0 10px;
		grid-row: 1;
		grid-column: 1;
		position: relative;
		display: grid;
		grid-area: banner;
		max-width: 100%;
		grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr;
		gap: 10px;
	}

	.image1 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 5;
		background-color: var(--cerulean);
		box-shadow: -15px 0px 0 0px var(--cerulean);
	}

	.image2 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 4;
		background-color: var(--blush);
		box-shadow: -15px 0px 0 0px var(--blush);
	}
	
	.image3 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 3;
		background-color: var(--coral);
		box-shadow: -15px 0px 0 0px var(--coral);
	}
	
	.image4 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: var(--sandy-brown);
		box-shadow: -15px 0px 0 0px var(--sandy-brown);
	}

	.title {
		grid-area: title;
		grid-row: 2;
		grid-column: 1;
		justify-items: center;
	}

	h1 {
		font-family: var(--font-titles);
		font-size: 2.5rem;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.pictures {
		grid-area: pictures;
		grid-column: 1;
		grid-row: 3;
	}

	.image5 {
		float: left;
		width: 50%;
		border-top: 5px solid var(--coral);
		background-color: var(--coral);
	}

	.image6 {
		float: right;
		width: 50%;
		border-bottom: 5px solid var(--blush);
		background-color: var(--blush);
	}

	.info {
		grid-area: text;
		grid-column: 1;
		grid-row: 4;
	}

	p {
		font-family: var(--font-text);
		margin: 10px 25px 25px 25px;
		line-height: 1.25em;
		text-align: justify;
	}

	p::first-letter {
		font-size: 1.25em;
		font-weight: 700;
	}

	h2 {
		font-family: var(--font-titles);
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 1.25em;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.video {
		grid-area: video;
		grid-column: 1;
		grid-row: 5;
		margin-top: 25px;
		text-align: center;
	}

	.list {
		grid-area: list;
		grid-column: 1;
		grid-row: 6;
		margin-top: 25px;
		margin: 0 20px;
		text-align: center;
	}

	h3 {
		font-family: var(--font-titles);
		font-size: 1.3rem;
		font-weight: 600;
		text-align: center;
		line-height: 1.2em;
		padding-left: 1.5em;
		padding-right: 1.5em;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	h4 {
		font-family: var(--font-titles);
		font-size: 1.1rem;
		font-weight: 400;
		text-align: center;
		line-height: 2em;
	}

	li {
		list-style: none;
		line-height: 2em;
	}

	a{
		text-decoration: none;
		color: var(--rich-black);
		font-size: 1.1em;
	}

	a:hover {
		color: var(--coral);
	}

	a:visited {
		color: var(--blush);
	}

	a:visited:hover{
		color: var(--coral);
	}

	a::selection{
		color: var(--background-color);
		background-color: var(--cerulean);
	}

	.footer {
		grid-area: footer;
		grid-column: 1;
		grid-row: 7;
		text-align: center;
		margin: 25px 0 0 0;
	}

	.navbar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr auto 1fr;
		color: var(--rich-black);
		text-align: center;
		margin-left: 5%;
		margin-right: 5%;
		margin-bottom: 25px;
	}

	#concertzaal,
	#formulier,
	#home {
		padding: 0;
		margin: 0;
		justify-content: space-between;
	}

	ul, li {
		padding: 0;
		margin: 0;
		font-size: 1em;
	}

	#concertzaal, #home, #formulier,
	#concertzaal:default, #home:default, #formulier:default,
	#concertzaal::after, #home::after, #formulier::after,
	#concertzaal::before, #home::before, #formulier::before,
	#concertzaal:active, #home:active, #formulier:active {
    text-decoration: none;
    color: var(--rich-black);
	}

	#concertzaal:hover, #home:hover, #formulier:hover {
		text-decoration: underline;
		color: var(--cerulean);
	}
	
}

@media screen and (min-width:768px) {

	.container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: minmax(auto);
		grid-template-areas:
			"banner banner"
			"title title"
			"pictures info"
			"video list"
			"footer footer";
		grid-gap: 20px;
		margin-bottom: 10px;
	}

	.banner {
		position: relative;
		grid-column: 1 / -1;
		display: grid;
		grid-area: banner;
		max-width: 100%;
		gap: 10px;
	}

	.image1 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 4;
		background-color: var(--cerulean);
		box-shadow: -15px 0px 0 0px var(--cerulean);
	}

	.image2 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 3;
		background-color: var(--blush);
		box-shadow: -15px 0px 0 0px var(--blush);
	}
	
	.image3 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: var(--coral);
		box-shadow: -15px 0px 0 0px var(--coral);
	}
	
	.image4 {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: var(--sandy-brown);
		box-shadow: -15px 0px 0 0px var(--sandy-brown);
	}

	.title {
		grid-area: title;
		grid-row: 2;
		grid-column: 1 / -1;
		text-align: center;
	}

	h1 {
		font-family: var(--font-titles);
		font-size: 3.5rem;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.pictures {
		grid-area: pictures;
		grid-column: 1;
		grid-row: 3;
		align-content: center;
	}

	.image5 {
		float: left;
		width: 75%;
		border-top: 5px solid var(--coral);
		background-color: var(--coral);
		grid-area: pictures;
		margin-left: 7.5%;
	}

	.image6 {
		float: left;
		width: 75%;
		border-bottom: 5px solid var(--blush);
		background-color: var(--blush);
		grid-area: pictures;
		margin-left: 7.5%;
	}

	.info {
		grid-area: info;
		grid-column: 2;
		grid-row: 3;
		align-content: center;
		margin-left: -100px;
	}

	p {
		font-family: var(--font-text);
		margin: 10px 25px 25px 0;
		line-height: 1.5em;
		text-align: justify;
		font-size: 1.25em;
	}

	p::first-letter {
		font-size: 1.25em;
		font-weight: 700;
	}

	h2 {
		font-family: var(--font-titles);
		font-size: 1.75rem;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 1.25em;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.video {
		grid-area: video;
		grid-column: 1;
		grid-row: 4;
		margin-top: 25px;
		margin-left: 7.5%;
		text-align: left;
	}

	.list {
		grid-area: list;
		grid-column: 2;
		grid-row: 4;
		margin: 25px 50px 0 20px;
		text-align: center;
		align-content: center;
	}

	h3 {
		font-family: var(--font-titles);
		font-size: 1.5rem;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 1px;
		line-height: 1.25em;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	h4 {
		font-family: var(--font-titles);
		font-size: 1.25rem;
		font-weight: 400;
		text-align: center;
		line-height: 2em;
	}

	li {
		list-style: none;
		line-height: 2em;
		text-align: center;
	}

	a{
		text-decoration: none;
		color: var(--rich-black);
		transition: color 0.3s ease;
		font-size: 1.1em;
	}

	a:hover {
		color: var(--coral);
	}

	a:visited {
		color: var(--blush);
	}

	a:visited:hover{
		color: var(--cerulean);
	}

	a::selection{
		color: var(--background-color);
		background-color: var(--coral);
	}

	.footer {
		grid-area: footer;
		grid-column: 1 / -1;
		grid-row: 5;
		text-align: center;
		margin: 25px 0 0 0;
		font-size: 1.25em;
	}

	.navbar {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr 0.5fr 2fr 1fr;
		padding-bottom: 15px;
		color: var(--rich-black);
		text-align: left;
		padding-left: 5%;
		padding-right: 5%;
		margin: 0;
	}

	#concertzaal,
	#formulier,
	#home {
		width: 100%;
		justify-content: space-between;
	}

	#concertzaal, #home, #formulier,
	#concertzaal:default, #home:default, #formulier:default,
	#concertzaal::after, #home::after, #formulier::after,
	#concertzaal::before, #home::before, #formulier::before,
	#concertzaal:active, #home:active, #formulier:active {
    text-decoration: none;
    color: var(--rich-black);
	}

	#concertzaal:hover, #home:hover, #formulier:hover {
		text-decoration: underline;
		color: var(--cerulean);
	}
	
}