@font-face { font-family: kopFont; src: url(../f/Aloevera.ttf); }
@font-face { font-family: txtFont; src: url(../f/GapSansBold.ttf); }
@font-face { font-family: h4-Font; src: url(../f/SeventyFlares.ttf); }
@font-face { font-family: lnkFont; src: url(../f/round-digitalio.ttf); }

/*
Teko-Light.ttf
Gardener.otf
round-digitalio.ttf
Nestocopper42.ttf
GapSansBold.ttf
*/
a { 
	font-family: lnkFont; text-shadow: 5px 5px 7px red; }
a:link, a:visited {
	color: yellow; text-decoration: underline; cursor: crosshair; }
a:link:active, a:visited:active
	{ color: white; cursor:auto; }
a:hover {
	cursor:pointer; color:white; font-weight: bold; }
a.sel {
	font-variant-caps: small-caps}
td	{ 
	color:yellow; text-shadow: 5px 5px 7px red; 
	padding: 0px; }
td.vldnm { 
	text-align:right; vertical-align: text-top; 
	font-size:0.6em; font-family: h4-Font;	}
td.tagline {
	font-family: h4-Font; font-size: 0.7em; font-variant:small-caps; font-style:italic;
	color: yellow; text-shadow:5px 5px 7px black; 
	background-image: url('../index.jpg'); background-size:100%;}
td.ia_subj {
	font-family: lnkFont; font-size: 0.6em; font-weight:bold;}
td.ia_descr {
	font-family: txtFont; font-size: 0.6em; font-weight:bold;}
	
hr {
	height: 5px; margin-bottom: 5px;	
	border-style: ridge; border-width: 4px; border-radius: 5px 1px 8px 1px;
	color: yellow; background-color: orangered;
	filter: drop-shadow(8px 8px 10px purple);
}

h4 {
	text-align: center; color:black; font-family: 'h4-Font'; font-size:1.0em;
	margin:2px; text-shadow: 2px 1px gold;
	padding: 10px 10px 20px 10px;
	border: 5px double silver; border-radius: 25px;
	backdrop-filter: invert(23) hue-rotate(1.142rad); 
	filter: drop-shadow(5px 2px 3px) hue-rotate(-1.23rad);
	box-shadow: 5px 5px 3px yellow;
}

body {
	width: 100%; margin: 0px;
	font-family: txtFont; color:#FFFF0088; font-size: 48px;	
	background-image: none; background-color:black;
	overflow-x: clip;
	overflow-y: auto;
/*	background-attachment: fixed;
	background-size: 100%;*/
}
iframe {
	margin: 0; 
/*	
	margin-top: 5px; 
	border-style: none; 
	border-width: 5; 
	border-color: black;
 */
}
pre { color: yellow;}

a.uitz {
	font-family: lnkFont;
	font-size: 1.4em;
	font-weight: normal;
	text-shadow: 5px 5px 7px black;
	backdrop-filter: hue-rotate(3rad); 
}
a.uitz:hover { cursor:pointer; color:white; font-style:italic; font-weight:bolder; }

.calrij {
	font-size: 0.4em;
	padding: 2px 4px;
}
.tcel {
	font-size: 0.9em;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	background-color: aqua;
}
.tcel:hover {
	scale: 1.5;
	background-color: silver;
}
audio.raudio {
	width: 120px;
	height: 25px;
}
.container {
	width: 400px;
	border: 2px solid black;
	padding: 15px;
}
.meelvorm {
	display: none;
}


/* hieronder voor slideshow */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
 border-spacing: 0px;
}
/*
 max-height: 600px;
 Hide the images by default */
.mySlides {
 display: none;
}
/* 
 text-align: center;
 position: absolute;
 width: auto;
 top: 16px;
 margin-top: -16px;
	Next & previous buttons */
.prev, .next, .fulls, .playpause, .nummertxt, .listknop {
 padding: 3px;
 cursor: pointer;
 color: white;
 font-family: fantasy;
 font-weight: bold;
 font-size: 0.6em;
 vertical-align: top;
 transition: 1.0s ease;
 border-radius: 3px;
 user-select: none;
}
/* 
 height: 50%;
	Position the "next button" to the right
.next {
 right: 0px;
 border-radius: 3px 0 0 3px;
}
.fulls {
	left: 40px;
}
.playpause {
	left: 80px;
}
.listknop {
	right: 80px;
}
	right:40px;
 */
.nummertxt {
	font-size: 0.3em;
	vertical-align: middle;
	font-family: kopFont;
	cursor: default;
	color: gold;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover, .fulls:hover, .playpause:hover, .listknop:hover, .tcel:hover {
 background-color: rgba(250,250,10,0.8);
}
/* Caption text */
.text, .titel {
 color: yellow;
 /*#f2f2f2;*/
 text-shadow: 2px 5px 7px pink;
 font-size: 15px;
 padding: 10px 12px;
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: -15px;
}
.titel {
	display: none;
}
.koptitel {
 color: yellow;
 text-shadow: 2px 5px 7px purple;
 font-family: kopFont;
 font-size: 0.4em;
 padding: 1px;
 width: 100%;
 text-align: center;
}
/* The dots/bullets/indicators */
.dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}
.active, .dot:hover {
 background-color: #717171;
}
/* Fading animation */
.fade {
 animation-name: fade;
 animation-duration: 1.5s;
}
@keyframes fade {
 from {opacity: .4}
 to {opacity: 1}
}
/* end of slideshow code
	color: darkviolet;
 */
.knop {
	cursor: pointer;
}
.knop:hover {
	scale: 1.2;
	background-color: silver;
}