body {
   background-position: 0 25px;
   background-color: #fbfaf9;
   background-image: url(page-gradient.png);
   background-repeat: repeat-x;
   text-align: left;
   font-family: "Arial";
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;    
   border-style: none;
   border-bottom: none;
   font-size: 1.1rem;
   color: #323232;
}

a, a:hover, a:link {
   color: orange;
   text-decoration: none;
}

@media screen and (max-width: 799px) {

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	li {
		user-select: none;
		margin: 0px;
		padding: 12px 15px 12px 15px;
		border-top: 1px solid #212121;	
	}

	li:hover:not(:first-child), li:active:not(:first-child), li:focus:not(:first-child) {
		border-top: 1px solid #9a1131 !important;	
		background-color: #d7254f !important; 
		-webkit-transition-property: background;
  		-webkit-transition-duration: 0.5s;
	}

	a, span:hover {
		color: white !important;
	}

	li:first-child {
		background-color: #313131;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		border-top: 0px;
	}

	li:nth-child(even) {
		background-color: #3e3e3e;
		border-top: 1px solid #525252;
	}

	#imprint {
		position: absolute;
		bottom: 0px;
	}

	#pi {
		bottom: 25%;
	}
	
	.header {
		padding-top: 0px !important;
		padding-bottom: 1px !important;
	}
}

@media screen and (min-width: 800px) {

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #333333;
	}

	li {
		user-select: none;
		float: left;
		margin: 0 15px 0 15px;
		font-size: 1rem;
	}

	li:first-child {
		margin-left: 10px;
	}

	#pi {
		top: 47%;
	}

}

.app-dark {
   background-color: #3e3e3e;
   width: 100%;
   height: 100%;
}

.app-dark.animate {
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.5s;
}

.app-white {
   background-color: #fbfaf9;
   width: 100%;
   height: 100%;
}

.app-white.animate {
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.5s;  
}


.imprint-dark {
   filter: invert(1);
}

#pi-icon {
  height: 16px;
  width: 16px;
  background-image: url(logo.png);
  background-size: cover;
  margin-top: 2px;
}

#pi {
   z-index: 100;
   position: fixed;
   /* top: 47%; */
   left: 50%;
   margin-left: -100px;
   margin-top: -126px;
   height: 253px;
   width: 200px;
   background-image: url(pi.png);
}

.pi-dark {
   filter: brightness(5);
}

.header {
   position: fixed;
   width: 100%;
   z-index: 200;
   background-color: #313131;
   margin-top: 0px;
   color: white;
   word-spacing: 25px;
   border-bottom: 1px solid #fbfaf9;
   white-space: nowrap;
   padding: 5px 5px 5px 0px;
}

.header-dark {
   border-bottom: 1px solid #525252 !important;
   -webkit-transition-property: border;
   -webkit-transition-duration: 1s;
}

.header img {
   margin: -1px -12px -3px 0px;
}

.header a {
   color: white;
}

.header a:hover {
   color: #bc1142;
}

#close a {
   color: rgb(233,233,233);
   text-shadow: 1px 1px rgb(41,41,41);
   float: right;
   margin-right: 20px;
}

#close a:hover {
   color: #bc1142;
}

#content {
   z-index: 300;
   position: fixed;
   top: 29px;
   padding: 5px 5px 5px 5px;
   color: rgb(224,224,224);
   text-shadow: 1px 1px rgb(60,60,60);
   margin-top: -5px;
   background-color: rgb(82,82,82);
   border-bottom: 1px solid rgb(60,60,60);
   border-right: 1px solid rgb(60,60,60);
   border-top: 1px dotted rgb(121,121,121);
   width: 100%;
   white-space: nowrap;
}

.link:hover {
  color: #bc1142;
  cursor: pointer;
}

#imprint {
   position: absolute;
   bottom: 0px;
   padding: 0 0 1em 1em;
}