:root {
	--margin: 8;
	--direction1: to bottom;
	--direction2: to left;
	--background: transparent;
	--text-color: black;
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--bodyfont: "Irma Text", var(--system-ui);
	--headerfont: Riggs, var(--system-ui);

	
	--line1: hsl(197, 100%, 70%);
	--line2: hsl(62, 100%, 71%);
	--line3: hsl(330, 100%, 61%);
	--line4: hsl(109, 100%, 60%);
	--line5: hsl(24, 100%, 57%);
	
	--line1: hsl(330, 100%, 51%);
	--line2: orangered;
	--line3: hsl(330, 100%, 51%);
	--line4: orange;
	
	
	--bg1: hsl(188, 100%, 30%);
	--bg2: hsl(188, 100%, 24%);
	--main-bg: hsla(0,0%,100%,.86);
	
	--gradient: var(--background) calc( var(--margin) * .4vmin ),
		var(--line1) calc( var(--margin) * .4vmin ),
		var(--line1) calc( var(--margin) * .5vmin ),
		var(--background) calc( var(--margin) * .5vmin ),
		
		var(--background) calc( var(--margin) * .6vmin ),
		var(--line2) calc( var(--margin) * .6vmin ),
		var(--line2) calc( var(--margin) * .7vmin ),
		var(--background) calc( var(--margin) * .7vmin ),
		
		var(--background) calc( var(--margin) * .8vmin ),
		var(--line3) calc( var(--margin) * .8vmin ),
		var(--line3) calc( var(--margin) * .9vmin ),
		var(--background) calc( var(--margin) * .9vmin ),
		
		var(--background) calc( var(--margin) * 1vmin ),
		var(--line4) calc( var(--margin) * 1vmin ), 
		var(--line4) calc( var(--margin) * 1vmin + 1.1vmin ), 
		var(--background) calc( var(--margin) * 1vmin + 1.1vmin );
}
@media (min-width: 30em) {
	:root {
		--margin: 11.11111;
		--direction1: to right;
		--direction2: to top;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--text-color: white;
	}
}
body {
	font-family: var(--bodyfont);
	font-weight: 300;
	color: black;
	color: var(--text-color);
	margin: 0;
	background-color: var(--background);
	background-blend-mode: screen;
	background-image: 
		linear-gradient(
				var(--direction1), 
				var(--gradient)
			),
			linear-gradient(
				var(--direction2),
				var(--gradient)
			),
			linear-gradient( to left, var(--bg1) 60%, var(--bg2) 100%);
	background-position: 2vw 10vmin, 0 -2vh, 65vw;
	background-attachment: fixed;
	
}






/* *********************************************
***********************************************
* De Header
***********************************************
********************************************* */


header {
	font-size: 8.7vw;
	line-height: 1;
	font-family: var(--headerfont);
	font-weight: 900;
	margin-left: calc( var(--margin) * .7vmin );
	margin-top: calc( var(--margin) * 1vmin );
}
header h1,
header p {
	font: inherit;
	font-family: var(--headerfont);
}
header a {
	color: var(--text-color);
	text-decoration: none;
}
header a::before {
	position: fixed;
	content: "Bureau Hangmat";
	color: hsla(0,0%,100%,.5);
	mix-blend-mode: overlay;
}
@media (min-width: 30em) {
	header {
		font-size: 8.7vh;
		position: absolute;
		writing-mode: vertical-lr;
		left: calc( var(--margin) * .7vmin );
		top: calc( var(--margin) * .5vmin );
		margin: 0;
	}
	header h1,
	header p {
		margin: 0 -0.23em 0 0 ;
	}
	
}





/* *********************************************
***********************************************
* De Main
***********************************************
********************************************* */


main {
	margin: calc( var(--margin) * 1vmin ) calc( var(--margin) * 1vmin ) calc( var(--margin) * 2vmin ) calc( var(--margin) * .5vmin );
	display: grid;
	grid-template-columns: 1fr auto 3fr;
	line-height: 1.414;
}
@media (min-width: 20em) {
	main {
		margin: calc( var(--margin) * 1vmin ) calc( var(--margin) * 1vmin ) calc( var(--margin) * 2vmin );
		margin-right: calc( var(--margin) * 2vmin );
	}
}
main {
	
}
main section {
	margin-left: auto;
	margin-right: auto;
	grid-column-start: 2;
}
main section:first-of-type {
	max-width: 35em;
	padding: 1em;
	background: hsla(0,0%,100%,.86);
	border: .2em solid currentcolor;
	margin-bottom: calc( var(--margin) * .5vmin );
}
main section *:first-child {
	margin-top: 0;
}
main section *:last-child {
	margin-bottom: 0;
}
@media (min-width: 30em) {
	main {
		margin-left: calc( var(--margin) * 2vmin );
		margin-right: calc( var(--margin) * .5vmin );
	}
}
@media (min-width: 69em) {
	main{
		display: grid;
		gap: calc( var(--margin) * .5vmin );
		grid-template-columns: 1fr calc(28vw - var(--margin) * .5vmin);
		align-items: start;
	}
	main section {
		grid-column-start: auto;
	}
}

