/* update 3-1-2025 15:44 */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{

	--white: 		hsl(0,   0%,   100%);
	--black:		hsl(0,   0%,   0%);
	--light-grey: 	hsl(0,   0%,   90%);

	--red: 			hsl(0,   90%,  50%);
	--orange: 		hsl(30,   90%,  50%);
	--yellow: 		hsl(50,  90%,  50%);
	--green: 		hsl(150, 76%, 38%);
	--blue: 		hsl(200, 90%, 50%);

	--light-blue: 	hsl(200, 94%,  94%);
	--dark-blue:	hsl(200, 100%, 13%);
	
	--shadow-size-m:		0.25rem;	
	--shadow-size-s:		calc(var(--shadow-size-m) * 0.5);
	--shadow-size-l:		calc(var(--shadow-size-m) * 2);

	--page-bg-color:		var(--light-grey);
	--bg-color:				var(--white);
	--text-color:			var(--dark-blue);
	--border-color:			var(--dark-blue);
	--shadow-color:			var(--dark-blue);
	--hover-color:			var(--red);

	--element-bg-color: 	var(--bg-color);
	--element-text-color: 	var(--text-color);
	--element-border-color: var(--border-color);
	--element-shadow-color: var(--shadow-color);
	--element-hover-color: 	var(--hover-color);

	/* @media (prefers-color-scheme: dark) {
		--page-bg-color:	var(--black);
		--bg-color:			var(--dark-blue);
		--text-color:		var(--light-grey);
		--border-color:		var(--white);
		--shadow-color:		var(--white);
		--hover-color:		var(--light-blue);

		.dark{
			--element-bg-color: inherit;
			--element-text-color: inherit;
			--element-border-color: inherit;
			--element-shadow-color: inherit;
			--element-hover-border-color: inherit;
		}
	} */
}

html, body {
	position: relative;
	font-size:16px;
	font-family: "Inter", serif;
	color:var(--text-color);
	background: var(--page-bg-color);
    height: 100vh;
	width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
	flex-direction: column;
	line-height:1.5;
	z-index:0;
	overflow:hidden;
	scroll-behavior: smooth;
	word-break: normal;
	hyphens: auto; 
	-webkit-hyphens: auto;
	-moz-hyphens: auto; 
}

body{
	overflow-x: hidden;
	overflow-y: scroll;
}

main{
	width: min(100%, 48rem);
	padding-inline: 1rem;
	z-index:10;
}

.yellow {
	--element-bg-color: var(--yellow);
	--element-text-color: var(--yellow);
	--element-border-color: var(--yellow);
	--element-shadow-color: var(--yellow);
	--element-hover-color: var(--yellow);
}

.orange {
	--element-bg-color: var(--orange);
	--element-text-color: var(--orange);
	--element-border-color: var(--orange);
	--element-shadow-color: var(--orange);
	--element-hover-color: var(--orange);
}

.red {
	--element-bg-color: var(--red);
	--element-text-color: var(--red);
	--element-border-color: var(--red);
	--element-shadow-color: var(--red);
	--element-hover-color: var(--red);
}

.green {
	--element-bg-color: var(--green);
	--element-text-color: var(--green);
	--element-border-color: var(--green);
	--element-shadow-color: var(--green);
	--element-hover-color: var(--green);
}

.blue {
	--element-bg-color: var(--blue);
	--element-text-color: var(--blue);
	--element-border-color: var(--blue);
	--element-shadow-color: var(--blue);
	--element-hover-color: var(--blue);
}

.dark{
	--element-bg-color: var(--dark-blue);
	--element-text-color: var(--dark-blue);
	--element-border-color: var(--dark-blue);
	--element-shadow-color: var(--dark-blue);
	--element-hover-border-color: var(--dark-blue);
}

.center{
	display:flex;
	justify-content: center;
	z-index:0;
}

