@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); }
:root {
	--auwid: 100px;
}
* {
	margin: 0;
	box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
	img.toplogo {
		width: 100px;
	}
	audio.raudio {
		--auwid: 75px;
	}
}

@media only screen and (min-width: 600px) {
	img.toplogo {
		width: 180px;
	}
	audio.raudio {
		--auwid: 250px;
	}
}
a	{ font-family: lnkFont;}
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; font-family: sans-serif ; text-shadow: 2px 5px 7px black; padding: 6px; }
td.vldnm { text-align:right; vertical-align: text-top; font-size:0.6em; font-family: h4-Font;	}
td.veld {text-align:left; vertical-align: text-top; font-size:0.6em; font-family: txtFont;}
td.centraal, div.centraal {font-family: h4-Font; text-align: center; 
	backdrop-filter: invert(80);
	background-blend-mode: lighten ;
	border: 13px ridge gold; border-radius: 5px;  
	border-image: url('patapoelogo.gif') 25 round;
}
td.ia_titel {font-family: kopFont; font-size: 1.1em; font-weight: 100;
		 	color:yellow; text-shadow:5px 5px 7px yellowgreen; }
td.ia_subj {font-family: lnkFont; font-size: 0.6em; font-weight:bold;}
td.ia_descr {font-family: txtFont; font-size: 0.9em; }
td.iarchtag {font-family: kopFont; font-size: 0.6em;
	color:black; letter-spacing:3px;  
	font-weight:bold; 
	backdrop-filter: invert(50) hue-rotate(1rad); 
	text-shadow: 3px 3px 3px violet;
}
div.iarchtag {font-family: kopFont; font-size: 0.6em;
	color:black; letter-spacing:3px;  
	font-weight:bold; 
	backdrop-filter: invert(50) hue-rotate(1rad); 
	text-shadow: 3px 3px 3px violet;
}
audio.raudio {
	width: var(--auwid);
	height: 30px;
	background-image: url('/patapoelogo.gif');
	background-size: cover;	
}
select.catselect {
	display: none;
}
.knop {
	cursor: pointer;
	transition: scale 0.3s ease;
}
.knop:hover {
	scale: 1.1;
/*	background-color: silver;*/
}

tr.track {
	background-size: cover; background-repeat:no-repeat; background-position: center; background-color: darkolivegreen; 
	font-size: 0.8em;}
hr {
  width: 33%;
  height: 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);
  margin-bottom: 50px;	
}

h4 {
	text-align: center; color:black; font-family: 'h4-Font'; font-size:1.5em;
	backdrop-filter: invert(23) hue-rotate(1.142rad); 
	text-shadow: 2px 1px gold;
	margin: 2px 25px 12px 2px;
	border: 5px double silver; border-radius: 25px;
	filter: drop-shadow(5px 2px 3px);
	padding: 10px 10px 10px 10px;
	box-shadow: 5px 5px 3px green;
}
h5.tagline  {
	font-family: h4-Font; font-size: 1.3em; font-variant:small-caps; font-style:italic;
	color: yellow; text-shadow:5px 5px 7px black;
	text-align: center;
	margin-top:2px;
	margin-bottom:2px;
	padding-left: 4px;
	padding-right:4px; 
	background-image: url('/index.jpg'); background-size:100%;
	width: 90%;
}

/*
	background-color: white;
	//width: 284px;
*/
body {
	width: 100%;
	/*
	background-image: url('koolmeeshouseone.gif');
	background-repeat: repeat;*/
	background-attachment: fixed;
	background-size: 100%;
	font-size: 15pt;	
}
iframe {
	border-style: none; 
/*	
	margin-bottom: 5px; 
	margin-top: 5px; 
	border-width: 5; 
	border-color: black;
filter: blur(6px);
 */
}
pre {
	color: yellow;
	font-family: sans-serif;
}

.flex-container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
table.uitztbl {
	background-size: contain; background-repeat:round;
	width: 250px; text-align: center;  
}

div.uitzknop {
	width: 200px; text-align: center;
	border: 1px inset gold;
	scale: 1;
}
div.uitzknop:hover {
	scale: 1.1;
	cursor: pointer;
	z-index: 10;
}
div.uitztile {
	background-size: contain; background-repeat:round; filter: blur(0px);
	min-height: 200px; text-align: center; 
}
div.uitztile:hover {
	filter: blur(2px);
}
div.uitztext {
  font-weight: bold; 
  font-family: kopFont;
  font-size: 1.0em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
	width: 95%;
	padding: 2px;
	text-align: center;
}
div.uitztext:hover {
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
}
div.subtext {
	font-size: 0.8em; font-family: monospace;
	width: 75%;
}
div.subtext:hover {
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
}
.toplijn {
	position: absolute;
	top: 1px;
	left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
}
.bottomlijn {
	position: absolute;
	bottom: 1px;
	left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
}
td.uitztile {
  font-weight: bold; 
/*  color: #ffff00;
  text-shadow: 4px 2px 4px #000000; */
  font-family: kopFont;
  font-size: 1.3em;
}
.outlined {
  color: yellow;
  text-shadow:
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
     2px  0   0 #000,
     2px  2px 0 #000,
     0    2px 0 #000,
    -2px  2px 0 #000,
    -2px  0   0 #000;
}

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; }

div.uitzending {
  width: 80%;
  text-align: center;
  border-style: ridge;
  border-width: 9px;
  border-radius: 15px 18px 0px 1px;
  color: yellow;
  /*background-color: orangered;
   hue-rotate(180deg)
drop-shadow(8px 8px 10px purple);  
  saturate(7); invert(90)
  filter: hue-rotate(1rad); 
  */
  margin-bottom: 50px;
}
/* voor di iframe die een div wordt */
div.scroll {
	/*background-color: #ffffff; border-style:;*/
	width: 70vw;
	height: 40vh;
	overflow-x: auto;
	overflow-y: auto;
	border-style: inset dotted dashed outset;
	border-width: 2px;
	border-color:  yellow;
  }

div.lijst {
	font-size: 0.3em; text-indent:-1em; text-align: center;
	background-color: #cccccc; 
	padding: 10px; 
	border-radius: 15px 50px; 
	background-image: url('index.jpg'); 
	/* background-repeat: no-repeat, repeat; */
	background-size: cover;
}·

.context {
	width: 100%;
	position: absolute;
	top:0;
	height: 100%;
}

.context h1{
	text-align: center;
	color: #fff;
	font-size: 50px;
}

.area{
	/* background: #4e54c8; */  
	background-image: linear-gradient(to left, #8f94fb, #4e54c8);  
	width: 100%;
	/* height:100vh; */
}

/* loading progress */
svg {
    display: block;
    font: 7em 'Candara';
    width: 960px;
    height: 110px;
    margin: 0 auto;
}
.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 9%;
    stroke-width: 1px;
    stroke-dashoffset: 10%;
    animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){ stroke: #4D163D; animation-delay: 500ms; }