:root {
    --black:black;
    --gray:gray;
    --lightgray:lightgray;
    --darkgray:darkgray;
    --silver:silver;
    --white:white;
    --whitesmoke:whitesmoke;
    --opaquewhite:rgba(255,255,255,0.5);
    --yellow:yellow;
    --lightyellow:lightyellow;
    --orange:orange;
    --gold:gold;
    --red:red;
    --pink:pink;
    --bisque:bisque;
    --bisquedark:#ffcd91;
    --purple:purple;
    --brown:brown;
    --lightblue:lightblue;
    --blue:blue;
    --lightgreen:lightgreen;
    --green:green;
    --none:none;
	
    --chillax-color:#a50632;
	--chillax-nav-background:#f7f2f4;
    --carouselbutton:rgba(181,85,85,0.7);
    --oldcolorred:rgba(255,0,13,0.646);
	--loading:hsl(214deg,39%,50%,0.2);
	--shadow:rgba(0,0,0,0.2);
	
	/*====================================*/
	
	--font-family:Arial;
	--font-size:100%;
	--line-height:2em;
	--icon-font-size:2em;
	--icon-line-height:1em;
	--boxshadow:var(--shadow);
	--color:var(--chillax-color);
    --color-background:var(--white);
	--color-dark:var(--color);
	--color-button:var(--color);
	--color-button-background:var(--white);
	--color-button-border:var(--darkgray);
	--color-button-hover:var(--white);
	--color-button-hover-background:var(--color);
	--color-loading:var(--white);
    --color-loading-background:var(--loading);
	--color-service:var(--white);
    --color-service-background:var(--color);
    --color-modal:var(--color);
    --color-modal-background:var(--white);
	--color-nav:var(--color);
	--color-nav-background:var(--chillax-nav-background);
	--color-nav-hover:var(--color-nav-background);
	--color-nav-hover-background:var(--color);
    --color-navcontainer:var(--color);
    --color-navcontainer-background:var(--white);
    --color-maincontainer:var(--color);
    --color-maincontainer-background:var(--white);
    --color-sidecontainer:var(--color);
    --color-sidecontainer-background:var(--white);
    --color-footercontainer:var(--color);
    --color-footercontainer-background:var(--white);
    --color-footer:var(--color);
    --color-footer-background:var(--color-nav-background);
}

/* colors */
.black {
    color:var(--black);
}
.blue {
    color:var(--blue);
}
.white {
    color:var(--white);
}
.whitesmoke {
    color:var(--whitesmoke);
}
.lightblue {
    color:var(--lightblue);
}
.lightgray {
    color:var(--lightgray);
}
.lightgreen {
    color:var(--lightgreen);
}
.orange {
    color:var(--orange);
}
.pink {
    color:var(--pink);
}
.purple {
    color:var(--purple);
}
.red {
    color:var(--red);
}
.gray {
    color:var(--gray);
}
.green {
    color:var(--green);
}

/* standard html elements */
a {
  transition:opacity 0.3s;
  text-decoration:none;
  color:var(--color);
}
a:hover,a:focus,a:active {
	opacity:0.8;
}
a:visited {
	color:var(--color-dark);
}
body {			
  scroll-behavior:smooth;
  margin:0;
  padding:0;
  font-family:var(--font-family);
  font-size:var(--font-size);
  line-height:var(--line-height);
  background:url('/content/images/htmlbackground.webp');
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
  background-color:var(--color-background);
  color:var(--color);
}
button {
	color:var(--color-button);
	background:var(--color-button-background);
	border:solid 1px var(--color-button-border);
	border-radius:5px;
	cursor:pointer;
	text-align:center;
	padding:15px;
	margin:5px;
	font-weight:bold;
	font-size:120%;
	box-shadow:0 4px 8px 0 var(--boxshadow);
	transition:0.3s;
}
button:hover {
	color:var(--color-button-hover);
	background:var(--color-button-hover-background);
	box-shadow:0 8px 16px 0 var(--boxshadow);
}
figure {
  margin:0;
  padding:0;
}
figcaption {
  text-align:center;
  font-style:italic;
  padding:5px;
}
h1,h2,h3,h4,h5,h6 {
  text-align:center;
}
iframe {
    border:0;
	user-select:none;
}
img {
    user-select:none;
    vertical-align:middle;
	/*filter: grayscale(40%);*/
}
p {
    font-size:120%;
}
pre,code {
	color:blue;
	text-align:left;
}
span {
    vertical-align:middle;    
}

