/* ------ Algemene CSS ------ */

/* Instellen dat de een anchor link smooth scrollt en niet verspringt */
html {
	scroll-behavior: smooth;
}

/* Algemene instellingen voor de dimensies, plaats, kleur en standaard lettergrootte van de body */
body {
	max-width: 1400px;
	background-color: #161616;
	margin: auto;
	font-size: 1rem;
}

main {
	min-height: calc(100vh - 400px);
}

/* Basisinstellingen voor het main grid dat op elke pagina gebruikt wordt, met 1 column voor mobile layout */
.gridContainer {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	margin: 40px 15px 0px 15px;
	gap: 30px;
}

/* Stijl die zorgt dat iets alleen voor screenreaders is */
.visuallyHidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;	
}

/* Header ruimte geven bovenaan de pagina */
header {
	height: 70px;
}

/* Skip knop voor toegankelijkheid buiten het zichtbare weergeven */
#headerSkip {
	position: absolute;
	left: -1000px;
}

/* Wordmark links in de header */
.headerWordmark {
	float: left;
	padding: 10px;
	margin: 5px;
	font-family: supria-sans, sans-serif;
	font-weight: 400;
	color: white;
	font-size: 1.9rem;
	line-height: 1.2em;
	text-decoration: none;
	border-radius: 10px;
}

.headerWordmark:hover {
	color: #6FE894;
	text-decoration: none;
	background-color: #262626;
}

/* Navigatieknop rechts in de header */
#navButton {
	all: unset;
	float: right;
	padding: 10px;
	fill: white;
	margin: 5px;
	cursor: pointer;
	border-radius: 10px;
}

/* Fill van de CSV en achtergrond van kleur veranderen op hover */
#navButton:hover {
	fill: #6FE894;
	background-color: #262626;
}

/* Focus stijl voor de navigatieknop voor toetsenbord navigatie */
#navButton:focus {
    outline: 1px solid white;
	border-radius: 10px;
}

/* De overlay van het navigatiemenu die boven de normale content komt te staan */
.navOverlay {
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0, 0.9);
	overflow-x: hidden;
	transition: 0.3s;
}

/* De content van het navigatiemenu waarbij de tekst ongeacht resolutie in het midden staat */
.navContent {
	position: absolute;
    top: max(40%, 130px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Links in het navigatiemenu */
.navOverlay a {
	padding: 8px;
	text-decoration: none;
	font-size: 4.5em;
	line-height: 6rem;
	font-weight: 600;
	font-family: supria-sans, sans-serif;
	color: white;
	display: block;
	text-transform: uppercase;
	text-align: center;
	transition: 0.2s ease;
}

/* Hover en focus stijl voor (toetsenbord)navigatie */
.navOverlay a:hover, .navOverlay a:focus {
	color: #6FE894;
	text-decoration: underline;
	transform: translateY(-2px);
	text-shadow: 0 2px black;
}

/* Sluitknop van de navOverlay */
.navOverlay .closeButton {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -15px;
	padding: 10px;
	font-weight: 300;
	cursor: pointer;
  	font-size: 60px;
}

/* == Navigatielinks kleiner maken om binnen het scherm te houden bij hele lage resoluties == */
@media screen and (max-height: 600px) {
	.navContent {
		top: 50%;
	}
	
	.navOverlay a {
		font-size: 3em;
	}
}

/* Page header met een grootte van het kleinere getal: 12% van de view-width of 4.5rem */
h1 {
	font-size: min(12vw, 4.5rem);
	line-height: min(12vw, 4.5rem);
	font-family: supria-sans, sans-serif;
	font-weight: 800;
	color: white;
	text-transform: uppercase;
}

/* Groene section header */
h2 {
	font-size: 2.2rem;
	font-family: supria-sans, sans-serif;
	font-weight: 600;
	color: #6FE894;
	text-transform: uppercase;
}

/* Over mij subheader */
h3.overMijH3 {
	font-size: 1.4rem;
	font-family: supria-sans, sans-serif;
	font-weight: 600;
	color: white;
}

/* Portfolio card header */
h3.cardText {
	font-size: 1.2rem;
	font-family: supria-sans, sans-serif;
	font-weight: 300;
	color: white;
}

p, a {
	font-size: 1rem;
	line-height: 1.5rem;
	font-family: "open-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: white;
}

/* Section subtitle */
p.subtitle {
	font-size: 1.4rem;
	line-height: 1.8rem;
	font-family: supria-sans, sans-serif;
	font-weight: 600;
	color: white;
}

/* Over mij pagina info over datum/instantie  */
p.overMijFunctieInfo {
	font-size: 1.2rem;
	font-family: supria-sans, sans-serif;
	font-weight: 300;
	color: #868686;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #6FE894;
}

/* Stijl voor de alt tekst die verschijnt wanneer een afbeelding niet laadt */
img {
	font-size: 1.5rem;
	font-family: "open-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #868686;
}

/* Stijl voor de ampersand in de hero tekst op de hoofdpagina */
#heroAmpersand {
	font-size: 1em;
	font-family: gelato-luxe, sans-serif;
	font-weight: 400;
	color: #6FE894;
}

/* Stijl voor de ampersand */
.ampersand {
	font-family: gelato-luxe, sans-serif;
	line-height: 0;
	font-weight: 400;
	color: #6FE894;
}

/* Stijl voor de iconen van Google */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 20;
	vertical-align: middle;
}

