a
{
	text-decoration: none;
	color: darkred;
}

.verhalenlijst
{
	margin-left: auto; margin-right: auto;
	width: 75%;
	list-style-type: none;
	color: darkred;
	font-family: Georgia, serif;
	font-variant: small-caps;
	text-align: center;
}
.verhalenlijst button
{
	color: darkred;
	background-color: #EDDB9B;
	width:100%; height:100%;
	text-decoration: none;
	font-size: 150%;
	
	font-family: Georgia, serif;
	font-variant: small-caps;
	text-align: center;
	
	margin: 0.5px;
	padding: 2px;
	border: 2px solid darkred;		
	border-style: inset;
	border-radius: 5px;
}
.verhalenlijst button:hover
{
	background-color: rgba(0,0,0,0.02);
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.panel
{
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
	padding: 15px;
	border-radius: 15px;
}

.pagination
{
	position:fixed;
}
.pagination a.active 
{
  background-color: #4CAF50;
  color: white;
  
}

.pagination a:hover:not(.active) 
{
	background-color: #ddd;
}

.chapter_active 
{
	color: black;
}

.active, .accordion:hover 
{
	background-color: rgba(255,255,255,0.2);
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.vet
{
	font-weight: bold; font-style: normal;
}


.Beschrijving
{
	font-style: italic; 
}

.Teaser
{
	font-family: Courier New, Monospace; font-style: normal;
}

video
{
	max-width: 75%;
	padding: 2px;
	margin-left: auto; margin-right: auto;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

 
.centerImage
{
	max-width:75%; 
	display: block;
	margin-left: auto; margin-right: auto;
	border-radius: 25px; box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
	border: 2px inset darkgoldenrod; padding: 10px;
}


	.pagebreak
	{
		display: block;
		width: 50px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		padding: 5px;
		border: 1px solid darkgoldenrod;
	}
/* Slides CSS */

* {
  box-sizing: border-box;
}

.slideshow-container 
{
	position: relative;
	max-width: 100vh;
	margin: auto;
  
}
.slide
{
	max-width: 500px; 
	border-radius: 25px; 
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
	border: 2px solid darkgoldenrod;
	display: flex;
	justify-content: center;
	position: relative;
	left: 50%; /* Move the left edge to the middle of the screen */
	transform: translateX(-50%); /* Shift the element back by half its width */
	padding: 10px;
	margin-bottom: 15px;
}

.slideAffiche {
  display: none;
  animation: fade 1s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
	
}

.slideNav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: darkred;
 
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next, .nextNew {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/* Container for image text */
.caption {
	text-align: center;
	background-color: #EDDB9B;
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
	padding: 4px 16px;
	color: black;
	border-radius: 5px; 
	border: inset 2px darkred;
	font-style: normal; font-weight: bold;
	width: fit-content;
	display: flex;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 5px;
}

.thumbnail-container {
  text-align: center;
  padding: 10px;
}

.demo, .dots{
	cursor: pointer;
	opacity: 0.6;
	margin: 0 2px;
	height: 50px;
	border: 2px solid darkgoldenrod;
	padding: 5px; 
	border-radius: 5px;
	box-shadow: inset 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.dots.activeSlide {
  opacity: 1;
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.dots:hover {
  opacity: 0.8;
}

/*Scrollbar*/
	/* Make the container take up the full viewport */
	#page-container 
	{
	  height: 100vh;
	  width: 100%;
	  overflow: auto; /* Enable scrolling */
	}


	/* Hide the scrollbar track */
	#page-container .simplebar-scrollbar::before {
	  opacity: 0 !important;
	}

	/* Optional: Style the scrollbar thumb */
	#page-container .simplebar-scrollbar {
	  width: 5px;
	}

	.scroll-button {
	  position: fixed;
	  right: 15px;
	  background: #EDDB9B;
	  color: darkred;
	  width: 30px;
	  height: 30px;
	  cursor: pointer;
	  z-index: 1000;
	  border-radius: 50%;
	  border: 2px solid darkred;
	}

	.scroll-button.hidden {
	  display: none;
	}

	.scroll-button:first-of-type {
	  top: 20px;
	}

	.scroll-button:last-of-type {
	  bottom: 20px;
	}


/*UI + font size*/

select
{
	border: inset 1px darkred;
	border-radius: 5px;
	background-color: transparent;
	box-shadow: inset 2px 1px 4px 0 rgba(0, 0, 0, 0.3);
	margin: 2px;
	text-align: center;
}

#ui
{
	border-bottom: inset 1px darkred;
	border-radius: 5px;
	text-align: center;
	padding-bottom: 5px;
}

.font-size-controls 
{

	position: relative;
	justify-content: center;
    z-index: 10;
    display: flex;
    gap: 5px;
	right: 0;
	margin-top: 5px;
}

.font-size-controls button {
	font-family: monospace;
	color: darkgoldenrod;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
    font-size: 16px;
    width: fit-content;
    height: 30px;
    border: 1px solid darkgoldenrod;
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.font-size-controls button:hover {
    background: rgba(218, 165, 32, 0.3);
}

@media (max-width: 508px)
{
	.slideNav {
		display:none;
	}
	.scroll-button 
	{
		display: none;
	}
	h1
	{
		display: block;
		color: darkred;
		text-align: left;
		padding: 10px;
		text-decoration: none;
		width: auto;
		border: 2px solid darkred;
		border-style: inset;
		border-radius: 5px;
		font-variant: small-caps;
		
		font-size: 175%;
		margin-top: 1%;
	}
	
	body
	{
		color: black;
		font-family: Georgia, serif;
		margin: auto;
		border: none;
		text-align: left;
		font-size: medium;
	}

	h2
	{
		color: darkred;
		text-align: right;
		font-variant: small-caps;

		font-size: 75%;
		margin-top: 3%;
		margin-bottom: 1%;
	}

	h3
	{	
		color: darkred;
		text-align: center;
		font-variant: small-caps;

	}
	
	.auteur
	{
		font-size: 50%;
	}

	.accordion 
	{
		font-family: Georgia, serif;
		display: block;
		color: darkred;
		text-align: left;
		padding: 10px;
		text-decoration: none;
		width: 100%;
		border: 2px solid darkred;
		border-style: inset;
		border-radius: 15px;
		font-variant: small-caps;
		background-color: #EDDB9B;
		font-size: 175%;
		margin-top: 1%;
		margin-bottom: 2.5%;
		
		transition: 0.4s;
	}

	.panel 
	{
		color: black;

		font-family: Georgia, serif;
		margin: auto;
		border: none;
		/*padding-top: 15px;
		background-color: #EDDB9B;*/
		
		display: none;
		overflow: hidden;
	}
		

	.home_image
	{
		display: block;
		position: fixed;
		width: auto;
		height: 30px;
		left: 75%;
		top: 87.5%;
		opacity: 0.5;
	}
	.home_image a:hover
	{
		opacity: 1;
	}
	
	.slide
	{
		width: 100%; 
	}
	
	.scroll-button 
	{
	  right:0;
	}
}

@media (min-width: 508px)
{
	h1
	{
		display: block;
		color: darkred;
		text-align: left;
		padding: 10px;
		text-decoration: none;
		width: auto;
		border: 2px solid darkred;
		border-style: inset;
		border-radius: 15px;
		font-variant: small-caps;
		
		font-size: 300%;
		margin-top: 1%;
	}
	html, body
	{
		color: black;
		font-family: Georgia, serif;
		margin: auto;
		border: none;
		text-align: left;
		padding: 0px 25px;
		overflow: hidden; /* Prevent double scrollbars */
		height: 100%;

	}

	h2
	{
		color: darkred;
		text-align: right;
		font-variant: small-caps;
		margin-top:15px;
		margin-bottom: 2%;
		font-size: 150%;
	}

	.auteur
	{
		font-size: 50%;
		align-content: right;
		right: 0;
		position: relative;
		display: flex;
	}

	h3
	{	
		color: darkred;
		text-align: center;
		font-variant: small-caps;

	}

	.accordion 
	{
		font-family: Georgia, serif;
		display: block;
		color: darkred;
		text-align: left;
		padding: 10px;
		text-decoration: none;
		width: 100%;
		border: 2px solid darkred;
		border-style: inset;
		border-radius: 15px;
		font-variant: small-caps;
		background-color: #EDDB9B;
		margin-top: 1%;
		margin-bottom: 2.5%;
		font-size: 275%;
		
		transition: 0.4s;
	}
	

	.panel 
	{
		color: black;
		font-family: Georgia, serif;
		margin: auto;
		border: none;
		/*padding-top: 15px;
		background-color: #EDDB9B;*/
		display: none;
		overflow: hidden;
		border-radius:15px;
	}

	
	.home_image
	{
		display: block;
		position: fixed;
		width: auto;
		height: 30px;
		left: 85%;
		top: 85%;
		opacity: 0.5;
	}
	.home_image:hover
	{
		opacity: 1;
	}
	
}