/* DEEL TITEL */

#deel_titel {
	height: 300rem;
}

#titel_home {
	top: 50rem;
	left: 50rem;
	height: 80rem;
}

#titel_tekst {
	top: 50rem;
	left: calc(50% + 30rem);
	font: 60rem/1 "Titel", sans-serif;
}

.kiesknop {
	background-color: #060;
	border: 2rem solid #0f0;
	text-decoration: none;
	padding: 8rem;
	border-radius: 16rem;
	
	&:hover {
		background-color: #040;
	}
}

#titel_nu {
	top: 150rem;
	left: 50%;
	font: 30rem/1 "Normaal", sans-serif;
}

#titel_vorige {
	top: 230rem;
	left: calc(20% - 50rem);
}

#titel_volgende {
	top: 230rem;
	left: calc(80% + 50rem);
}

#titel_vorige_img, #titel_volgende_img {
	height: 50rem;
	aspect-ratio: 1 / 1;
}

#titel_maand {
	top: 230rem;
	left: 50%;
	font: 50rem/1 "Kop", sans-serif;
}


/* DEEL KALENDER */

#deel_kalender {
	height: 700rem;
}

#kalender_deco1 {
	top: 400rem;
	left: calc(40% - 200rem);
	opacity: 0.2;
	height: 800rem;
	transform: translate(-50%, -50%) rotate(-20deg);
}

#kalender_deco2 {
	top: 400rem;
	left: calc(80% + 100rem);
	opacity: 0.1;
	height: 700rem;
	transform: translate(-50%, -50%) rotate(30deg);
}

#kalender {
	top: 50%;
	left: 50%;
	width: 600rem;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 2rem;

	& .header, & .dag {
		padding: 16rem 16rem;
		box-shadow: 0 0 0 2rem #000;
	}
	& .header {
		background-color: #628;
		color: #fff;
		font: bold 30rem/1 "Normaal", sans-serif;
	}
	& .dag {
		background-color: #caf;
		color: #000;
		font: 30rem/1 "Normaal", sans-serif;
	}
	& .beschikbaar {
		background-color: #8c8;
		font-weight: bold;
		text-decoration: none;
	}
	& .vol {
		background-color: #c88;
		font-weight: bold;
		text-decoration: none;
	}
	& .geweest {
		background-color: #ccc;
	}
	& .vandaag {
		color: #00f;
	}
}