/* audio & video */
audio,video {
	width:100%;
}
.audio,.video {
	text-align:center;
	background-color:var(--white);
	border:solid 1px var(--lightgray);
	border-radius:10px;
	padding:20px;
	margin:5px;
	filter:grayscale(10%);
}

/* app-root grid */
app-root {
	display:grid;
	height:100vh;
	min-height:100vh;
	footer,
	nav {
		display:flex;
		left:0;
		right:0;
		flex-flow:row wrap;
		height:fit-content;
		align-items:center;
		vertical-align:middle;
		user-select:none;
		padding:10px;
		color:var(--color-nav);
		background-color:var(--color-nav-background);
	}
	nav {
		grid-area:nav;
		.navlink {
			margin:0;
			padding:0;
		}
		.navlogo {
			b {
				font-style:italic;
				margin-left:5px;
			}
			img {
				max-width:200px;
				max-height:50px;
				/*border-radius:50%;*/
			}
		}
		.usericon {
			display:block;
			width:40px;
			height:40px;
			circle {
				fill:#cccccc;	
			}
			path {
				fill:#a0a09f;	
			}
			foreignObject img {
				border:solid 1px black;
				border-radius:500px;
			}
			foreignObject span {
				font:bold 50px sans-serif;
			}
			.true circle {
				fill:lightgreen;
			}
			.true path {
				fill:green;
			}
		}
		.spacer {
			flex:1;
		}
		.navmenu {
			position:absolute;
			display:none;
			top:0;
			right:0;
			max-width:300px;
			border-radius:0px 0px 0px 25px;
			box-shadow:0 8px 16px 0 var(--boxshadow);
			background-color:var(--color-nav-background);
			img,
			.material {
				height:30px;	
				width:30px;
				border-radius:50%;
			}
			.navmenuicon {
				text-align:right;
				padding:5px;
				border-radius:0px 0px 0px 25px;
				span {
					position:relative;
					padding:10px;
					line-height:var(--icon-line-height);
					right:0;
					cursor:pointer;
					border-radius:50%;
				}
			}
			.navmenusearch {
				border:solid 1px var(--color-nav);
				border-radius:5px;
				margin:10px;
				padding:5px;
				input {
					padding:10px;
				}
			}
			.navmenuitems {
				padding:5px;
				padding:0;
			}
			.navmenulink {
				margin:10px;
				padding:5px;
				cursor:pointer;
				a {
					display:block;
					text-align:left;
					color:var(--color-nav);
					padding:5px;
					min-width:150px;
				}
			}
			.navmenulink a:hover,
			.navmenulink a:focus,
			.navmenulanguage:hover,
			.navmenulanguage:focus {
				color:var(--color-nav-hover);
				background-color:var(--color-nav-hover-background);
				border-radius:5px;
			}
			.navmenu:hover {
				transition:0.3s;
				box-shadow:0 8px 32px 0 var(--boxshadow);
			}
			/*
				.navmenulanguage {
				}
				.navmenuregistration {
				}
			*/
		}
		.totop {
			line-height:var(--icon-line-height);
			position:fixed;
			bottom:10px;
			right:10px;
			height:50px;
			width:50px;
			z-index:9999;
			cursor:pointer;
			border-radius:50%;
			text-align:center;
			font-size:50px; 
			box-shadow:0 8px 16px 0 var(--boxshadow);
		}
		.totop:hover {
			color:var(--lightgray);			
		}
	}
	footer {
		grid-area:footer;
		bottom:0;
		z-index:999;
		justify-content:center;
		align-items:stretch;
		.footerlanguages,
		.footeranchors,
		.footersocials,
		.footercontact {
			padding:10px;
		}
		.footerlanguage,
		.footeranchor,
		.footersocial,
		.footercontactemail,
		.footercontactphone {
			margin:10px;
			padding:0;
		}
		.footerlogo img {
			width:30px;
			border-radius:50%;
		}
		.footerlogo,
		.footercopyright {
			width:100%;
			text-align:center;
		}
		.footerlanguages img {
			width: 1em;
			height: 1em;
			border-radius:50%;
		}
	}
	.footerad {
		grid-area:footerad;
	}
	.headerad {
		grid-area:headerad;
	}
	.sidead {
		grid-area:sidead;
	}
	.headerad iframe,
	.footerad iframe {
		max-width:100%;
		width:100%;
		height:100%;
	}
	.sidead iframe {
		max-height:100%;
		height:100%;
	}
	.footercontainer {       
		grid-area:footercontainer;
		height:fit-content;
		color:var(--color-footercontainer);
		background-color:var(--color-footercontainer-background);
		contact {
			margin-left:20%;
			margin-right:20%;
			padding:10px;
	 	}
	}
	.maincontainer {
		grid-area:maincontainer;
		color:var(--color-maincontainer);
		background-color:var(--color-maincontainer-background);
		.languagenotfound img {
			height:20px;
		}
	}
	.navcontainer {
		grid-area:navcontainer;
		height:fit-content;
		color:var(--color-navcontainer);
		background-color:var(--color-navcontainer-background);
	}
	.sidecontainer {
		grid-area: sidecontainer;
		color:var(--color-sidecontainer);
		background-color:var(--color-sidecontainer-background);
	}
	.maincontainer,
	.navcontainer,
	.sidecontainer,
	.footercontainer {
		padding:10px;
	}
	.maincontainer:empty,
	.navcontainer:empty,
	.sidecontainer:empty,
	.footercontainer:empty {
		padding:0;
	}
}