/* Grootte en afgeronde hoeken van de afbeelding in de heroImage class */
.heroImage img {
	width: 100%;
	border-radius: 10px;
}

/* Wanneer er meerdere knoppen bij elkaar staan ze in een flexbox zetten */
.buttonContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Stijl voor buttons en links die eruit moeten zien als een button */
button, .linkButton {
	display: inline-block;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #6FE894;
	color: white;
	background-color: #161616;
	padding: 10px 20px;
	font-family: supria-sans, sans-serif;
	font-size: 1em;
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease;
}

button:hover, .linkButton:hover {
	background-color: #262626;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 2px black;
}

/* Focus stijl voor toetsenbordnavigatie */
button:focus, .linkButton:focus {
	outline: none;
	border-color: #6FE894;
}


/* Plaats van de geanimeerde pijl op de homepagina */
.arrow {
    position: relative;
	width: 100%;
	height: 200px;
}

/* Met een lege span twee kleine, gedraaide rechthoeken maken die samen de geanimeerde pijl vormen */
.arrowSpan {
	position: relative;
	top: 30px;
    left: 50%;
    display: block;
    width: max(30px, 1.5vw);
    height: max(30px, 1.5vw);
    border-bottom: 5px solid #6FE894;
    border-right: 5px solid #6FE894;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

/* Animate van de pijl met keyframes */
@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}

/* Grootte en plaats van de footer */
footer {
	position: relative;
	bottom: 0;
	height: 300px;
	width: calc(100% - 15px);
}

/* Stijl en plaats van links in de footer */
footer a {
	position: absolute;
	left: 0;
	bottom: 70px;
	padding: 10px;
	font-size: 1em;
	color: #868686;
}

/* Stijl en plaats van de copyright tekst in de footer */
#footerCopyrightText {
	position: absolute;
	left: 0;
	bottom: 10px;
	padding: 10px;
	font-size: 1em;
	color: #868686;
}


/* ------ CSS voor de contactpagina ------ */

/* Contactformulier neemt de volledige breedte van de pagina in */
.contactFormulier {
	width: 100%;
}

/* Stijl en plaats van het label voor de invoervelden in de bovenkant van de border */
label {
	position: relative;
	left: 20px;
	top: 10px;
	color: white;
	background-color: #161616;
	font-family: supria-sans, sans-serif;
	font-weight: 300;
	font-size: 1.2em;
}

/* Stijl en grootte van de invoervelden */
input, textarea { 
	background-color: #161616;
	border-radius: 10px;
	border: 1px solid #868686;
	text-color: #868686;
	color: white;
	padding: 10px 20px;
	margin-bottom: 5px;
	display: block;
	width: calc(100% - 40px);
	font-family: open-sans, sans-serif;
	font-weight: 300;
	font-size: 1em;
}

/* Aparte hoogte voor het invoerveld van het bericht */
textarea { 
	height: 200px;
	resize: none;
}

/* Focusstijl voor de invoervelden voor toetsenbordnavigatie */
input:focus, textarea:focus {
	outline: none;
	border-color: #6FE894;
}

/* Rode rand voor foutief ingevulde velden. Wordt geupdate via form_validation.js */
input.invalid, textarea.invalid {
    border-color: #FF7961;
}

/* Stijl voor de foutmelding die verschijnt bij foutief ingevulde velden. */
.errorMessage {
	visibility: hidden;
	font-size: 0.8em;
	font-family: "open-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	color: #FF7961;
}