nav, 
footer{
	position: absolute;
	width:100%;
	height:6rem;
	z-index:100;
	background-color: transparent;
	transition: 
		background-color 200ms ease,
		height 200ms ease;

	.content{
		display:flex;
		padding-inline:3rem;
		justify-content: space-between;
		align-items: center;
	}
}

nav .logo svg,
footer .logo svg{
	padding:1.5rem 3rem;
	margin:-1.5rem -3rem;
	fill: var(--text-color);
	rotate:0deg;
	transform-origin: 50% 46.5%;
	transition: 
		fill 0.3s ease,
		rotate 0.3s ease-in;
}

nav .logo svg:hover,
footer .logo svg:hover {
	fill: var(--hover-color);
	rotate:180deg;
}

nav ul,
footer ul{
	display:flex;
	flex-direction: row;
	align-items: center;
	gap:2rem;

	a{
		text-decoration: none;
		text-transform: uppercase;
	}
}

nav .hamburger{
	display: none;
}

.post-navigation {
    height:auto;
	margin-top: 4rem;
}

.post-navigation .cards {
    display: flex;
	flex-direction: row;
    gap: 1rem;
}

.post-navigation .card {
    flex-direction: column;
	position:relative;
}

.vorig::after{
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	content:'vorig artikel';
    color: var(--text-color);
	background-color: var(--blue);
	font-size:0.75rem;
	font-weight:800;
	text-transform: uppercase;
	padding:0.25rem 0.75rem;
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);
}

.volgend::after{
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	content:'volgend artikel';
    color: var(--text-color);
	background-color: var(--blue);
	font-size:0.75rem;
	font-weight:800;
	text-transform: uppercase;
	padding:0.25rem 0.75rem;
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);
}

.post-navigation .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-navigation .card-content {
    padding: 1.5rem;
    flex-grow: 1;
}

.post-navigation h3 {
	margin-top: 0;
}

.post-navigation .nav-label {
	margin-top:1rem;
	margin-bottom: 0;
}

.nav-label {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.repo-bar {
	padding: 2rem;
	text-align: center;
}
.repo-bar a {
	font-size:0.75rem;
	opacity:0.25;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: opacity 200ms ease;
}
.repo-bar a:hover {
	opacity:1;
}
.github-icon {
	display: inline-block;
}

header {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: -2;
	margin:0 auto;
	padding-inline:1rem;
}

header .header-img {
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		height: 120vh;
		object-fit: cover;
		opacity:0.5;
		overflow-x:hidden;
		-webkit-user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		pointer-events: none;
		z-index:0;		
	}

header .header-gradient{
	position:absolute;
	top: 80vh;
	height:45vh;
	width:100vw;
	background: linear-gradient(
		180deg, 
		transparent 0%, 
		var(--page-bg-color) 90%
	);
}

header .header-content {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	gap:2rem;
	position: relative;
	max-width:80rem;
	z-index: 10;
	padding-block:10rem;
}

header .subtitle{
	font-size:1rem;
}

header .headline {
	color: var(--text-color);
	max-width:45rem;
	margin-top:4rem;
	font-size:1.5rem;
	font-style: italic;
	opacity: 0.75;
}

footer{
	position:static;
	width: min(100%, 40rem);
	padding-block:4rem;
}

footer .content{
	padding-inline: 0;
}

footer .logo{
	padding:4rem 3rem 1.5rem;
	margin:-3rem -3rem -1.5rem;
	transform-origin:50% 62%;
}

article{
	width: min(100%, 40rem);
	background-color: var(--bg-color);
	box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);
    border: 0.125rem solid var(--border-color);
	padding:4rem;
	margin-block:2rem;
}

article h2{
	padding-inline:0;
}

article .in-between{
	background-color:transparent;
	box-shadow:0 0 0 transparent;
	margin-block:-2rem -4rem;
}

article ul,ol{
	padding-bottom:1rem;
}

article ul{
	list-style: none;
}
  
article ul > li {
	display: table-row;
}
		
