/*basic settings: reset browser default settings*/
*, html {text-decoration:none; list-style:none; padding:0; margin: 0; outline:none; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif Neue,Arial,Noto Sans,sans-serif; font-size: 16px; text-align: left; line-height: 1.6; color: #585859; scroll-behavior: smooth; transition: color 1s;}

/*big stuff: verdeel de body in 5 rijen en 5 kolommen*/
body {display: grid; grid-gap: 1em; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, auto);}

pre-header {grid-row: 1 / 2; grid-column: 2 / 5; }
nav {grid-row: 2 / 3; grid-column: 2 / 5; }
#advert {grid-row: 3 / 4; grid-column: 2 / 4; z-index: 99;}
header {grid-row: 3 / 4; grid-column: 1 / 6; }
main {grid-row: 4 / 5; grid-column: 2 / 5; }
footer {grid-row: 5 / 6; grid-column: 2 / 5; }

/*grid stuff for sections: verdeel de secties in kleinere blokjes*/
#about, #cvlist {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em;}
nav ul, #social {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em;}

/*nav*/
nav li a {display: block; height: 70px; line-height: 70px; font-size: 150%; font-weight: 600; text-align: center; }
nav li a > i  {font-size: 120%; margin: 0 10px;}

/*font stuff*/
h1, h2, h3, h4, h5, p {padding: 20px;}
h1 {font-size: 250%; }
h2 {font-size: 170%; }
h3 {font-size: 150%; }


/*images*/
img {width: 100%;}

/*color en decostuff afwerking: dit doe je op het einde */
body {background-color: #000000;}
a, h1, h2 {color: #ffffff; border-bottom: 1px solid #b2b0b0;}
i {color: #ffffff;}
nav li a:hover {color: #524d4d; background-color: #b2b0b0; border-radius: 20px;}
nav li a:hover > i {color: #fff;}

#cvlist div { box-shadow: 0px 5px 30px 0px #d8dbdd; border-radius: 20px; background-color: #fff;}
#cvlist img { border-radius: 20px;}

/*fix mobile*/
@media (max-width: 600px) {
	body {display: block;}
	#about, nav ul, #social, #cvlist {grid-template-columns: 1fr;}
	nav li a {display: block; height: 50px; line-height: 50px;}
}