/* Stijl voor de verstuur input knop */
#versturen {
	border: 1px solid #6FE894;
	margin-top: 15px;
	width: 180px;
	font-family: supria-sans, sans-serif;
	font-weight: 500;
}

/* Hover effect waarbij de tekst iets omhoog gaat en een schaduw krijgt */

#versturen:hover {
	background-color: #262626;
	text-decoration: none;
	cursor: pointer;
	transform: translateY(-1px);
	box-shadow: 0 2px black;
}

/* Focus stijl voor toetsenbordnavigatie*/
#versturen:focus {
	outline: 1px solid white;
	outline-offset: 5px;
}


/* ------ CSS voor het portfolio grid en de card elementen ------ */

/* Basisinstellingen voor het subgrid dat gebruikt wordt voor portfolio werk */
.portfolioGrid {
	display: grid;
	grid-template-columns: subgrid;
	gap: 30px;
}

.portfolioTopMargin {
	margin-top: 100px;
}

/* Plaats, grootte en inner shadow aan de onder kant van alle cards */
.card {
	position: relative;
	text-align: left;
	height: 100%;
	max-height: 250px;
	border-bottom: 1px solid #6FE894;
	border-radius: 10px;
	box-shadow: inset 0rem -8rem 3rem -3rem rgba(0,0,0,0.9);
	transition: 0.2s ease;
}

/* Hover effect waarbij de tekst iets omhoog gaat en een schaduw krijgt en de inner shadow van de card van kleur verandert */
.card .cardText {
	display: inline-block;
	transition: transform 0.2s ease;
}

.card:hover {
	box-shadow: inset 0rem -8rem 3rem -3rem rgba(11, 20, 14, 0.9);
}

.card:hover .cardText {
	transform: translateY(-1px);
	text-shadow: 0px 2px #161616;
}

/* Afbeelding in card achter de inner shadow plaatsen */
.cardImage {
	position: relative;
	z-index: -1;
	border-radius: 10px;
}

/* Tekst in card aan onderkant van de card */
.cardText {
	position: absolute;
	bottom: 0px;
	margin: 10px;
}

/* Link met dezelfde grootte als de hele card om de hele card klikbaar te maken */
a.cardLink {
	display: block;
   	height: 100%;
   	width: 100%;
   	text-decoration: none;
}

/* Afbeelding binnen de cards neemt de volledige grootte in en wordt gecropt om altijd perfect in de card te passen */
.card1 img, .card2 img, .card3 img, .card4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container voor een embedded video die een resolutie van 16:9 aanhoud binnen zijn container */
.portfolioVideo {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

/* Plaats en grootte van de embedded video binnen zijn eigen container */
.portfolioVideo iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* Container voor afbeeldingen op de portfolio subpagina's die de volledige grootte van de container inneemt om de gehele afbeelding te laten zien */
.portfolioFullImage {
	height: 100%;
}

/* Stijl van de afbeelding op portfolio subpagina's */
.portfolioFullImage img {
	width: 100%;
	border-radius: 10px;
	border-bottom: 1px solid #6FE894;
}


/* ------ CSS voor de over mij pagina ------ */

/* Bepaalde elementen alleen zichtbaar maken in print. Voor het printen is een losse stylesheet print.css die dit juist zichtbaar maakt */
.printOnly {
	display: none;
}

/* Margin aan de onderkant van alle articles */
.overmijMain article, .overmijSidebar article {
	margin-bottom: 3em;
}

/* Margin aan de bovenkant van alle h3's die niet de eerste binnen hun section zijn */
.overmijMain article h3:not(:first-of-type) {
	margin-top: 1.5em;
}

/* Stijl voor de lijst onder het kopje karakter */
#karakter ul {
	font-size: 1.1em;
	font-family: "open-sans", sans-serif;
	font-weight: 300;
	font-style: normal;
	list-style: disc;
	padding-left: 20px;
}

/* Tekst in de lijst wit maken */
#karakter li {
	color: white;
}

/* Opsommingsteken groen maken */
#karakter li::marker {
	color: #6FE894;
}


