@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');

:root{
    --color-primary: black;
	--color-secondary: white; 
	--color-accent: rgb(68, 68, 68); 

    --font-family: 'Roboto', sans-serif;
	--font-size-title: 2em;
}

/* Styling */ 
h1, p, h2 {
    color: var(--color-primary);
    font-family: var(--font-family);
}

body {
	overflow-x: hidden; 
	margin: 0; 
	padding: 0; 
}

section {
	height: 100vh; 
	background-color: rgb(255,240,219);
}

section:first-of-type {
	display: flex; 
	justify-content: start;
	align-items: end; 

	padding: 0 2em; 
}

.back {
	position: absolute; 
	top: 0; 
	left: 50%;
	transform: translateX(-50%); 
	font-size: 140vh; 
	line-height: 140vh;
	color: rgba(29, 29, 29, 0.1);

	font-family: 'League Script', cursive;
}

section:first-of-type p {
	font-size: 1.5em;
}

section:first-of-type h1 {
	font-size: 13em;
	margin: 0 0 0.2em 0;
	
	color: #1d1d1d;
}

section:first-of-type ul {
	position: absolute; 
	top: 0; 
	right: 1em; 
	margin: 0; 
	
	animation: names 20s linear infinite;
}

section:first-of-type ul li {
	list-style: none; 
	padding: 0; 
	margin: 0;
	font-size: 1.5em;
	text-align: right;
}

@keyframes names {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(-54%);
	}
}

#theme_switch {
	border: none; 
	border-radius: 99em;
	padding: 0;
	position: fixed; 
	top: 2em; 
	right: 2em;
	background-color: var(--color-secondary);
	width: 5em; 
	height: 2.5em;
}

#theme_switch span {
	border-radius: 99em;
	background-color: var(--color-accent); 
	height: 2em; 
	width: 2em; 
	display: block; 
}

.dark_theme {
	--color-primary: blue;
}

/* hybrid section */ 
.hybrid_section {
	position: relative; 
	background-color: rgb(255,240,219);
}

.sticky_container {
	position: sticky; 
	height: 100vh; 
	width: 100%; 
	top: 0;
	overflow: hidden; 
}

.scroll_horizontal {
	position: absolute; 
	will-change: transform; 
	height: 100%; 
	display: flex; 
	flex-direction: row;
	justify-content: space-between;
}

.scroll_content {
	height: 100%; 
	width: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.scroll_content path {
	transition: stroke-dashoffset 0.05s linear;
}

body > div:nth-of-type(2) {
	height: 300vh;
}

.container_scroll {
	height: 100vh;
	position: sticky; 
	top: 0; 
	overflow: hidden;  
	width: 100%;
}

.horizontal_scroll {	
	position: absolute; 
	top: 0; 
	will-change: transform;
	height: 100%;  
	display: flex; 
	align-items: center;
	/* width: 500vw; /* met svg kan deze weg */
	/* background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); */
}

path {
	stroke: var(--color-primary);
}

/* Leerdoelen */ 
section:has(.leerdoel) {
	height: 100vh; 
	background-color: #fff;
}

/* .leerdoel {
	display: flex; 
	flex-direction: column; 
	width: 100vw;
	height: 100vh; 
	justify-content: center;
	align-items: center;
	position: relative; 
} */

.leerdoel {
	height: 100vh; 
	justify-content: center;
	align-items: center;
	margin: 0 25vw; 
	display: grid; 
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(4, 1fr);
}

.leerdoel h2 {
	grid-row: 2 / 4; 
	grid-column: 1 / 3; 

	text-align: center;
	z-index: 1;

	font-size: 3em;
}

.leerdoel div {
	grid-row: 2 / 4;  
	grid-column: 2 / 7; 

	background-color: rgb(255,240,219);
	height: 100%; 
	z-index: 0;
}

.leerdoel p {
	grid-row: 2 / 4; 
	grid-column: 7 / 9;
	margin: auto 0 0 0.5em; 

	font-size: 1.2em;
	font-weight: 200; 
}