@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
*{
	padding: 0;
	margin: 0;
}

	body, html {
		height: 100%;
		margin: 0;
		background-color: darkred;
			/* Achtergrond animatie naam, duur en aantal herhalingen */
		animation-name: backgroundanimation;
		animation-duration: 10s;
		animation-iteration-count: infinite;
	}

/* Breedte scrollbar */
	::-webkit-scrollbar {
		width: 5px;
	}

/* Kleur van het 'spoor' (klinkt dat logisch?) */
	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px grey; 
		border-radius: 10px;
	}

/* Kleur van de scrollbar */
	::-webkit-scrollbar-thumb {
		background: darkslategray; 
		border-radius: 10px;
	}	

/* Kleur van de scrollbar als je hovert */
	::-webkit-scrollbar-thumb:hover {
		background: gray; 
	}

/* Achtergrond animatie kleurenschema */
	@keyframes backgroundanimation {
		0% {background-color: rgb(94, 6, 3);}
		25% {background-color: rgb(159, 9, 9);}
		50% {background-color: rgb(255, 9, 9);}
		75% {background-color: rgb(241, 93, 7);}
		100% {background-color: rgb(94, 6, 3);}
	}

/* De navbar bovenaan de pagina */
	.navbar {
		position: fixed;
		height: 80px;
		width: 100%;
		top: 0;
		left: 0;
		background: rgb(152, 150, 149);
		opacity: 1;
		border-bottom: 10px solid rgb(241, 164, 112);
		z-index: 1;
	}

/* Logo in de navbar */
	.navbar .logo {
		width: 225px;
		height: 75px;
		padding: 5px 10px;
	}

/* De links bij elkaar */
	.navbar ul {
		float: right;
		margin-right: 20px;
	}

/* Positionering van de links */
	.navbar ul li {
		list-style: none;
		margin: 0 8px;
		display: inline-block;
		line-height: 80px;
	}

/* De styling van de links */
	.navbar ul li a {
		font-size: 15px;
		font-weight: bold;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: white;
		padding: 6px 13px;
		text-decoration: none;
		transition: .4s;
	}

/* Hover effect van de links */
	.navbar ul li a.active,
	.navbar ul li a:hover {
		background: red;
		border-radius: 2px;
	}

/* Zorgt ervoor dat de 2 buttons + Noorderkracht in het midden staan */
	.wrapper .center {
		position: absolute;
		left: 50%;
		top: 55%;
		transform: translate(-50%, -50%);
		font-family: sans-serif;
	}

/* De styling van h1 'Noorderkracht' op de index pagina */
	.center h1 {
		color: white;
		font-size: 70px;
		width: 900px;
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-weight: bold;
		text-align: center;
	}

/* De styling van h2 'Ontdek je talent' op de index pagina */
	.center h2 {
		color: white;
		font-size: 35px;
		font-weight: bold;
		margin-top: 10px;
		width: 885px;
		text-align: center;
		font-family: cursive;
	}

/* Centreert de buttons op de index pagina */
	.center .buttons {
		margin: 35px 280px;
	}

/* De styling van de buttons op de index pagina */
	.buttons button {
		height: 50px;
		width: 150px;
		font-size: 18px;
		font-weight: 600;
		color: black;
		background: goldenrod;
		outline: none;
		cursor: pointer;
		border: 1px solid black;
		border-radius: 25px;
		transition: .4s;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

/* Hover effectje van de buttons op de index pagina */
	.buttons button:hover {
		background: lightskyblue;
	}