article ul > li::before {
	display: table-cell;
	text-align: right;
	content: "↳";
	font-size: 1rem;
	color:var(--text-color);
	font-weight: 700;
	padding-inline: 0.5rem;
	/* transition: all 200ms ease; */
}  

article ol {
	counter-reset: ordered-list;
}	

article ol li {
	position: relative;
	z-index: 1;
	font-size: 1rem;
	counter-increment: ordered-list;
	padding-left: 1.75rem;
	cursor: pointer;
	backface-visibility: hidden;
}
	
article ol li::before {
	content: counter(ordered-list);
	position: absolute;
	z-index: 2;
	top: 0.15rem;
	left: 0.1rem;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.25;
	font-weight:700;
	background-color: var(--text-color);
	color: var(--bg-color);
	border-radius: 1rem;
	text-align: center;
}

article figure{
	padding-bottom:0.5rem;
	box-sizing:border-box;
	margin:0 auto;
	width:100%;
	cursor: pointer;
	border: 0.125rem solid transparent;
	transition:
		box-shadow 200ms ease,
		transform 200ms ease,
		border-color 200ms ease;
}

article figure:hover{
	border: 0.125rem solid var(--element-border-color);
	box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--element-shadow-color);
	transform: translateY(calc( var(--shadow-size-s) - var(--shadow-size-m)));
	cursor: pointer;
	min-width:7.5rem;
}

article	img,
article video {
	width:100%;
	/* border-radius: 0.5rem; */
	box-sizing:border-box;
	position: relative;
	display: inline-block;
	/* border: 0.125rem solid transparent; */
	transition: 
		background-color 200ms ease,
		border-color 200ms ease,
		box-shadow 100ms ease,
		transform 100ms ease;
}

article figcaption{
	font-size:0.75rem;
	font-style: italic;
	opacity:0.8;
	padding: 0.25rem 0.25rem 0;
}

.half-width{
	width:50%;
	margin: 0 auto;
}

blockquote{
	position:relative;
	background-color: var(--page-bg-color);
    border: 0.125rem solid var(--border-color);
	border-top:0.375rem solid var(--border-color);
	border-left:0.375rem solid var(--border-color);
	font-size:1rem;
	box-sizing:border-box;
	outline: none;
	appearance: none;		
	text-decoration: none;
	
	/* border-radius:1rem; */

	/* max-width:45rem; */
	margin-block:1rem;
	font-style: italic;
	padding:1rem;
	padding-bottom:2rem;
}

blockquote::before,
.quote::before{
	position:absolute;
	display: block;
	font-size: 4rem;
	font-weight: 700;
	content:'”';
	top:-1.6rem;
	left:0;
}

blockquote::after {
	position:absolute;
	display: block;
	font-size: 4rem;
	font-weight: 700;
	content:'„';
	bottom:-1rem;
	right:.5rem;
}

blockquote.small::after {
    transition: all 200ms ease;
    content: attr(big-text);
    display: block;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
	position: absolute;
    bottom: -0.9rem;
    right: 0.8rem;
	z-index: 3;
}

blockquote.small::before {
    font-size: 0rem;
    top: -1.5rem;
}

.blur{
	filter:blur(0.5rem);
}

b,strong{
	font-weight:700;
}

i,em{
	font-style: italic;
}

s{
	text-decoration: line-through;
}

u{
	text-decoration: underline;
}

h1,h2,h3,h4,h5,h6{
	text-transform: capitalize;
	font-weight:700;
}

.reset-button{
	display:none;
}

h1{
	color:var(--text-color);
	font-weight:700;
    font-size: 6rem; /* Fallback for older browsers */
	font-size:clamp(4rem, 8vw, 6rem);
	max-width: 100%;
	line-height:1.1;
	text-shadow: var(--shadow-size-s) var(--shadow-size-s) var(--element-bg-color);
	z-index:10;
	word-break: break-word;
    overflow-wrap: break-word;
}

