ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    
    
  }
  
  
  li {
    float:left;
    
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover {
    background-color: hotpink;
    color: white;
  }
  
  .active {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color:rgb(250, 167, 225);
  }
  
  ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Orbitron', sans-serif;
  }
  
  
  li a {
    display: block;
    text-align: center;
  }


body{
    font-size:16px;
    background-color: black;
    background-image: url(/julia_kagerbauer/images/background_song.svg);
    background-size: cover;
    height: 5160px;

}

.block{ overflow:hidden; padding: 70px 0; position:relative;}

.container1 {
    margin:20px 0; 
    color:#fff; 
    font-size:26px; 
    font-family: 'Orbitron', sans-serif;  
    font-weight: 100;
    text-align:center;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
}

p{
    margin: 0;
}

.container1:hover > .satz1 { text-align: left;}
.container1:hover > .satz2 { text-align: right;}  
.container1:hover > .satz3 { text-align: left;} 
.container1:hover > .satz4 { text-align: right;} 
.container1:hover > .satz5 { text-align: left;} 
.container1:hover > .satz6 { text-align: right;} 
.container1:hover > .satz7 { text-align: left;}  
.container1:hover { color:rgb(0, 0, 0);}

.container2 {
    margin:20px 0; 
    color:#fff; 
    font-size:26px; 
    font-family: 'Orbitron', sans-serif;  
    font-weight: 100;
    text-align:center;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
}

p{
    margin: 0;
}

.container2:hover > .satz1 { text-align: left;}
.container2:hover > .satz2 { text-align: right;}  
.container2:hover > .satz3 { text-align: left;} 
.container2:hover > .satz4 { text-align: right;} 
.container2:hover > .satz5 { text-align: left;} 
.container2:hover > .satz6 { text-align: right;} 
.container2:hover > .satz7 { text-align: left;}  
.container2:hover { color: black; }

h1{margin:0; line-height: 100px;text-align: center; font-size: 96px;}

.block1{background: transparent;}
.block1  h1{font-family: 'Orbitron', sans-serif;  color:rgba(0, 0, 0, 0);letter-spacing:.4rem;font-style: italic; 

text-shadow:-2px 0 1px #0f0f0f, -4px 0 0 #000000,  -6px 0 1px #fff,-6px 1px 1px #fff,-6px 2px 1px #fff, 0px 2px 1px #fff, 0px 1px 0px #fff, 0px 0 1px #fff,-6px -1px 1px #fff,
    -6px -2px 0px #fff, 0px -1px 0px #fff
    ,-1px -2px 0px #fff, 1px -1px 1px #fff,  1px -1px 1px #fff,-4px -2px 0px #fff,-3px -2px 0px #fff,-4px 2px 1px #fff, -3px 2px 1px #fff,

-6px 8px 0px #9B708E, -5px 7px 0px #9B708E, -4px 6px 0px #9B708E, -3px 5px 0px #9B708E, -2px 4px 0px #9B708E, -1px 3px 0px #9B708E, 0px 2px 0px #9B708E, 1px 1px 0px #9B708E,0px 3px 0px #9B708E,-8px 8px 0px #9B708E,
    
    
    -6px 8px 0px #715169,-6px 9px 0px #715169, -6px 10px 0px #715169, -6px 11px 0px #715169, -6px 12px 0px #B290A9, -6px 13px 0px #B290A9, -6px 14px 0px #B290A9, -6px 15px 0px #B290A9, -6px 16px 0px #B290A9, -6px 17px 0px #B290A9, -6px 18px 0px #B290A9, -6px 19px 0px #B290A9, -6px 20px 0px #B290A9, -6px 21px 0px #B290A9, -6px 22px 0px #B290A9;}

h1 {
    animation: titel 1s ease-in-out infinite alternate;
   transform-origin: bottom;
 }

 .container1, .container2 {
   animation: lyrics 1s ease-in-out infinite alternate;
   transform-origin: bottom;
 }

    @keyframes titel {
    from{
        transform: translateY(3%) scaleY(1);
        }
        to{
        transform: translateY(0%) scaleY(1.1);
        }

}

@keyframes lyrics {
    from{
        transform: translateY(3%) skewY(-5deg);
        }
        to{
        transform: translateY(0%) skewY(5deg);
        }

}