body, html{
	
	background:white;
	color:black;
	height:100%;
	font-family:'Raleway',sans-serif;
	margin:0;
	_animation-name: bgcolor;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
}

header {
	width:90%;
	margin:auto;
}



h1,h2,h3,p {
	border:0;
	margin:0;
	padding:0;
	float:none;
}


h1 {
	width:100%;
	margin: auto;
	max-width: 850px;
	font-family: Courier New, Courier, monospace;
	color: black;
	text-align:center;
	font-weight:normal;
	font-size:16pt;	
}

h2 {
    width:100%;
    margin: auto;
    font-family: Courier New, Courier, monospace;
    color: black;
    text-align:left;
    font-weight:normal;
    font-size:12pt; 
}

.topletters {
    width:90%;
    height:70%;
    margin:auto;
    overflow:hidden;
    _border:solid 1px red;
}

h3 {
    width:100%;
    margin: auto;
    font-family: Courier New, Courier, monospace;
    color: black;
    text-align:left;
    font-weight:normal;
    font-size:750%; 
   
    padding:0;

}



p {
	width:100%;
	margin: auto;
	font-family: Courier New, Courier, monospace;
	color: black;
	text-align:left;
	font-style:italic;
	font-size:11pt;	
      _border:solid 1px red;
}


#audioplayer {
    width:90%;
    margin:auto;
    text-align:right;
    padding-top:-5px;
    padding-bottom:15px;
    _border:solid 1px red;
}


button {
    border-radius:1px;
    background-color:white;
    width:150px;
    font-family: Courier New, Courier, monospace;
    color: black;
    text-align:center;
    font-size:9pt; 
}

input {
        width:150px;
        position:relative;
        top:5px;

        }
        
        label {
        display:inline-block;
       width:150px;
        font-family: Courier New, Courier, monospace;
    color: black;
    text-align:center;
    font-size:10pt; 
        }



.embed-container {
    top:0%;
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 70%;
  height:auto;
  max-width:800px;
  max-height:460px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
  _border: solid 1px red;

}
.embed-container iframe {
position: absolute; 
  top: 5%; 
  left: 0%; 
  width: 100%; 
  height: 100%; 
  max-width:800px;
  max-height:460px;
   margin-left:auto;
  margin-right:auto;
  margin-bottom:0;
}

.intro{
    width:90%;
	text-align:right;
    padding-right:5%;
}

.info{
    text-align:right;
    font-style:normal;
}

.outro{
    text-align:center;
    font-style:normal;
    width:90%;
}




.einpic{
	width:98%;
    margin:auto;
    _border:solid 1px red;
    text-align:center;
}

.einpic img {
	display:inline-block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:2%;
}








.floatstopper{
	clear:both;
}

.abstand {
	width:90%;
	margin:auto;
	height:4%;
}

.abstandtop {
	width:100%;
	height:15%;
}



hr {
    _border:solid 1px red;
}














@keyframes eeee {
    50%   {left:0px; top:0px;}
    50.5%  {left:50px; top:0px;}
    51%  {left:50px; top:50px;}
    51.5%  {left:0px; top:50px;}
    52% {left:10px; top:10px;}

    88%   {left:10px; top:10px;}
    90%  {left:-50px; top:0px;}
    92%  {left:-70px; top:-30px;}
    94%  {left:0px; top:30px;}
    96% {left:0px; top:0px;}

}

@keyframes aaaa {
    0%   {color:black;}
    35%  {color:white;}
    65%  {color:white;}
    100% {color:black;}
}

@keyframes textblink {
    65.5%  {opacity:1;}
    66%  {opacity:0;}
    66.5%  {opacity:1;}
    67%  {opacity:0;}
    67.5%  {opacity:1;}


    90%  {opacity:1;left:0px;top:0px;}
    90.3%  {opacity:0;left:-30px;top:0px;}
    90.6%  {opacity:1;left:0px;top:0px;}
    90.9%  {opacity:0;left:-60px;top:0px;}
    91.2%  {opacity:1;left:0px;top:0px;}
    91.5%  {opacity:0;left:35px;top:0px;}
    91.8%  {opacity:1;left:0px;top:0px;}
    92.1%  {opacity:0;left:-20px;top:0px;}
    92.4%  {opacity:1;left:0px;top:0px;}
    92.7%  {opacity:0;left:-90px;top:0px;}
    93%  {opacity:0.8;left:0px;top:0px;}
}

@keyframes bgcolor {
	54%  {background:white;}
    54.4%  {background:yellow;}
    54.8%  {background:white;}
     55.2%  {background:pink;}
    55.6%  {background:white;}
     56%  {background:yellow;}
    56.4%  {background:white;}

    90%  {background:white;}
    90.3%  {background:red;}
    90.6%  {background:white;}
}

@keyframes headingsize{
	55%  {top:0px;left:0px;}
     55.2%  {top:-10px;left:-5px;}
     55.4%  {left:5px;}
     55.8%  {left:0px;}
    56.2%  {top:0px;left:0px;}

}

span.rotationtest {
	display:inline-block;
}

@keyframes rotationtest {
    52%   {transform:rotate(0deg);}
    54%  {transform:rotate(360deg);}
    56%  {transform:rotate(0deg);}
    58%  {transform:rotate(360deg);}
    60%  {transform:rotate(0deg);}
    62%  {transform:rotate(360deg);}
    62.1%  {transform:rotate(0deg);}
    79% {text-decoration:none;} 
    79.5% {text-decoration:overline;} 
   	80% {text-decoration:line-through;} 
   	80.5% {text-decoration:underline;} 
   	81% {text-decoration:none;} 
   	81.5% {text-decoration:underline;} 
   	81.6% {opacity:1;}
   	
   	82% {text-decoration:none;} 
   	82.2% {opacity:0;} 
   	
   	82.5% {text-decoration:underline;} 

   	83% {text-decoration:none;} 
   	 83.4% {opacity:1;}  
   	83.5% {text-decoration:underline;} 
   	84% {text-decoration:none;} 
   	84.5% {text-decoration:underline;} 
   	85% {text-decoration:none;} 
}

.rotationtest {
	animation-name: rotationtest;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}


h1,h2,p {
	position:relative;
	 animation-name: textblink;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

h1 {
	 animation-name: headingsize;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.aaaa{
	 animation-name: aaaa;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    _animation-direction: alternate;
    animation-timing-function: linear;

}

.eeee {
    position: relative;
    animation-name: eeee;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    _animation-direction: alternate;
    animation-timing-function: ease;
}












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

	.abstand {
	height:10%;
	}

	p.intro{
	width:98%;
}

p.things {
	width:98%;
}

h1 {
	width:98%;

}

h2 {
	width:98%;

}




.topletters {
    height:auto;
    _border:solid 1px black;
}

h3{
 font-size:400%; 
}

.einpic img {
	width:95%;
}




#audioplayer {
    width:90%;
    height:auto;
    margin:auto;
    text-align:center;
    padding-top:-5px;
    padding-bottom:15px;
    _border:solid 1px red;
}


button {
    display:inline-block;
    border-radius:1px;
    background-color:white;
    width:80%;
    height:50px;
    margin:auto;
    font-family: Courier New, Courier, monospace;
    color: black;
    text-align:center;
    font-size:9pt; 
}

input {
        display:none;

        }
        
 label {
        display:none}

 }