/* various fundamental classes */
.card {
	background-color:var(--white);
    border:1px solid var(--lightgray);
	border-radius:5px;
	border-width:1px;
	box-shadow:0 4px 8px 0 var(--boxshadow);
	margin:10px;
	transition:0.3s;
	.cardheader {
		padding:10px; 
		text-align:center;     
	}
	.cardbody {
		border-top:solid;
		border-width:1px;
		padding:10px;
		text-align:left; 
	}
}
.card:hover {
	box-shadow:0 8px 16px 0 var(--boxshadow);
}
.caret {
	float:right;
	&.hide {
		display:none;
	}
}
.center {
  text-align:center;
}
.flexcolumn {
  text-align:left;
  display:flex;
  flex-direction:column;
}
.hide {
  display:none;
}
.material {
  font-family:'material';
  font-weight:normal;
  font-style:normal;
  font-size:var(--icon-font-size);
  display:inline-block;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
}
.deletemodal,.loading,.modal,.servicemessage {
	position:absolute;
	z-index:9999999;
	top:0;
	left:0;
	padding-top:40vh;
	min-height:100%;
	min-width:100%;
	text-align:center;
}
.deletemodal {
  color:var(--color-modal);
  background:var(--color-modal-background);
  font-size:300%;
  border-radius:5px;
}
.loading {
  color:var(--color-loading);
  background:var(--color-loading-background);
  font-size:300%;
}
.modal {
	background:var(--color-modal-background);
	span {
		color:var(--color-modal);
		font-size:300%;
	}
}
.servicemessage {
  color:var(--color-service);
  background:var(--color-service-background);
  font-size:300%;
}
.spinner {
  animation-name:pulsar;
  animation-duration:3s;
  animation-iteration-count:infinite;
  transform:rotate(90deg);
}
.pointer {
  cursor:pointer;
}
.left {
  text-align:left;
}
.right {
	float:right;
}
.h100 {
	height:100%;
}
.w10 {
	width:10%;
}
.w20 {
	width:20%;
}
.w25 {
	width:25%;
}
.w30 {
	width:30%;
}
.w33 {
	width:33.3333%;
}
.w40 {
	width:40%;
}
.w50 {
	width:50%;
}
.w60 {
	width:60%;
}
.w66 {
	width:66.6666%;
}
.w70 {
	width:70%;
}
.w75 {
	width:75%;
}
.w80 {
	width:80%;
}
.w90 {
	width:90%;
}
.w100 {
	width:100%;
}

