@import url('https://fonts.cdnfonts.com/css/made-goodtime-grotesk');
@import url('https://fonts.cdnfonts.com/css/bridga-goldeni');
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');
:root{
  --header-height-desktop: 64px;
  --header-height-mobile: 56px;
  --color-text-light: #0E1926;
  --color-text-dark: #F0EAD4;
  --accent: #f43153;
}
html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* voor iOS */
}
body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {  font-family: 'Rufina', serif; font-size: 1.2rem; margin: 0; padding: 20px; line-height: 1.5; }
article{max-width: 800px; margin: 0 auto 6rem;}
img{width: 100%; height:auto;}
h1,h2,h5{
  font-family: 'Bridga Goldeni', sans-serif;margin-bottom: 0px;
}
/* .titel{
  margin-bottom: -1.3rem;
} */
/* THEMA */
@media (prefers-color-scheme: light) {
  body.colour {
	color: var(--color-text-light);
	background-color: #F0EAD4;
  }
  header {
	background: rgba(255,255,255,0.85);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  header .twien a {
	color: var(--color-text-light);
	text-shadow: 1px 1px 3px var(--accent);
  }
  bold, b{
	font-weight:700;
	text-shadow: 0.5px 0.5px 0.5px var(--color-text-light);
	letter-spacing: 0.02em; /* iets meer ruimte tussen letters */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
  }
}

@media (prefers-color-scheme: dark) {
  body.colour {
	color: var(--color-text-dark);
	background: #151e28;
  }
  header {
	background: #0E1926;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  header .twien a {
	color: rgba(240,234,212,0.95);
	text-shadow: 1px 1px 3px var(--accent);
  }
  bold, b{
	font-weight:700;
	text-shadow: 0.5px 0.5px 0.5px var(--color-text-dark);
	letter-spacing: 0.02em; /* iets meer ruimte tussen letters */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
  }
}
body a:link:not(header a):not(.twien a):not(.twiennl):not(.donation):not(.navigation a),
body a:visited:not(header a):not(.twien a):not(.twiennl):not(.donation):not(.navigation a),
body a:focus:not(header a):not(.twien a):not(.twiennl):not(.donation):not(.navigation a),
body a:active:not(header a):not(.twien a):not(.twiennl):not(.donation):not(.navigation a) {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: var(--accent, #f43153) !important;
  text-underline-offset: 0.1em;
}
/* Hover effect — subtiel, zonder kleurverandering */
body a:hover:not(header a):not(.twien):not(.twiennl a):not(.donation):not(.navigation a) {
  color: inherit !important;
  text-decoration: none !important;
}
.date{
	text-align: left;
	font-size: 0.85rem;
	margin:0.3em 0 0 0;
	padding: 0;
	text-align: right;
}
br{
	content: "A" !important;
	display: block !important;
	margin-bottom: 1.5em !important;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:2em auto 4em;
  width:100%;
}
a.twiennl {
  font-family: 'MADE GoodTime Grotesk', sans-serif;
  font-size: 1.2rem;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  color: inherit;
}
a.twiennl:hover {
  color:var(--accent);
}
a.donation {
  font-family: monospace;
  font-size: 0.85em;
  font-weight: bold;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  margin-left: 0.5em;
  text-align: center;
  
  background-color: var(--accent);
  color: var(--color-text-dark);
}
a.donation:hover {
  background-color: var(--accent);
  color: var(--color-text-dark);
  
  color: var(--accent);
 background-color: var(--color-text-light);
  border: 1px solid var(--accent);
}
.navigation {
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 0em;
}
.navigation a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin: 0 0.8em;
}
.navigation a:hover{
  border-bottom: 1px solid var(--accent);
}
.navigation i {
  margin-right: 0.5rem;
}