@font-face         {font-family: 'fredoka'; src: url('../fredoka.ttf')  format('truetype');  }


	body {
	
	    --bgcol: #0a0b20;
	    --bcol: #1e183a;
	    --bgcol2: #151130;
	    --werkblad: #160e2b;
	    --rand: #2a2153;
	    --accent: white;
	    
		background-color: var(--werkblad);
		padding:0;
		margin:0;
		color:white;
		font-family: fredoka;
		color:var(--accent);
		font-size:16px;
		font-synthesis:none;
		
	
	}
	
	:root {
	  --accent-color: #a56cff; /* Paars accent */
	  --scroll-bg: #1a1a1a;     /* Scrollbar achtergrond (dark) */
	  --scroll-thumb: #a56cff; /* Scroll thumb kleur */
	  --scroll-thumb-hover: #c08aff; /* Lichtere hoverkleur */
	}

	/* Webkit (Chrome, Edge, Safari) */
	::-webkit-scrollbar {
	  width: 10px;
	  height: 10px;
	}

	::-webkit-scrollbar-track {
	  background: var(--scroll-bg);
	  border-radius: 6px;
	}

	::-webkit-scrollbar-thumb {
	  background-color: var(--scroll-thumb);
	  border-radius: 6px;
	  border: 2px solid var(--scroll-bg); /* Voor inset effect */
	  transition: background-color 0.3s ease;
	}

	::-webkit-scrollbar-thumb:hover {
	  background-color: var(--scroll-thumb-hover);
	}

	/* Firefox */
	* {
	  scrollbar-width: thin;
	  scrollbar-color: var(--scroll-thumb) var(--scroll-bg);
	}
	
	#toolbar button {
		background: transparent;
		border: none;
		transition:transform 0.5s ease;
		
	}
	
	#toolbar button:hover {
		transform:scale(1.2);

	}
	
	#toolbar button  {
		cursor:pointer;
	}
	
	
	#toolbar {
		position:absolute;
		width: calc(100% - 40px);
		height: 60px;
		top:0;
		left:0;
		padding: 20px;
		text-align:center;
		background-color: var(--bcol);
	}
	
	#logo {
		position:absolute;
		top:35px;
		left:20px;
		width:200px;
		
	}
	
	footer {
		position:absolute;
		bottom: 0;
		left:0;
		width:100%;
		height: 40px;
		background-color: var(--bcol);
		line-height:40px;
		text-align:center;
	}
	
	#citrien {
	
		position:absolute;
		
		top:45px;
		left:190px;
		width:60px;
	
	
	}

	#werkblad {
		position:absolute;
		width: 100%;
		height: calc(100% - 120px);
		top: 80px;
		left:0;
	}

	.winbox {
		padding: 2px;
		/* background: linear-gradient(135deg, #7775, #444f); */
		background-color: var(--bcol);
		border-radius: 8px;
		border: 1px var(--rand) solid;
	}

	.winbox .wb-title {
		font-family:fredoka;
		font-weight:bold;
	}

	.winbox .wb-body {
		background: var(--bgcol); /* binnenkant */
		border-radius: 6px;
		
	}
	
	.winbox#spelvenster .wb-body {
		background: var(--bgcol); /* binnenkant */
		border-radius: 6px;
	}
	
	.winbox#logboekvenster .wb-body {
		background: var(--bgcol); /* binnenkant */
		border-radius: 6px;
		color:#0f0;
		font-family:monospace;
		padding:20px;
	}
	
	.winbox#datavenster .wb-body {
		background: var(--bgcol2); /* binnenkant */
		border-radius: 6px;
		
	}
	
	.winbox #telefoon {
		padding: 20px;
		
	}
	
	.winbox#datavenster .wb-body .databestand {
		
		display: block;
		padding:5px;
		width:calc(100% - 10px);
		height:80px;
		color: var(--accent);
		clear:both;
		
	}
	
	
	.databestand span {
		display:block;
		width: calc(60% - 20px);
		height:80px;
		float:left;
		overflow:hidden;
		margin-top:27px;
		padding-left: 20px;
		
		
	}
	
	.databestand a {
		display:block;
		float:left;
		width: 20%;
		height: 80px;
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center;
		text-decoration:none;
		overflow:hidden;
	}
	
	.databestand img {
		display:block;
		float:right;
		width: 20px;
		height:20px;
		margin: 20px;
		cursor:pointer;
	
	}
	
	.platform {
		background-color: var(--bcol);
		width: 120px;
		text-align:center;
		padding:10px;
		border: 2px var(--rand) solid;
		border-radius:6px;
		margin: 10px;
		float:left;
		transition:transform 0.5s ease;
		
	}

	.platform:hover {
		cursor:pointer;
		transform:scale(1.2);
	}
	
	.platform.pro, .platform.binnenkort {
		opacity:0.5;
	}
	
	.platform.pro::after {
		content: 'PRO';
		font-size: 10px;
		color: #fff;
		background-color: #900;
		padding: 2px;
		border-radius: 3px;
	}
	
	#content a {
		color:#FFF;
	}
	
	button.voorbeeld {
		display:block;
		border: 1px var(--rand) solid;
		background-color: var(--bgcol);
		padding:10px;
		margin:10px;
		float:left;
		width: 80px;
		height: 80px;
		cursor:pointer;
		transition: 0.5s transform ease;
	}
	
	button.voorbeeld:hover {
		transform: scale(1.2);
	}
	
	button.voorbeeld img {
		
		width: 60px;
		height: 60px;
	}
	
	.voorbeelden::after {
		content: ' ';
		display:block;
		clear:both;
	}
	
	.ad {
		position:absolute;
		right:10px;
		top:10px;
	}