/* font-awesome icons */
.fa-brands {
    font-family:'Font Awesome 6 Brands';
    font-style:normal;
    font-size:var(--icon-font-size);
}
.fa-facebook:before {
    content:"\f09a"; 
}
.fa-instagram:before {
    content:"\f16d"; 
}
.fa-linkedin:before {
    content:"\f0e1";
}
.fa-tiktok:before {
    content:"\e07b";
}
.fa-youtube:before {
    content:"\f167";
}
.fa-telegram:before {
    content:"\f2c6";
}
.fa-snapchat:before {
    content:"\f2ab";
}
.fa-whatsapp:before {
    content:"\f232";
}
.fa-pinterest:before {
    content:"\f0d2";
}
.fa-wechat:before {
    content:"\f1d7";
}
.fa-reddit:before {
    content:"\f1a1";
}
.fa-x:before {
    content:"\e61b";
}
.fa-bluesky:before {
    content:"\e671";
}
.fa-quora:before {
    content:"\f2c4";
}
.fa-microsoft:before {
    content:"\f3ca"; 
}
.fa-google:before {
    content:"\f1a0"; 
}

/* tags */
tags {
    display:block;
	user-select:none;
	--color-tag:var(--color);
	--color-tag-background:white;
	& .header {
		text-align:center;
		color:var(--color-tag-background);
		background-color:var(--color-tag);
		padding:10px;
		cursor:pointer;
		.hide {
			display:none;
		}
	}
	.body {
		margin:0;
		padding:10px;
		background-color:var(--pink);
	}
	.link {
		display:grid;
		grid-template-areas:
		"tagname	image		title		title		arrow"
		"header		header		header		header		header"
		"paragraph	paragraph	paragraph	paragraph	paragraph";
		text-align:left;
		align-items:start;
		margin:3px;
		border:solid 1px var(--color-tag);
		color:var(--color-tag);
		background-color:var(--color-tag-background);
		max-width:100%;
		text-align:left;
		align-self:center;
		justify-self:center;
		.tagname {
			grid-area:tagname;
			font-size:small;
			font-style:italic;
		}
		.image {
			grid-area:image;
			align-self:center;
			justify-self:center;
		}
		.title {
			grid-area:title;
			font-size:x-large;
			font-weight:bold;
			align-self:center;
			justify-self:left;
		}
		.header {
			grid-area:header;
			font-size:medium;
		}
		.paragraph {
			grid-area:paragraph;
			font-size:small;
		}
		.arrow {
			grid-area:arrow;
			align-self:center;
			justify-self:right;
			font-size:large;
		}
	}
	.link {
		:hover,
		:focus,
		:active,
		:visited {
			color:var(--color-tag-background);
			background-color:var(--color-tag);
			opacity:1;
		}
	}
}

/* gigs */
gigs {
	display:block;
	text-align:center;
	.header {
		color:var(--black);
		display:none;
	}
	.banner {
		margin-left:30%;
		margin-right:30%;
		img {
			width:100%;
			height:100%;
			padding:0;
			margin:0;
			border:solid 1px var(--lightgray);
		}
		div {
			padding:10px;
			color:var(--color-background);
			background-color:var(--color);
		}
	}
	.gig {
		margin-left:10%;
		margin-right:10%;
		margin-bottom:10px;
		color:var(--color);
		background-color:var(--color-background);
		border:solid 1px var(--color);
		border-radius:5px;
		.gigheader {
			padding:10px;
			border-top-left-radius:5px;
			border-top-right-radius:5px;
			border-bottom: solid 1px var(--color);
			text-align:center;
			vertical-align:middle;
			color:var(--color-background);
			background-color:var(--color);
			div {
				padding:5px;
			}
			.icon {
				vertical-align:middle;
			}
			.venue {
				font-size:var(--icon-font-size);
				font-weight:bold;
			}
			.city {
				font-weight:bold;
			}
		}
		.gigbody {
			text-align:left;
			padding:10px;
			margin-left:20%;
			margin-right:20%;
			div {
				padding:5px;
			}
		}
	}
	.old {
		opacity:0.2;
	}
	.cancel {
		--color-cancel:#c27087;
		--color-cancel-background:var(--white);
		color:var(--color-cancel);
		border: solid 1px var(--color-cancel);
		.gigheader {
			color:var(--color-cancel-background);
			background-color:var(--color-cancel);
		}
		.gigbody {
			.cancel,
			h3 {
				color:var(--color-cancel);
				background-color:var(--color-cancel-background);
			}
		}
		button {
			color:var(--color-cancel);
			background-color:var(--color-cancel-background);
			:hover,
			:focus {
				color:var(--color-background-cancel);
				background-color:var(--color-cancel);
			}
		}
	}
}

