html{
	height:100%;
	scroll-behavior:smooth;
}
body{
	height:100%;
	margin:0px; 
	background-color:#ffffff;
	color:#000000;
}

  /******************/
 /* text & content */
/******************/
@font-face {
	font-family:titlefont;
	src: url('SonsieOne-Regular.otf');
}

@font-face {
	font-family:icons;
	src: url('aristotelica.icons-bold.ttf');
}

h1 {font-family: "titlefont", cursive; font-size: 1.5em; font-weight: normal;  margin-top: 10px; margin-bottom: 0em;}
h2 {font-family: "titlefont", cursive; font-size: 1.2em; font-weight: normal; margin-top: 30px; margin-bottom:0px;}
p {font-family: "Courier New", Courier, monospace; font-size: 1.0em; margin-bottom:10px; line-height:150%; text-align:justify;}
ul {list-style-position:inside; list-style-type: disc; padding-left:10px; text-align: justify;}		
li {font-family: "Courier New", Courier, monospace; font-size: 1.0em; text-align: justify;}
pre {font-family: "Courier New", Courier, monospace; font-size: 1.0em;}
img.thumbnail{position:relative; width:200px; float: right; margin-left:10px; margin-bottom:10px; cursor:pointer; }

a{font-family: "Courier New", monospace; color: #000000; text-decoration: none; border-bottom:2px solid #000000;}
a:link {}
a:visited {}
a:hover {background-color:#000000;color:#ffffff;}
a:active {background-color:#000000;color:#ffffff;}

a.scroll{z-index:3; position: fixed; right:1%; background-color:#000000; border: none; border-radius: 50%; font-family: "icons"; text-align:center; text-decoration:none; color:#ffffff; font-size:2.4em; cursor:pointer; padding: 7px 7px;}
a.scroll:link{ }
a.scroll:visited{display:none;}
a.scroll:hover{}
a.scroll:active{}

a#scrolldownbutton{bottom:65px;}
a#scrollupbutton{bottom:120px; display:none; }

  /**********/
 /* layout */
/**********/
div#header{
	width:100%;
	height:65px;
	position:fixed; 
	top:-65px; 
	transition:top 0.5s; 
	z-index:2;
	background-color:#000000;
}
div#welcome{
	width:90%;
	height: 95vh;
	position:relative;
	top:0px;
	margin-left:auto;
	margin-right:auto;
}
div#logo{
	width:100%;
	height:50vh;
	position:relative;
	box-sizing: border-box; /*padding and margin are not added to size*/
	padding-top:5%;
}
div#comingup{
	width:100%;
	height:45vh;
	position:relative;
	box-sizing: border-box;
	padding-top:15%;
}
div#main{
	width:90%;
	position:relative; 
	margin-left:auto; 
	margin-right:auto;
	padding-top:65px;
	padding-bottom:65px; 
}
.content{
	width:100%;
	position:relative;
	clear:both;
	margin-bottom:20px;
	padding-top:10px;
}
div#footer{
	width:100%;
	height:5vh;
	position: fixed;
	bottom:0px;
	box-sizing: border-box; /*padding and margin are not added to size*/
	padding-top:5px;
	background-color:black;
}

  /*********/
 /* hacks&helpers */
/*********/
div#header-text{
	width:90%;
	height:100%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	box-sizing: border-box; /*padding and margin are not added to size*/
	padding-top:10px;
	padding-bottom:10px;
	color:#ffffff; 
	font-family: "titlefont", serif; 
	font-size:22px; 
	font-weight:bold;
}
div#header-text span{
	position:relative;
	float:left;
	margin-right:15px;
}
div#logo_small{
	height:100%;
	width:20%;
	position:relative;
	float:left;
	background-repeat:no-repeat;
	background-size:contain;
	background-image: url("Logo_weiss_klein.png");
}	
div#logo_big{
	width:100%;
	height:100%;
	position:relative;
	margin-left:auto; 
	margin-right:auto;
	background-image: url("Logo_weiss_Text_rund.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
div#comingup ul{
	list-style-position:inside;
	list-style-type: none;
	padding-left:0px;
	text-align: justify;
}		
div#comingup li{
	font-family: "Courier New", Courier, monospace;
	font-size: 1.0em;
	text-align: justify;
	margin-bottom:7px;
}
div#footer-text{
	width:90%;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	text-align: right; 
	color: #ffffff; 
	font-family: "titlefont";
	font-size:16px;
}

  /*******************************************************/
 /* responsivenesses (screenwidth from 800px and bigger)*/
/*******************************************************/
@media only screen and (min-width:350px){
	div#header-text{font-size:26px;}
}
@media only screen and (min-width:450px){
	div#header-text{font-size:32px;}
}
@media only screen and (min-width:800px){
	div#header-text{
		width:70%
	}
	div#welcome{
		width:70%;
	}
	div#logo{
		width:40%;
		height:100%;
		float:left;
		padding-top:0%;
		padding-right:5%;
	}
	div#comingup{
		width:60%;
		height:100%;
		float:right;
		padding-left:5%;
	}
	div#comingup h1{
		font-size: 1.2em;
	}
	/* hack for vertically centering.. */
	.centered{
		position: absolute;
  		top:50%;
 		transform: translate(0, -50%); 
 		-ms-transform: translate(0, -50%);
	}
	div#main{
		width:70%;
	}
	div#footer-text{
		width:70%;
	}
	a.scroll{right:9%;}
}
@media only screen and (min-width:900px){
	div#comingup h1{
		font-size: 1.5em;
	}
}
@media only screen and (min-width:1000px){
	div#header-text{
		width:65%
	}
	div#welcome{
		width:65%;
	}
	div#main{
		width:65%;
	}
	div#footer-text{
		width:65%;
	}
	a.scroll{right:13%;}
	img.thumbnail{width:300px;}
}
@media only screen and (min-width:1200px){
	div#header-text{
		width:60%
	}
	div#welcome{
		width:60%;
	}
	div#main{
		width:60%;
	}
	div#footer-text{
		width:60%;
	}
	a.scroll{right:16%;}
	img.thumbnail{width:350px;}
}
@media only screen and (min-width:1400px){
	div#header-text{
		width:55%
	}
	div#welcome{
		width:55%;
	}
	div#main{
		width:55%;
	}
	div#footer-text{
		width:55%;
	}
	a.scroll{right:19%;}
	img.thumbnail{width:400px;}
}
@media only screen and (min-width:1600px){
	div#header-text{
		width:50%
	}
	div#welcome{
		width:50%;
	}
	div#main{
		width:50%;
	}
	div#footer-text{
		width:50%;
	}
	a.scroll{right:22%;}
}

  /*************/
 /* dark-mode */
/*************/
@media (prefers-color-scheme: dark){
	body{background-color:#000000; color:#ffffff;}
	a{color:#ffffff;border-bottom:2px solid #ffffff;}
	a:hover{background-color:#ffffff;color:#000000;}
	a:active{background-color:#ffffff;color:#000000;}
	a.scroll{background-color:#ffffff;color:#000000;}
	div#header{background-color:#ffffff;}
	div#header span{color:#000000;}
	div#logo_small{background-image: url("Logo_schwarz_klein.png");}
	div#logo_big{background-image: url("Logo_schwarz_Text_rund.png");}
	div#footer{background-color:#ffffff;}
	div#footer-text{ color:#000000;}
}