@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 Nestocopper42.ttf */

* {
	margin: 0px;
	box-sizing: border-box;
}
a	{ font-family: sans-serif;}
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.radionm { text-align:right; font-size:0.6em; font-family: h4-Font;
	border:6px outset gold; border-radius:5px; vertical-align:middle;}
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.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;}
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;
}
tr.iarchtag {
	font-family: txtFont; font-size: 1em;
	color:yellowgreen;  
	font-weight:bold; 
	background-image: url(i/geometry-abstract1.gif);
	background-size: cover;
	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;
}
div.radesc {
	color: yellow;
	font-family: kopFont;
	font-size: 0.2em;
	text-align: center;
}
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;
}
	
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.0em;
	backdrop-filter: invert(23) hue-rotate(1.142rad); 
	text-shadow: 2px 1px gold;
	margin:2px;
	border: 5px double silver; border-radius: 25px;
	filter: drop-shadow(5px 2px 3px) hue-rotate(-1.23rad);
	padding: 10px 10px 20px 10px;
	box-shadow: 5px 5px 3px yellow;
}
/*
	background-color: white;
	//width: 284px;
*/
body {
	width: 100%;
	/*
	background-image: url('koolmeeshouseone.gif');
	background-repeat: repeat;*/
	background-attachment: fixed;
	background-size: 100%;
	font-size: 48px;	
}
iframe {
	margin-bottom: 20px; 
	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; }


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

audio.raudio {
	width: 100px;
	height: 30px;
	background-image: url('index.jpg');
	background-size: cover;	
}
.flex-container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
/* 
	color: yellow;
	filter: invert(100%);
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:centre; 
·	padding:10px; border-radius: 15px 50px; 
	background-color: #cccccc; 
	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: -webkit-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: -1; }