main section:nth-of-type(2) {
	display: grid;
	align-content: start;
	max-width: 35em;
	padding: 1em;
	width: 100%;
}






/* *********************************************
***********************************************
* Algemene content styling
***********************************************
********************************************* */


h1, h2, h3, h4, h5 {
	font-family: var(--bodyfont);
}
h1 { 
	font-size: 1.999396em;
	font-weight: 900;
	line-height: 1;
	margin: .5em 0 1em !important;
}
h2 { 
	font-size: 1.414em;
	font-weight: 200;
	line-height: 1.2;
}
h2, h3, h4, h5 {
	margin: 1.5em 0 .25em;
}
:is(h2, h3, h4, h5) + p {
	margin-top: 0;
}
h3, h4, h5 { 
	font-weight: 400;
	font-size: 1em;
}
h4,h5 { font-weight: 300; }
h4 { font-style: italic; }


a {
	text-decoration: underline;
	transition: .2s;
}
a::before {
	transition: .2s;
}



h1 + footer {
	font-style: italic;
	margin-top: -1.414em;
	margin-bottom: 2em;
}

blockquote {
	margin: 4rem 2rem;
	font-size: 2em;
}
blockquote::before {
	content: '“';
	position: absolute;
	margin-left: -.5em;
	margin-top: -.15em;
	font-size: 4rem;
}
blockquote > p {
	line-height: 1;
}
blockquote > p:last-of-type {
	margin-bottom: 0;
}
blockquote footer {
	font-style: italic;
	font-size: 1rem;
	margin-top: .5sem;
}
blockquote footer::before {
	content: '—';
}
section img {
	max-width: 39em;
	max-height: 80vh;
	width: 100%;
	height: auto;
	border: .2em solid currentcolor;
	box-sizing: border-box;
}
figure {
	margin: 3em -2em;
	display: grid;
	justify-content: center
}
figcaption {
	font-style: italic;
	padding: .5em 2em 0;
}

section:nth-of-type(2) figure {
	margin: 1em 0 1em -2em;
}
section:nth-of-type(2) figcaption {
	color: white;
	font-size: .9em;
	padding: .5em 1em 0;
}

/* *********************************************
***********************************************
* De Nav
***********************************************
********************************************* */


body > nav {
	display: flex;
	color: white;
	position: absolute;
	right: calc( (var(--margin) * .5vmin) );
	top: calc( (var(--margin) * .5vmin) - 1em );
}
body > nav ul {
	display: flex;
	margin-left: auto;
	list-style: none;
	margin-top: 0;
}
body > nav li {
	margin: 0;
}
body > nav a {
	color: inherit;
	text-decoration: none;
	display: block;
	padding: .5em;
}
body > nav a:hover {
	text-decoration: underline;
	background: var(--bg1);
}

@media (max-width: 30em) {
	body > nav li:first-of-type {
		display: none;
	}
	body > nav  {
		font-size: .75em;
		font-size: clamp(.75em, 3.5vw, 1em);
	}
}






/* *********************************************
***********************************************
* De Nieuws Pagina
Met een overzicht van nieuws
***********************************************
********************************************* */

.nieuws,
.projecten {
	position: relative;
}
.nieuws h1,
.projecten h1 {
	position: absolute;
	margin-top: -1.414em !important;
	mix-blend-mode: soft-light;
}

.nieuws ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2em;
}

.nieuws li {
	margin: 0;
	position: relative;
}
.nieuws a {
	color: var(--text-color);
	transition: .3s;
}
.nieuws a:hover {
	text-decoration-color: hsl(0,0%,0%,0);
}
.nieuws a::before {
	content: '';
	position: absolute;
	top: -1em;
	left: -1em;
	right: -1em;
	bottom: -1em;
	background: white;
	opacity: 0;
}
.nieuws a:hover::before {
	background: color-mix(in HSL, #34c9eb 20%, white);
	background: var(--bg2);
	opacity: .2;
}


details {
	margin: 1em 0;
	max-height: 4em;
	transition: 1s;
}
details[open] {
	max-height: 100rem;
}
summary {
	cursor: pointer;
	font-style: italic;
	text-decoration: underline;
	text-decoration-style: dotted;
}
summary:hover {
	color: var(--bg2);
}
summary:focus-visible {
	color: var(--bg2);
	outline: .1em solid var(--bg1);
	outline-offset: .4em;
}
[open] summary {
	text-decoration-style: dashed;
}
summary::marker {
	content: '';
}
summary::before {
	content: "☞";
	margin-right: .25em;
	display: inline-block;
	transition: .2s;
}
[open] summary::before {
	transform: rotate(90deg);
}
details[open] summary ~ * {
	opacity: 0;
  animation: sweep .2s ease-in-out forwards;
}
details[open] summary ~ *:nth-child(3) {
	animation-delay: .2s;
}
details[open] summary ~ *:nth-child(n + 4) {
	animation-delay: .4s;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-1rem);}
  100%  {opacity: 1; transform: translateX(0);}
}