.subtitle{
	font-size:0.75rem;
	opacity:0.75;
}

.direct-subtitle{
	opacity:0.75;
	font-style: italic;
	margin-top: -1rem;
}

h2{
	font-size:2rem;
	margin-block:1rem;
	line-height:1.2;
}

h3{
	margin-top:1rem;
	font-size:1.5rem;
	font-weight:700;
	line-height:1.4;
}

h4{
	margin-top:1rem;
	font-weight: 800;
	text-transform: uppercase;
	font-size:0.75rem;
}

h5{
    display: flex;
    align-items: center;
    text-align: center;
	text-transform: uppercase;
	letter-spacing:.25rem;
	margin-bottom:1rem;
	font-weight:400;
	font-size:0.75rem;
}

h5::before,
h5::after {
    content: "";
    flex: 1;
    border-bottom: 0.075rem solid var(--text-color);
}

h5::before {
    margin-right: 1rem;
}

h5::after {
    margin-left: 0.5rem;
}

p{
	font-weight:400;
	font-size:1rem;

	+ p{
		margin-top:1rem;
	}

	+ h2 {
		margin-top:1rem;
	}

	+ figure {
		margin-bottom:1rem;
	}
}
	
.no-top-spacing{
	margin-top:0;
}

a {
	color: var(--text-color);
	text-decoration: underline;
	cursor:pointer;
	font-weight: 700;
	transition: 
		fill 0.3s ease,
		color 0.3s ease;
}
  
a:hover {
	color: var(--hover-color);
}

.disabled{
	opacity:0.5;
	cursor:default;
}

.disabled:hover{
	color:inherit;
}

.opening{
	font-weight:700;
}

.detail{
	font-style: italic;
	opacity:0.75;
	font-size:0.75rem;
}

.centered{
	display: flex;
	justify-content: center;
	margin-block:2rem;
	gap:1rem;
}

.buttons{
	display: flex;
	gap:1rem;
	padding-top:2rem;
}

button,
.chip {
	
    font: inherit;
    color: inherit;
    outline: none;
	text-decoration: none;
    appearance: none;
	box-sizing:border-box;
    cursor: pointer;
    user-select: none;

    padding: 0.5rem 1rem;
	font-size:1rem;
	font-weight:800;
	text-transform: uppercase;
    
    transition:
		background-color 200ms ease,
		border-color 200ms ease,
		box-shadow 100ms ease,
		transform 100ms ease;
}

button{
	min-width:7.5rem;		
	background-color: var(--element-bg-color);
    color: var(--text-color);
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);
	transition: 
		background-color 200ms ease,
		color 200ms ease,
		border 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;

	&:hover{
		background-color: var(--element-bg-color);
		box-shadow: var(--shadow-size-s) var(--shadow-size-s) 0 var(--shadow-color);
		transform: translateY(calc( var(--shadow-size-m) - var(--shadow-size-s)));
	}
	
	&:active{
		box-shadow: 0 0;
		transform: translateY(var(--shadow-size-m));
	}

	&.secondary{
		background-color: transparent;
		color:var(--element-text-color);
		border-color: var(--element-border-color);
		box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--element-shadow-color);

		&:hover{
			background-color: transparent;
			color:var(--element-text-color);
			border-color: var(--element-border-color);
			box-shadow: var(--shadow-size-s) var(--shadow-size-s) 0 var(--element-shadow-color);
			transform: translateY(calc( var(--shadow-size-m) - var(--shadow-size-s)));
		}
	
		&:active{
			box-shadow: 0 0;
			transform: translateY(var(--shadow-size-m));
		}
	}

	&.ghost{
		color:var(--element-text-color);
		background-color: transparent;
		border-color: transparent;
		box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 transparent;
		min-width:auto;

		&:hover{
			color:var(--text-color);
			border-color: var(--border-color);
			background-color: var(--element-bg-color);
			box-shadow: var(--shadow-size-s) var(--shadow-size-s) 0 var(--shadow-color);
			transform: translateY(calc( var(--shadow-size-m) - var(--shadow-size-s)));
		}
	
		&:active{
			box-shadow: 0 0;
			transform: translateY(var(--shadow-size-m));
		}

	}
}

