@charset "utf-8";

@font-face {
    font-family: "Freestyle Script", Verdana;
    /*font-style:  normal;
    font-weight: normal;  */
    src: url(images/FREESCPT.eot), url(images/FREESCPT.TTF);
  }

@font-face {
font-family: "Bauhaus 93";
    /*font-style:  normal;
    font-weight: normal;  */
src: url(images/BAUHS93.eot), url(images/BAUHS93.TTF);
  }
  
@keyframes h1animation {
  0%   {color:black; left:0px; top:500px;}
  50%  {color:white; left:0px; top:0px;}
  100% {color:black; left:0px; top:-500px;}
}

@keyframes h2animation {
  0%   {color:black; left:-1000px; top:0px;}
  100% {color:white; left:0px; top:0px;}
  }
@keyframes h3animation {
  0%   {color:black; right:-1000px; top:0px;}
  100% {color:white; right:0px; top:0px;}
  }
/*
@keyframes h4animation {
  0%   {color:black; left:0px; top:500px;}
  100% {color:white; left:0px; top:0px;}
}
*/
@keyframes drehung {
    0% { transform: rotate3d(1, 1, 1, -120deg); }
  100% { transform: rotate3d(1, 1, 1, 0deg); }
  
}
 
@keyframes drehung2 {
    0% { transform: rotateY(90deg); }
  100% {     transform: rotateY(0deg); }
}

@keyframes colorchange {
  from {color: black;}
  to {color: white;}
}

@keyframes colorchangeB {
  from {background-color: black;}
  to {background-color: white;}
}

@keyframes colorchangeR {
  from {color: white;}
  to {color: black;}
}

* {
	margin: 0px;
	padding: 0px;
}

p {
	
	
	}

div {
	border: 0px solid white;
	scroll-behavior: smooth;
}

body {
	background-color: black;
	color: white;
	font-family: "Bauhaus 93";	
	font-size: 100%;
}

body article h4 a {
	text-decoration: none;
	color: white;
	animation-name: colorchange;
	animation-duration: 10s;
}

body article h4 a:visited {
	color: white;
	text-decoration: none;
}

#body {
	z-index: -1;
	position: fixed;
	width: 100%;
	height: 100%;
	
}

body #center a {
	text-decoration: none;
	color: white;
	animation-name: colorchange;
	animation-duration: 10s;
}

body #center a:visited {
	text-decoration: none;
}

 
h1 {
	letter-spacing: 2px;
	font-weight: normal;
	color: black;
	position: relative;
	animation-name: h1animation;
	animation-duration: 10s;
}

h2 {
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 150%;
	color: black;
  	position: relative;
	left: -1000px;
	animation-name: h2animation;
	animation-delay: 6s;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
  }

h3 {
	letter-spacing: 2px;
	font-weight: normal;
	font-size: 150%;
	color: black;
  	position: relative;
	right: -1000px;
	animation-name: h3animation;
	animation-delay: 6s;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}

h4 {
	letter-spacing: 2px;
	font-size: 150%;
	font-weight: normal;
	color: black;
  	position: relative;
	animation-name: colorchange;
	animation-duration: 4s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
}

h5 {
	letter-spacing: 2px;
	font-size: 150%;
	font-weight: normal;
	color: white;
  	position: relative;
	animation-name: drehung2;
	animation-duration: 4s;
}

header { 
	z-index: 0;
	position: fixed;
	top: 0px;
	width: 100%;
	max-height: 10%;
	font-family: "Bauhaus 93";
	font-size: 140%;
	letter-spacing: 1px;
	background-color: black;
}

header a {
	width: 100%;
	color: white;
	text-decoration: none;
}

header a:visited {
	color: white;
	text-decoration: none;
}

.site {
}

p {
	font-family: "verdana";
	animation-name: colorchange;
	animation-duration: 10s;
	margin: 1px;
	padding: 1px;
}

p a {
	animation-name: colorchange;
	animation-duration: 10s;
	}

#li1 {
	}
#li2 {
}
#li3 {
}
#li4 {
}

article {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: space-around;
	background-color: black;	
	align-items: center;	
}


#center {
	z-index: -2;
	width: 100%;
	height: 100%;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;	
}

#intro {
}

#lo {
}


#ro {
	

}

#lu {
	
}

#ru {
	
    }

section {
	text-align: center;
}

section:first-of-type {

	
}

section:target {
		
}

footer {	
	
}


#ende {
max-height: 5%;
	background-color: black;
width: 100%;
text-align: right;
		z-index: 0;
	position: fixed;
	bottom: 0%;
	right: 0%;

}

#ende a {
			color: black;
animation-name: colorchange;
  animation-delay: 2s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
    animation-timing-function: ease-in;
height: 100%;
font-size: 80%;
}