/*
LINKS:
Typetura docs: https://docs.typetura.com/creating-with-typetura/creating-your-own-typographic-system
Cubic Bezier: https://cubic-bezier.com/
Fraunces: https://fraunces.undercase.xyz/
Google variable fonts: https://css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/
Grid system: https://gist.github.com/scottkellum/bb46ea68c23e630842ee80c37513a3e6
*/


html {

	font-size: 100%;
	line-height: 1.35;
	font-weight: 340;

	/* Typetura */
	--tt-key: html;
	--tt-max: 900;
	--tt-ease: cubic-bezier(0, 0.78, 0.53, 1);

	/* Grid */
	--max-width: 1200px;
	--columns: 6;
	--gutter: 1.5rem;

	/* Color */
	--primary: #f4663a;
	/* --background: #efeded; */
	/* --background-alt: #ffffff; */
	--text: #31355b;
}
@keyframes html {
	0% {
		font-size: 0%;
	}

	100% {
		font-size: 125%;
	}
}
* {
	--grid: minmax(var(--gutter), 1fr)
		repeat(
			var(--columns),
			minmax(
				0,
				calc(
					(var(--max-width) - (var(--gutter) * (var(--columns) - 1))) /
						var(--columns)
				)
			)
		)
		minmax(var(--gutter), 1fr);
}

/* Element styles */

body {
	margin: 0;

	background-image: url(/sources/images/curvesAbout.svg);

	  background-size: cover; /* Cover the entire element */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* No repeat */

}

img {
	width: 100%;
}

/* Typography */

.masthead {
	color: var(--primary);
	mix-blend-mode: multiply;
	text-align: center;
	font-variation-settings: "WONK" 1, "SOFT" 30;
	--tt-key: masthead;
	--tt-max: 1200;
	--tt-ease: ease-in-out;
	margin: 0.5em 0 -0.5em;
}
@keyframes masthead {
    0% {
        font-size: 1rem; /* Aanpassen naar gewenste startgrootte */
        margin-bottom: -0.45em;
        font-weight: 600;
    }
    100% {
        font-size: 4rem; /* Aanpassen naar gewenste eindgrootte */
        margin-bottom: -0.375em;
        font-weight: 500;
    }
}

.primary-headline {
	--tt-key: primary-headline;
	--tt-ease: cubic-bezier(1, 0, 1, 1);
	--tt-max: 585;
	line-height: 1;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	margin: 0.5rem 0;
}
@keyframes primary-headline {
	0% {
		font-size: 1rem;
		font-weight: 500;
	}
	100% {
		font-size: 4rem;
		font-weight: 300;
	}
}

.meta {
	font-style: italic;
	margin: 0.25rem 0;
	font-size: 0.75rem;
}

.entry-summary {
	margin: 0.25rem 0;
}

/* Layout */

.main {
	column-gap: var(--gutter);
	grid-template-columns: var(--grid);
	padding: var(--gutter);
}

.entry {
	margin-bottom: var(--gutter);
}

.entry,
.entry-content {
	display: flex;
	flex-direction: column;
}



.entry-img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 0px /*<-top left*/ 25px /*<-top right*/ 25px /*<-bottom right*/ 0px /*<-bottom left*/;
}

@media screen 
  and (min-device-width: 20px)
  and (max-width: 479px) {
    
.entry-img {
  margin-left: -25px;
}

  }

.entry-date {
	order: -1;
}

/* Module overrides */

.entry-lede time {
	margin-bottom: 1rem;
}

.entry-lede time::after {
    content: "";
    display: block;

    margin-left: calc(var(--gutter) * -2);
    background: var(--primary);
    mix-blend-mode: multiply;
    margin-top: 0.67rem;
}


/* Breakpoints */

@media (min-width: 30em) {
	html {
		--columns: 12;
	}
	.main,
	.entry-lede {
		padding: 0;
		display: grid;
	}

	.entry,
	.trending {
		grid-column-start: 3;
		grid-column-end: span 10;
	}

	.entry-lede {
		column-gap: var(--gutter);
		grid-template-columns: var(--grid);
		grid-column-start: 1;
		grid-column-end: span 14;
		margin-bottom: 4rem;
	}

	.entry-lede > .entry-img {
		aspect-ratio: auto;
		grid-column-start: 1;
		grid-column-end: span 10;
	}

	.entry-lede .entry-content {
		grid-column-start: 3;
		grid-column-end: span 11;
		margin: -2.5rem calc(var(--gutter) * -1) 0;
		background: var(--background-alt);
		padding: 0.5rem var(--gutter) 1rem;
	}
}
@media (min-width: 50em) {
	html {
		--columns: 24;
	}

	.main::before,
	.main::after {
		content: "";
		display: block;
		grid-column-start: 8;
		grid-column-end: 26;
		grid-row-start: 2;
		grid-row-end: 3;
		background: var(--background-alt);
		margin: 0 calc(var(--gutter) * -1);
		z-index: -1;
	}

	/* .main::after {
		grid-column-start: 2;
		height: 1px;
		mix-blend-mode: multiply;
	} */

	.entry {
		grid-column-end: span 9;
		margin-bottom: var(--gutter);
	}
	.entry:nth-child(n + 2) {
		margin-top: -2rem;
		grid-row-start: 2;
	}
	.entry:nth-child(2) {
		grid-column-start: 8;
	}
	.entry:nth-child(3) {
		grid-column-start: 17;
	}

	.entry-lede {
		column-gap: var(--gutter);
		grid-template-columns: var(--grid);
		grid-column-start: 1;
		grid-column-end: span 26;
		margin-bottom: 4rem;
	}

	.entry-lede > .entry-img {
		aspect-ratio: auto;
		grid-column-start: 1;
		grid-column-end: span 13;
	}

	.entry-lede .entry-content {
		grid-column-start: 14;
		grid-column-end: span 12;
		margin: 0.5rem 0;
		padding: 4rem 0 0;
		background: none;
	}

	.trending {
		grid-row-start: 2;
		grid-column-start: 2;
		grid-column-end: span 6;
		margin-top: var(--gutter);
		transform: translatex(calc(var(--gutter) * -1));
	}
}


#wieZijnWe{
	text-align: center;
	margin: 40px;
	font-size: 2em;
	text-decoration: underline 5px;
}


.invisDiv{
	display: none;
}



/*--------------------Foto animatie---------------------*/
.entry-img {
	position: relative;
	left: -100%; /* Start the image outside the viewport */
	animation: slideIn 1s forwards; /* Animation duration and fill mode */
  }
  
  @keyframes slideIn {
	to {
	  left: 0; /* Slide the image to the left edge */
	}
  }


/*--------------------📳MOBILE📳---------------------*/
@media screen 
  and (min-device-width: 20px)
  and (max-width: 1226px) 
  
  {
	.invisDiv{
		display: block;
		height: 55px;

	}

	#firstArticle{

		margin-top: 15px;
	}

  }

  @media screen and (max-width: 534px) {
    #wieZijnWe {
        font-size: 1.2em;
    }
}