index.css

/*
 * Best practices for full screen renderer
 */
@font-face {
	font-family: 'Lekton';
	src: url(Lekton/Lekton-Regular.ttf);
        }
body
{
	background-color: rgba(255,255,255,1);
	margin: 0 -3px 0 0; //this fixes a browser bug that creates useless scrollbars
	font-family: sans-serif;
        //overflow:hidden; //prevent scrollbars
        height: 100vh;
        font-family: 'Lekton';
        
}

.headline {
    font-size: 20;
    position: absolute;
    left: 50%;
    top: 10px;
    z-index: 10;
     transform: translate(-50%, 0%);
    -webkit-transform:translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    background: rgba(10,10,0,0.2);
    font-family: Arial;
    color: #ffffff;
     padding: 10px 20px 10px 20px;
       -webkit-border-radius: 19;
  -moz-border-radius: 12px;
  border-radius: 12px;
    
}

.headline .link {
    color: rgba(0,0,0,1);
    text-decoration: none;
    cursor: pointer;
    display: block;
}

.headline a:visited
{
	color: rgba(100,200,230,255);
	//background-color: rgba(240,50,50,0.9);
	text-decoration: underline; 
}

.btn {
  background: #750d7a;
  background-image: -webkit-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -moz-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -ms-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -o-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: linear-gradient(to bottom, #750d7a, #2bb8b8);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  font-family: Arial;
  color: #ffffff;
  font-size: 48px;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
}

.btn:hover {
  background: #c90e8e;
  background-image: -webkit-linear-gradient(top, #c90e8e, #34d99c);
  background-image: -moz-linear-gradient(top, #c90e8e, #34d99c);
  background-image: -ms-linear-gradient(top, #c90e8e, #34d99c);
  background-image: -o-linear-gradient(top, #c90e8e, #34d99c);
  background-image: linear-gradient(to bottom, #c90e8e, #34d99c);
  text-decoration: none;
}

.dropdown {
    position: fixed;
    display: inline-block;
    z-index: 10;
   background: #750d7a;
  background-image: -webkit-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -moz-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -ms-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: -o-linear-gradient(top, #750d7a, #2bb8b8);
  background-image: linear-gradient(to bottom, #750d7a, #2bb8b8);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  
  
}

.dropdown:hover .panel {
    display: block;
      background: #2d2d2d	;

  text-decoration: none;

         -webkit-border-radius: 19;
  -moz-border-radius: 12px;
  border-radius: 12px;
  
border-style: outset;

  background: #648880;
  background: linear-gradient(to right, #360033,  #0b8793);

}

#dropdown{
    top: 10px;
    left: 10px;
}

.panel {
    display: none;
    position: fixed;
    left: 0px;
    width: 300px;
    height: 100%;
    overflow: auto;
    background: #fafafa;
    box-sizing: border-box;
	


}


#panel #content {
    padding: 0px 20px 20px 20px;
}

#viewer {
    position: absolute;
    border: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

#panel #content .link {
    color: #ffffff	;
    text-decoration: none;

    cursor: pointer;
    display: block;
}

h1 {
    margin-top: 30px;
    margin-bottom: 40px;
    margin-left: 20px;
    font-size: 25px;
    font-weight: normal;
	color: #ffffff;
}


    Regeln
    Berechnet
    Animationen
    Schriftarten

Element {

}
h2 {

    font-size: 20px;
    font-weight: normal;
	color: #ffffff;

}

.CanvasDiv
{
	position:absolute; 
	top:0; 
	left:0;
	width: 100vw; //100% view width
	height: 100vh; //100% view height
        z-index:1
}

.main{position:absolute;}

.main a:link
{
	color: rgba(0,0,0,1);
	//background-color: rgba(240,50,50,0.9);
	text-decoration: underline; 
}

.main a:visited
{
	color: rgba(0,0,0,1);
	//background-color: rgba(240,50,50,0.9);
	text-decoration: underline; 
}

.TextDiv
{
	position:absolute; 
	top:0; 
	left:0;
	width: 100vw;
	height: 100vh;
        background-color: rgba(255,255,255,0);
	z-index: -1;
}


.tracks
{
        position: absolute;
        border:1px solid rgba(255,0,0,1);
        padding: 15px;
        background: none repeat scroll 0% 0% #000;
        border-radius:30px;
        color: rgba(240,240,240,1);
        text-align:justify;
        width: 40%;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
        z-index: 3;
        Transform: matrix(0.0000,0.0000,0.0000,0.0000,0, 0);
        Transform-origin:center;
        
}

.buttons
{
        position: absolute;
        border:1px solid rgba(255,0,0,1);
        padding: 15px;
        background: none repeat scroll 0% 0% #000;
        border-radius:30px;
        color: rgba(240,240,240,1);
        text-align:justify;
        width: 30px;
        height: 30px;
        z-index: 3;
        Transform: matrix(0.0000,0.0000,0.0000,0.0000,0, 0);
        Transform-origin:center;
        
}