button.dark,
.chip.dark{
	background-color: var(--element-bg-color);
	color:var(--white);

	&.secondary,
	&.ghost{
		background-color: transparent;
		color:var(--element-text-color);
	}
}

.chip.dark:hover{
	color:var(--white);
}

button:disabled{
	opacity:0.5;
	cursor:default;
	box-shadow: 0 0;

	&:hover{
		background-color:initial;
		border-color: initial;
		box-shadow: initial;
	}

	&:active{
		box-shadow: initial;
		transform: initial;
	}
}

.chips{
	display: flex;
	gap:1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.chip{

	background-color: var(--element-bg-color);
    color: var (--text-color);
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);

	font-size:0.75rem;
	padding:0.25rem 0.75rem;
	width:inherit;
	height:inherit;
	transition: 
		background-color 200ms ease,
		color 200ms ease,
		border 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;

	&:hover{
		box-shadow: var(--shadow-size-s) var(--shadow-size-s) 0 var(--shadow-color);
		transform: translateY(calc( var(--shadow-size-m) - var(--shadow-size-s)));
		color:var(--text-color);
	}

	&:active{
		box-shadow: 0 0;
		transform: translateY(var(--shadow-size-m));
	}
}
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox input[type=checkbox] {
      --active: var(--dark-blue);
      --active-inner: var(--white);
      --focus: 2px var(--dark-blue);
      --border: var(--dark-blue);
      --border-hover: var(--dark-blue);
      --background: var(--white);
      --disabled: var(--bg-color);
      --disabled-inner: var(--bg-color);
	  appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      height: 21px;
      outline: none;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 2px solid var(--bc, var(--border));
      background: var(--b, var(--background));
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    .checkbox input[type=checkbox]:after {
      content: "";
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    .checkbox input[type=checkbox]:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-o: .3s;
      --d-t: .6s;
      --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }
    .checkbox input[type=checkbox]:disabled {
      --b: var(--disabled);
      cursor: not-allowed;
      opacity: 0.9;
    }
    .checkbox input[type=checkbox]:disabled:checked {
      --b: var(--disabled-inner);
      --bc: var(--border);
    }
    .checkbox input[type=checkbox]:disabled + label {
      cursor: not-allowed;
    }
    .checkbox input[type=checkbox]:hover:not(:checked):not(:disabled) {
      --bc: var(--border-hover);
    }
    .checkbox input[type=checkbox]:focus {
      box-shadow: 0 0 0 var(--focus);
    }
    .checkbox input[type=checkbox]:not(.switch) {
      width: 21px;
    }
    .checkbox input[type=checkbox]:not(.switch):after {
      opacity: var(--o, 0);
    }
    .checkbox input[type=checkbox]:not(.switch):checked {
      --o: 1;
    }
    .checkbox input[type=checkbox] + label {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 4px;
    }

    .checkbox input[type=checkbox]:not(.switch) {
      border-radius: 7px;
    }
    .checkbox input[type=checkbox]:not(.switch):after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 4px;
      transform: rotate(var(--r, 20deg));
    }
    .checkbox input[type=checkbox]:not(.switch):checked {
      --r: 43deg;
    }
  }

  .checkbox * {
    box-sizing: inherit;
  }
  .checkbox *:before,
  .checkbox *:after {
    box-sizing: inherit;
  }



@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)}
	to {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 6em;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--dark);
	background-color: hsla(200, 100%, 13%, 0.9);
	z-index:100;
}
	
.modal .modal-content {
	margin: auto;
	display: block;
	object-fit: contain;
	max-width: 80vw;
	max-height: 80vh;
}
	