/* slideshow */
slideshow {
    --color-carouselbutton:var(--white);
    --color-carouselbutton-background:var(--color);
	display:block;
    color:var(--color);
    background-color:var(--color-background);
	border:solid 1px var(--lightgray);
	border-radius:10px;
    filter:grayscale(20%);
	figure {
		display:grid;
		grid-template-rows:max-content max-content max-content max-content;
		grid-template-columns:auto auto auto auto auto;
		grid-template-areas:
		"back		back		title			next		next"
		"back		back		figcaption		next		next"
		"picture	picture		picture			picture 	picture"
		".			buttons		buttons			buttons		."
		;
		user-select:none;
		.title {
			grid-area:title;
			padding:10px;
			text-align:center;
			font-weight:bold;
			font-size:normal;
		}
		figcaption {
			grid-area:figcaption;
			font-size:small;
			font-weight:bold;
			font-style:italic;
		}
		.navbutton {
			margin:10px;
			padding:1px;
			border-radius:50%;
			color:var(--color-carouselbutton);
			background-color:var(--color-carouselbutton-background);
			cursor:pointer;
		}
		.back {
			grid-area:back;
			align-self:center;
			justify-self:center;
		}
		.next {
			grid-area:next;
			align-self:center;
			justify-self:center;
		}
		picture {
			grid-area:picture;
			filter:grayscale(1%);
			width:100%;
			img {
				width:80%;
			}
		}
		.buttons {
			grid-area:buttons;
			padding:5px;
			display:block;
			span {
				cursor:pointer;
				border-radius:50%;
			}
			span:hover,.active {
				color:var(--color-carouselbutton-background);
				background-color:var(--lightgray);
				box-shadow:0 4px 8px 0 var(--boxshadow);
				transition:0.3s;			
			}	
		}
	}
}
slideshow:hover {
	box-shadow:0 4px 8px 0 var(--boxshadow);
	transition:0.3s;		
}

/* === dbs8 specific styles === */
nav {
	box-shadow:0 4px 8px 0 var(--boxshadow);
	transition:0.3s;
}
body.root {
	text-align:center;
	picture {
		img {
			width:75%;
			border-radius:5%;
		}
		img:hover {
			box-shadow:0 4px 8px 0 var(--boxshadow);
			transition:0.3s;	
		}
	}
	h2 {
		font-style:italic;
	}
}
body.band {
	text-align:center;
	img {
		width:50%;
		border-radius:50%;
	}
	img:hover {
		box-shadow:0 4px 8px 0 var(--boxshadow);
		transition:0.3s;	
	}
}
body.muziek {
	.audio a {
		font-size:small;
		font-weight:bold;
	}
	.audio:hover {
		box-shadow:0 4px 8px 0 var(--boxshadow);
		transition:0.3s;		
	}
	figcaption {
		font-size:large;
		font-style:normal;
		font-weight:bold;
	}
}
body.videos {
	text-align:center;
	app-root {
		.navcontainer,.maincontainer,.sidecontainer,.footercontainer {
			background-color:transparent;		
		}
	}
	.video {
		video {
			width:75%;
			filter:grayscale(10%);
		}
		figcaption {
			font-size:large;
			font-style:normal;
			font-weight:bold;
		}
		p {
			a {
				font-size:small;
				font-weight:bold;
			}
		}
	}
	.video:hover {
		box-shadow:0 4px 8px 0 var(--boxshadow);
		transition:0.3s;		
	}
}
body.foto {
	text-align:center;
	app-root {
		.navcontainer,.maincontainer,.sidecontainer,.footercontainer {
			background-color:transparent;
		}
	}	
}
body.topics {
	.maincontainer {
		height:1000px;
	}
	.tags {
		width:100%;
		.body {
			.link {
				width:80%;
				padding:10px;
				margin:10px;
			}		
		}
	}
}

