@charset "utf-8";

:root {
    --header-bgkleur: #273a62;
    --eerste-container-bgkleur: #517597;
    --tweede-container-bgkleur: #776ca8;
    --derde-container-bgkleur: #aab88f;
}

*,
::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

body {
	min-height: 100vh;
	font-size: 2rem;
}

body {
	font-family: Verdana, Arial, sans-serif;
	background: #413d41;
	display: grid;
	place-items: center;
	justify-items: stretch;
}
header{
	text-align: center;
	background-color: var(--header-bgkleur);
}
h1, h2{
	font-weight: 100;
}

header h1{
	color: white;
	line-height: 1.3;
	padding-top: 3rem;
	font-size: 7rem;
}

header h2{
	color: white;
	line-height: 1.3;
	background-color: transparent;
	padding-bottom: 3rem;
}
nav {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: right;
    padding-bottom: 2em;
    width: 100vw;
    padding-right: 20px;
}
nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 2rem;
}
nav a{
	text-decoration: none;
	color: white;
	background-color: #333;
	line-height: 2em;
	padding: 0 1em;
	border-radius: .3rem;
	display: block;
	transition: .3s;
}
nav a:hover{
	text-decoration: none;
	background-color: white;
	color: black;
	transform: scale(1.1);

}

.container {
	display: flex;
	flex-flow: row wrap;
	justify-content: left;

	gap: 20px;
	min-height: 100vh;
	align-content: flex-start;
}

.container label {
	flex: 0 0 calc(33% - 10px);
	margin: 0;

	padding: 20px;
	position: relative;
	height: 40vh;

}
.container label div {
    display: flex;
    place-items: center;
    flex-wrap: wrap;
    justify-content: center;
	
}
.container div p {
	color: white;
	padding: 0 1em;
	line-height: 2em;

}

.container div img {
	width: auto;
	max-height: 100%;
	height: calc(40vh - 100px);
	cursor: pointer;
	transition: all ease-in-out .5s;
	position: relative;
	object-fit: contain;
	flex: 0 1 100%;
}

h2 {
	background-color: white;
	width: 100%;
	line-height: 1.5;
	padding: 0 1em;
	margin-top: 0;
}

#landschap {
	background-color: var(--eerste-container-bgkleur);
}

#gradient {
	background-color: var(--tweede-container-bgkleur);
}

#ma-logo {
	background-color: var(--derde-container-bgkleur);
}

input[type=checkbox] {
	display: none;
}

input[type=checkbox]:checked~div {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: grey;
	padding: 20px;
}

input[type=checkbox]:checked~div img {
	height: calc(100vh - 100px);
}