/* CSS V3.0
 * © Copyright 2025, all rights reserved by Nicolas von Auw
 */


@media screen {
	/* BODY */
	body {	
		font-family: system-ui;
		margin: auto;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,1);	
	}

	header {
		text-align: left;
		font-size: 150%;
		height: 100px;
		width: 100%;
		padding-left: 5%;
		padding-top: 5%;
		color: rgba(127,127,127,1);
		background-color: rgba(0,0,0,1);
  		background-position: top center;
  		background-repeat: no-repeat;
  		background-size: cover;
  		box-shadow: 0px 0px 2px 5px rgba(0,0,0,1);
	}

	header img {
		height: 70%;
		width: auto;
		margin: left;
		
	}

/* NAV */
	nav {	
		font-family: system-ui;
		color: rgba(0,0,0,1);
		float: left;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,0);	
		float: left;	
	}
			
	nav details {
		font-size: 110%;
		padding-left: 5%;
		padding-top: 2%;
	}

	nav summary {
		font-size: 120%;
		font-weight: bold;
	}

	nav li {
		padding-bottom: 2%;
		list-style-type: none;
	}

	nav a {
		text-decoration: none;
		color: rgba(255,255,255,1);
		border-radius: 15px 15px 15px 15px;
		background-color: rgba(127,127,127,1);
		padding-left: 1%;
		padding-right: 1%;
		padding-top: 0.5%;
		padding-bottom: 0.5%;
	}

	nav a:hover {
		color: rgba(255,255,255,1);
		text-decoration: none;
		background-color: rgba(0,0,0,1);
	}

	nav a:visited {
		color: rgba(50,50,50,1);
		text-decoration: none;
	}

	nav h1 {
		font-size: 100%;
	}

	footer {
		width: 75mm;
		height: auto;
		margin: auto;
		text-align: center;
		font-style: italic;
		font-size: 2.5mm;
		color: rgba(127,127,127,1);
		background-color: rgba(127,127,127,0.1);
	}

	footer a, footer a:hover, footer a:visited {
		text-decoration: none;
		color: rgba(255,150,150,1);
		display: none;
	}

@media (prefers-color-scheme: dark) {
    body, header, nav, footer  {
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1);
    }

}
}


@media (max-width: 768px) {
	/* BODY */
	body {	
		font-family: system-ui;
		margin: auto;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,1);	
	}

	header {
		text-align: left;
		font-size: 150%;
		height: auto;
		width: 100%;
		padding-left: 5%;
		padding-top: 5%;
		color: rgba(127,127,127,1);
		background-color: rgba(255,255,255,1);	
	}

	header img {
		height: 100px;
		width: auto;
		margin: left;
		
	}

/* NAV */
	nav {	
		font-family: system-ui;
		color: rgba(0,0,0,1);
		float: left;
		height: 100%;
		width: 100%;
		background-color: rgba(255,255,255,1);	
		float: left;	
	}
			
	nav details {
		font-size: 110%;
		padding-left: 5%;
		padding-top: 5%;
	}

	nav summary {
		font-size: 120%;
		font-weight: bold;
	}

	nav li {
		padding-bottom: 4%;
		list-style-type: none;
	}

	nav a {
		text-decoration: none;
		color: rgba(255,255,255,1);
		border-radius: 15px 15px 15px 15px;
		background-color: rgba(127,127,127,1);
		padding-left: 1.5%;
		padding-right: 1.5%;
		padding-top: 1%;
		padding-bottom: 1%;
	}

	nav a:hover {
		color: rgba(255,255,255,1);
		text-decoration: none;
		background-color: rgba(0,0,0,1);
	}

	nav a:visited {
		color: rgba(255,255,255,1);
		text-decoration: none;
	}

	nav h1 {
		font-size: 100%;
	}

	footer {
		width: 75mm;
		height: auto;
		margin: auto;
		text-align: center;
		font-style: italic;
		font-size: 2.5mm;
		color: rgba(127,127,127,1);
		background-color: rgba(127,127,127,0.1);
	}

	footer a, footer a:hover, footer a:visited {
		text-decoration: none;
		color: rgba(127,127,127,1);
		display: none;
	}




	@media (prefers-color-scheme: dark) {
	    body, header, nav, footer  {
	        background-color: rgba(0,0,0,1);
	        color: rgba(255,255,255.9);
	    }

	}

}