/* ============= Media query voor minstens 768px (tablets) ============= */
@media screen and (min-width: 768px) {
	
	/* ------ Algemene CSS ------ */
	
	/* Grid ruimte aan de bovenkant en 3 columns geven in plaats van 1 */
  	.gridContainer {
		margin-top: 10vh;
   		grid-template-columns: repeat(3, 1fr);
	}
	
	/* Header van een pagina 3 columns (gehele breedte) in laten nemen */
	.pageHeader {
		grid-column: 1 / span 3;
		grid-row: 1;
	}
	
	/* Header die bedoeld is om links naast iets anders te staan maar 2 columns in laten nemen */
	#headerAsideLeft {
		grid-column: 1 / span 2;
		grid-row: 1;
	}
	
	/* Nieuwe grootte van de pagina headers, het grootste getal van 7% view-width of 4.5em */
	h1 {
		font-size: max(7vw, 4.5em);
		line-height: max(7vw, 4.5rem);
	}
	
	/* Nieuwe grote van de section headers */
	h2 {
		font-size: 2.3em;
	}
	
	/* Hero image op de meest rechter column plaatsen */
	.heroImage {
		grid-column: 3;
		grid-row: 1;
	}
	
	/* De section van de geanimeerde pijl de hele breedte in laten nemen */
	.arrow {
		grid-column: 1 / span 3;
	}
	
	/* Andere plaats van de link in de footer */
	footer a {
		bottom: 10px;
	}

	/* Andere plaats en de container komt achter die van de link zodat de link klikbaar blijft */
	#footerCopyrightText {
		right: 0;
		z-index: -1;
		text-align: right;
	}
	
	/* Plaats van de preview van mijn portfolio op de homepagina */
	#portfolioPreview {
		grid-row: 3 / span 3;
	}
	
	/* Plaats van de contact CTA op mijn homepagina */
	#contactCTA {
		grid-column: 1 / span 3;
		grid-row: 6;
		margin-top: 150px;
		justify-self: center;
		text-align: center;
	}
	
	
	/* ------ CSS voor de contactpagina ------ */
	
	/* Contactformulier staat onder de header en neemt de hele breedte in */
	.contactFormulier {
		grid-column: 1 / span 3;
		grid-row: 2;
	}
	
	
	/* ------ CSS voor het portfolio grid en de card elementen ------ */
	
	/* Portfolio subgrid neemt gehele breedte in en past rijhoogte aan aan content om te voorkomen dat cards er raar uit gaan zien en dat er te veel ruimte ontstaat */
	.portfolioGrid  {
		grid-column: 1 / span 3;
		grid-template-rows: auto;
	}
	
	/* Plaats en ruimte van subgrid 1 */
	#portfolioGrid1 {
		grid-row: 2 / span 3;
	}
	
	/* Plaats en ruimte van subgrid 2 */
	#portfolioGrid2 {
		grid-row: 5 / span 3;
	}
	
	/* Plaats en ruimte van subgrid 3 */
	#portfolioGrid3 {
		grid-row: 8 / span 3;
	}
	
	/* Intro tekst per subgrid neemt de gehele breedte in en staat bovenaan in het subgrid */
	.introText {
		grid-column: 1 / span 3;
		grid-row: 1;
	}
	
	/* Max hoogte van een card van 2 grid rows hoog */
	.card {
		max-height: 500px;
	}
	
	/* Plaats van card 1 binnen het subgrid, 2x2 linksboven onder te tekst */
	.card1 {
		grid-column: 1 / span 2;
		grid-row: 2;
	}
	
	/* Plaats van card 2 binnen het subgrid, 1x2 rechtsboven onder te tekst */
	.card2 {
		grid-column: 3;
		grid-row: 2;
	}
	
	/* Plaats van card 3 binnen het subgrid, 1x1 linksonder onder te tekst. Max hoogte van 250px om te voorkomen dat de card hoger wordt dan 1 rij door de inhoud */
	.card3 {
		grid-column: 1;
		grid-row: 3;
		max-height: 250px;
	}
	
	/* Plaats van card 4 binnen het subgrid, 2x1 rechtsonder onder te tekst. Max hoogte van 250px om te voorkomen dat de card hoger wordt dan 1 rij door de inhoud */
	.card4 {
		grid-column: 2 / span 2;
		grid-row: 3;
		max-height: 250px;
	}
	
	/* Embedded video neemt volledige breedte in en komt onder de header */
	.portfolioVideo {
		grid-column: 1 / span 3;
		grid-row: 2 / span auto;
	}
	
	/* Afbeelding die volleidg wordt weergegeven neemt volledige breedte in en komt onder de header */
	.portfolioFullImage {
		grid-column: 1 / span 3;
		grid-row: 2 / span auto;		
	}
	
	
	/* ------ CSS voor de over mij pagina ------ */
	
	/* Subgrid om de main content en sidebar naast elkaar te zetten */
	.overmijGrid {
		display: grid;
		grid-column: 1 / span 3;
		grid-row: 2;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
	}
	
	/* Main content neemt de twee rechter kolommen in */
	.overmijMain {
		grid-column: 2 / span 2;
	}
	
	/* Sidebar neemt linker kolom in */
	.overmijSidebar {
		grid-column: 1;
	}
	
	/* Stijl van een article in de sidebar met een border */
	.overmijSidebar article {
		padding: 20px;
		margin-bottom: 0px;
		border-radius: 10px;
		border: 1px solid #868686;
	}
	
	/* Overbodige margin van de 1-column-layout aan de onderkant weghalen */
	#nevenactiviteiten {
		margin-bottom: 0px;
	}
	
}