@font-face {
  font-family:'Font Awesome 6 Brands';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url('./fonts/brands.woff2') format('woff2');
}
@font-face {
  font-family:material;
  font-style:normal;
  font-weight:400;
  src:url('./fonts/material.woff2') format('woff2');
}
@media (min-width:0px) {
	app-root {
		grid-template-columns:minmax(0%,100%);
		grid-template-areas:
		"nav"
		"headerad"
		"navcontainer"
		"maincontainer"
		"sidecontainer"
		"sidead"
		"footercontainer"
		"footerad"
		"footer";
		nav {
			.spacer,.navlink {
				display:none;
			}
			.navmenu {
				display:block;
			}			
		}
	}
}
@media (min-width:800px) {
	:root {
		--body-margin-percentage:10%;
		--body-rest-percentage:80%;
	}
	/* STATE 1: Default */
	app-root {
		grid-template-rows:max-content max-content max-content max-content max-content max-content max-content;
		grid-template-columns: var(--body-margin-percentage) var(--body-rest-percentage) var(--body-margin-percentage);
		grid-template-areas:
		"nav		nav                 nav"
		".			headerad            ."
		".			navcontainer        ."        
		".			maincontainer       ."
		".			sidecontainer       ."
		".			footercontainer     ."
		".			footerad            ."
		"footer		footer              footer";
	}
	/* STATE 2: Sidecontainer not empty, sidead not present */
	app-root:has(.sidecontainer:not(:empty)):has(:not(.sidead)) {
		grid-template-columns: var(--body-margin-percentage) minmax(0,max-content) minmax(0,max-content) var(--body-margin-percentage);
		grid-template-areas:
		"nav		nav                 nav                 nav"
		".			headerad            headerad            ."
		".			navcontainer        navcontainer        ."        
		".			maincontainer       sidecontainer       ."
		".			footercontainer     footercontainer     ."
		".			footerad            footerad            ."
		"footer		footer              footer              footer";
	}
	/* STATE 3: Sidecontainer empty, sidead present */
	app-root:has(.sidecontainer:empty):has(.sidead) {
		grid-template-columns: var(--body-margin-percentage) minmax(0,max-content) minmax(0,max-content) var(--body-margin-percentage);
		grid-template-areas:
		"nav		nav                 nav                 nav"
		".			headerad            headerad            ."
		".			navcontainer        navcontainer        ."        
		".			maincontainer       sidead              ."
		".			footercontainer     footercontainer     ."
		".			footerad            footerad            ."
		"footer		footer              footer              footer";
	}
	/* STATE 4: Sidecontainer not empty and sidead present */
	app-root:has(.sidecontainer:not(:empty)):has(.sidead) {		
		grid-template-columns:var(--body-margin-percentage) minmax(0,max-content) minmax(0,max-content) minmax(0,max-content) var(--body-margin-percentage);
		grid-template-areas:
		"nav		nav 				nav 				nav 				nav"
		".          headerad			headerad			headerad			."
		".          navcontainer        navcontainer        navcontainer        ."        
		".          maincontainer       sidecontainer       sidead				."
		".          footercontainer     footercontainer     footercontainer     ."
		".          footerad			footerad			footerad			."
		"footer	    footer	            footer              footer              footer";
	}
}
@media (min-width:1440px) {
	:root {
		--body-margin-percentage:20%;
		--body-rest-percentage:60%;
	}
	app-root {
		nav {
			.spacer,.navlink {
				display:block;
			}
			padding-left:var(--body-margin-percentage);
			padding-right:var(--body-margin-percentage);
		}
	}
}
@media print {
    .cardheader,
    .navcontainer,
    .maincontainer,
    .sidecontainer,
    .footercontainer,
    nav,
	footer,
    button {
        display:none;
    }
    body {
        margin:0;
        padding:0;
    }
    .card,
	.cardbody {
        border-style:none;
        border-width:0;
        border-radius:0;
        box-shadow:none;
        margin:0;
        padding:0;        
    }
    .card:hover {
        box-shadow:none;        
    }
}