.modal #caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 72em;
	text-align: center;
	color: #ccc;
	padding: 1em 0;
	height: 10em;
}

.modal .modal-content, 
.modal #caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

.modal .close {
	position: absolute;
	top: 1em;
	right: 1.5em;
	color: #f1f1f1;
	font-size: 2.5em;
	font-weight: bold;
	transition: 0.25s;
}
	
.modal .close:hover,
.modal .close:focus {
	color: var(--red);
	text-decoration: none;
	cursor: pointer;
}

.cards{
	width: min(100%, 48rem);
	display: flex;
	flex-direction: column;
	gap:2rem;
}

.card{
	background-color: var(--bg-color);
	color: var(--text-color);
    border: 0.125rem solid var(--border-color);
	box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);

	position:relative;
	box-sizing:border-box;
    outline: none;
    appearance: none;

	width:100%;

	text-decoration: none;
	overflow: hidden;
	display:flex;
	flex-direction: row;

    transition:
		background-color 200ms ease,
		box-shadow 200ms ease,
		transform 200ms ease;
	}
	
.card:hover{
	box-shadow: var(--shadow-size-s) var(--shadow-size-s) 0 var(--shadow-color);
	transform: translateY(calc( var(--shadow-size-m) - var(--shadow-size-s)));
	color:initial;
}
	
.card:active{
	box-shadow: 0 0;
	transform: translateY(var(--shadow-size-m));
}

.card h3 {
	margin-top:0;
	font-size:1.25rem;
	display: -webkit-box;       
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;     
	line-clamp: 3;     
	overflow: hidden;          
	text-overflow: ellipsis; 
}

.card.subtitle{
	opacity:1;
}

.card p{
	font-weight:400;
	display: -webkit-box;       
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;     
	line-clamp: 7;     
	overflow: hidden;          
	text-overflow: ellipsis; 
}

.card img{
		position:relative;
		width:18rem;
		height: auto;
		object-fit: cover;
		-webkit-user-drag: none;
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		pointer-events: none;
		z-index:0;
        transform-origin: center;
        transform: scale(1.01);
}

.card .card-content{
		padding:0.5rem 1rem 1rem;
		display: flex;
		flex-direction: column;
}

.card .chips{
	margin-top:1rem;
	justify-content: start;
	align-items: flex-start;
	gap:0.75rem 1rem;
}

.reverse{
	flex-direction: row-reverse;
}

.card-featured{
	position:relative;
	flex-direction: column;
}

.card-featured img{
	width:100%;
	max-height:20rem;
}

.card-featured::after{
	position:absolute;
	top:0.5rem;
	left:0.5rem;
	content:'uitgelicht';
    color: var(--text-color);
	background-color: var(--orange);
	font-size:0.75rem;
	font-weight:800;
	text-transform: uppercase;
	padding:0.25rem 0.75rem;
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);
}

.tags-content .chips{
	justify-content: flex-start;
}

table{
    border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
	width:100%;
	box-sizing: border-box;
	margin-bottom:1rem;
    border: 0.125rem solid var(--border-color);
    box-shadow: var(--shadow-size-m) var(--shadow-size-m) 0 var(--shadow-color);

	th{
		background-color: var(--element-text-color);
		color:var(--element-bg-color);
		font-weight:700;
	}

	table,
	th,
	td{
		text-align:left;
		padding:0.5rem;
	}

	tr:nth-child(even){
		background-color:var(--page-bg-color);
	}
}

