body { 
	padding: 0; margin: 0; 
	
	overflow: hidden; 
	font-family: sans-serif;
	background-color: rgb(225,225,250); 
	font-weight:300
}

/** 3D-Modell wird vom Script bestimmt **/
canvas { }

::-webkit-scrollbar {
    display: none !IMPORTANT;
}

html {-webkit-text-size-adjust: 104%;  /* Prevent font scaling in landscape while allowing user zoom */}

main { 
	margin: 9em 4em;
	padding-top:2em;
}
main h1 { font-weight: 400}
body, html {
	width:100%; 
	height: 100%; 
}

hr {margin-bottom: 0.5em}

.top {
	position: absolute;
	width:100%;
	top: 0;
	left:0;
	padding: 0.2em;
	color: rgb(100,100,100);
	background-color: rgb(225,225,250);
	box-sizing:border-box;
	z-index:9999;
	margin:0;
}

.top img {
	width:100%;
	height:auto;
}

/** mobile Navigation für small (top:90) und medium (top 52) **/
@media (max-width: 479px) {
	.mobile {
		top: 90px
	}
}

@media (min-width: 480px) {
	.mobile {
		top: 52px
	}
}

.mobile.hide {
	display:none;
}

.mobile {
	padding-top: 0.5rem;
	height: auto;
	width: 100vw;
	background-color:hsl(0,0%,100%,0.8);
	position: absolute;
}

.mobile.open {
	max-height: 200px;
}

.mobile ul {
	list-style-type: none;
}

.mobile li {
	margin-bottom: 0.5em;
}

.mobile a {
	text-decoration: none;
	color: #333;
}

.bottom {
	position: absolute;
	width: 100%;
	top: auto;
	left:0;
	bottom: 0;
	color: rgb(120,120,120);
	box-sizing: border-box;
	background-color: rgb(225,225,250);
	z-index:9999;
}

large, medium, small  {
	box-sizing:border-box;
	position: absolute;
	top:0;
	height:100vh;
}

hr {
	color:rgb(150,150,150); 
	height:1px; 
	background-color: rgb(150,150,150);
	margin-top:16px;
	margin-left: 1em; 
	margin-right: 1.8em;
}

/******************************************************************/
/**
/** Kleiner Monitor
/**
/******************************************************************/

@media (max-width: 479px) {
	.large { display: none; }
	.medium { display: none;}
	
	.top {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
	}
	
	.top .cardo {
		width: 85%;
		padding:0 0.5em;
		box-sizing: border-box;
	}
	
	.bottom {padding: 0 1em 0.5em 1em};
	
	.bottom .cardo {
		width: 100%;
		padding:0.5em;
		letter-spacing: 2px; 
		box-sizing: border-box;
	}
	
	nav {
		width: 10%;
	}
	

	p.line {
		margin-top:0;
		font-size:3.4vw;
		/** text-align: justify;
		text-align-last: justify;**/
		font-family: sans-serif;
	}
}


/******************************************************************/
/**
/** Mittlerer Monitor
/**
/******************************************************************/

@media (min-width:480px) and (max-width:719px) {
	.small { display: none}
	.large {display: none}
	
	.top {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
	}
	
	.top .cardo {
		width: 85%;
		padding:0 0.5em;
		box-sizing: border-box;
	}
	.bottom { padding: 0 1em 0.5em 1em}
	.bottom .cardo {
		width: 100%;
		padding:0; 
		box-sizing: border-box;
	}
	
	nav {
		width: 4%;
	}

	p.line {
		margin-top:0;
		font-size:2vw;
		/**text-align: justify;
		text-align-last: justify;**/
		font-family: sans-serif;
	}
	
	aside {
		
	}
}


/******************************************************************/
/**
/** Großer Viewport
/**
/******************************************************************/

@media (min-width: 720px) {
	.small { display: none;}
	.medium {display: none; }
	.large {
		width: 100%;
		box-sizing: border-box;
	}
	
	.top .cardo {
		display: flex;
		justify-content: space-between;
	}
	
	.top .cardo p {
		width: 75%;
		margin-top:0
	}
	.top .cardo nav {
		width:14%;
		font-size: 1vw;
	}
	
	.top .cardo nav img {
		width:40px; 
		float: right;
	}
	
	.top .cardo nav a:hover {
		color:rgb(0,0,100);
		text-decoration: none;
	}
	
	.bottom  {
		padding: 0 4em 0.5em 2em;
	}
	
	p.line {
		font-size: 1vw;
		margin-top:0;
		margin-bottom: 0;
	}
	
	.top p.line {
		color: rgb(120,120,120);
	}
	
	.bottom p.line {
		color: rgb(100,100,100);
	}
}