/* ============= Media query voor minstens 1024px (desktop) ============= */
@media screen and (min-width: 1024px) {
	
	/* Main grid uitbreiden naar 4 columns */
	.gridContainer {
		grid-template-columns: repeat(4, 1fr);
	}
	
	/* Pagina header ruimte uitbreiden naar 4 columns */
	.pageHeader {
		grid-column: 1 / span 4;
		grid-row: 1;
	}
	
	/* Hero tekst op de linker 2 columns plaatsen */
	.heroText {
		grid-column: 1 / span 2;
	}
	
	/* Hero image op de rechter 2 columns plaatsen */
	.heroImage {
		grid-column: 3 / span 2;
		grid-row: 1;
	}
	
	/* Breedte van de geanimeerde pijl container uitbreiden naar gehele breedte */
	.arrow {
		grid-column: 1 / span 4;
	}
	
	#contactCTA {
		grid-column: 1 / span 4;
	}
	
	/* Contactformulier op de rechter 2 columns plaatsen */
	.contactFormulier {
		grid-column: 3 / span 2;
		grid-row: 1;
	}
	
	
	/* ------ CSS voor het portfolio grid en de card elementen ------ */
	
	/* Instellingen voor het portfolio subgrid. */
	.portfolioGrid {
		grid-template-rows: auto;
		grid-column: 1 / span 4;
		grid-row: 2 / span 3;
		gap: 30px;
	}
	
	/* Intro tekst in linker column */
	.introText {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	
	/* Plaats van card 1 binnen het subgrid, 2x2 linksboven naast de tekst */
	.card1 {
		grid-column: 2 / span 2;
		grid-row: 1 / span 2;
		height: 500px;
	}
	
	/* Plaats van card 2 binnen het subgrid, 1x2 rechtsboven naast de tekst */
	.card2 {
		grid-column: 4;
		grid-row: 1 / span 2;
		height: 500px;
	}
	
	/* Plaats van card 3 binnen het subgrid, 1x1 linksonder naast de tekst */
	.card3 {
		grid-column: 2;
		grid-row: 3;
	}
	
	/* Plaats van card 4 binnen het subgrid, 2x1 rechtsonder naast de tekst */
	.card4 {
		grid-column: 3 / span 2;
		grid-row: 3;
	}
	
	/* Plaats van de embedded video naast de tekst */
	.portfolioVideo {
		grid-column: 2 / span 3;
		grid-row: 1 / span auto;
	}
	
	/* Plaats van de volledige afbeelding naast de tekst */
	.portfolioFullImage {
		grid-column: 2 / span 3;
		grid-row: 1 / span auto;
	}
	
	
	/* ------ CSS voor de over mij pagina ------ */
	
	/* Subgrid de gehele breedte in laten nemen */
	.overmijGrid {
		grid-column: 1 / span 4;
	}
	
	/* Main content de rechter 3 columns in laten nemen */
	.overmijMain {
		grid-column: 2 / span 3;
	}
}


/* ============= Media query voor minstens 1400px (max breedte van de body) ============= */
@media screen and (min-width: 1400px) {
	
	/* Plaats van de nav overlay sluit knop precies boven de open knop houden */
	.navOverlay .closeButton {
		right: calc((100% - 1400px) / 2);
		max-right: 1400px;
	}
	
	/* Nieuwe grootte van de pagina headers */
	h1 {
		font-size: 6.2em;
		line-height: 6.2rem;
	}
	
}