.first-column{
	td:first-child {
		font-weight: 700;
	}
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	.checkbox input[type=checkbox] {
		--active: var(--blue-100);
		--active-inner: var(--white);
		--focus: 2px var(--blue-200);
		--border: var(--blue-025);
		--border-hover: #275EFE;
		--background: #fff;
		--disabled: #F6F8FF;
		--disabled-inner: #E1E6F9;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 21px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	}
	.checkbox input[type=checkbox]:after {
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}
	.checkbox input[type=checkbox]:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}
	.checkbox input[type=checkbox]:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: 0.9;
	}
	.checkbox input[type=checkbox]:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}
	.checkbox input[type=checkbox]:disabled + label {
		cursor: not-allowed;
	}
	.checkbox input[type=checkbox]:hover:not(:checked):not(:disabled) {
		--bc: var(--border-hover);
	}
	.checkbox input[type=checkbox]:focus {
		box-shadow: 0 0 0 var(--focus);
	}
	.checkbox input[type=checkbox]:not(.switch) {
		width: 21px;
	}
	.checkbox input[type=checkbox]:not(.switch):after {
		opacity: var(--o, 0);
	}
	.checkbox input[type=checkbox]:not(.switch):checked {
		--o: 1;
	}
	.checkbox input[type=checkbox] + label {
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		margin-left: 4px;
	}

	.checkbox input[type=checkbox]:not(.switch) {
		border-radius: 7px;
	}
	.checkbox input[type=checkbox]:not(.switch):after {
		width: 5px;
		height: 9px;
		border: 2px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 7px;
		top: 4px;
		transform: rotate(var(--r, 20deg));
	}
	.checkbox input[type=checkbox]:not(.switch):checked {
		--r: 43deg;
	}
}

	.checkbox * {
	box-sizing: inherit;
	}
	.checkbox *:before,
	.checkbox *:after {
	box-sizing: inherit;
	}

@media screen and (max-width:800px){
	h2{
		padding-inline:1rem;
	}	
}

@media screen and (max-width:767px){
	article{
		padding:1rem;
		width: calc(100% - 2.5rem);
	}

	.card{
		width: calc(100% - 0.25rem);
		flex-direction: column;

		img{
			width:100%;
			height:15rem;
		}
		h3 {
			-webkit-line-clamp: unset;     
			line-clamp:unset;   
		}
		p{
			-webkit-line-clamp: unset;     
			line-clamp: unset;     

		}
	}

	footer{
		.content{
			padding-inline:1rem;
		}
	}
	
	nav,footer{
		.content{
			padding-inline:1rem;
		}
	}

	.card-featured{
		img{
			height:20rem;
		}

		h3 {
			-webkit-line-clamp: unset;     
			line-clamp: unset;    
		}
	
		p{
			-webkit-line-clamp: unset;     
			line-clamp: unset;     
		}
	}

	h1{
		font-size: 3rem;
		text-shadow: 0 var(--shadow-size-s) 0 var(--blue-200);
	}

	h2{
		font-size:2rem;
	}

	.half-width{
		width:100%;
		margin: auto;
	}

	nav .links {
		visibility: hidden;
		opacity: 0;
		width:0;
		transition: 
			visibility 0ms, 
            opacity 200ms ease, 
            background-color 200ms ease,
			height 200ms ease;
	}

	nav .hamburger {
		display: block;
		cursor: pointer;
	}

	nav .hamburger.active .bar1 {
		transform: rotate(-45deg) translate(-3px, 7px);
	}

	nav .hamburger.active .bar2 {
		opacity: 0;
	}

	nav .hamburger.active .bar3 {
		transform: rotate(45deg) translate(-3px, -7px);
	}

	nav .hamburger .bar {
		width: 25px;
		height: 3px;
		background-color: var(--text-color);
		margin: 4px 0;
		transition: 0.4s;
	}

	nav .links.active {
		visibility: visible;
		opacity: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		background-color: var(--bg-color);
		position: absolute;
		top: 6rem;
		right: 0;
		width: 100%;
		padding: 1rem;
	}

	nav .links.active button {
		min-width: 7.5rem;
	}

	nav .links.active ul {
		flex-direction: column;
		align-items: flex-end;
	}

	nav .links.active ul li {
		margin-bottom: 1rem;
	}

	nav.active {
		background-color: var(--bg-color);
	}

	.post-navigation .cards {
		flex-direction: column;
	}
}