body{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
}

.header{
    font-size: 18vw;  
    color: #fff;
    font-weight: bold;
    text-align: center;
 
  }

section.sec1{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    background-size: cover ;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

nav
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.26);
    padding: 0 100px;
    box-sizing:border-box;
}

nav .brand{
    float: left;
    height: 100%;
    line-height: 70px;

}

nav .brand h2{
     margin: 0;
     padding: 0;
     color: #fff; 
}

nav ul{
    float: right;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li{

    list-style: none;
    
}
nav ul li a {
    position: relative;
    display: block;
    height: 70px;
    line-height: 70px;
    padding:  0 20px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: .5s;

}
nav ul li a:hover
{
    color: #262626;
  
}
nav ul li a:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s;
    z-index: -1;

}
nav ul li a:hover:before
{
    transform-origin: left;
    transform: scaleX(1);

}

.spotify {
    display      : flex;
    width        : 80px;
    height       : 80px;
    position     :relative;
    top          : 10vh;
    left         : 89vw;
    border-radius: 50px;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 4em;

    color: white;
    margin-left: 0em;
    border: 2px black;
    margin-left: 2em;
    z-index: 1;


}

h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 2em;
    margin-top: 45em;
    color: white;
    margin-left: 3em;
    align-content: center;
    border: 2px black;
    z-index: 11;

}

.hundred {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 5em;
    margin-top: 3em;
    color: white;
    margin-left: 3em;
    border: 2px black;

}

.box {
    width: 200px;
    height: 200px;
    margin-left: 80em;
    margin-top: 10em;
    position: fixed;
    
}



.sun {
    background: linear-gradient(180deg, #FFE032 0%, #E0A925 19%, #8A1500 68.22%, #420900 95.85%);
    border-radius: 50%;
    top: 0;
    left: 0;
    width: 50vh;
    height: 50vh;
    position: fixed;
    align-items: center;
    margin-left: 72vw;
    
    
}

.backround {
    background: linear-gradient(0.87deg, #710882 0.75%, #14153F 98.14%);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    
}

.platzhalter {

    width: 10em;
    height: 3em;
  
}

.wolke{

    width: 25vw;
    position: fixed;
    flex-direction: column;
    top: 0vw;
    left: 0vw;
    border: 0px solid black;
    z-index: 100;

}

.gross{
    width: 240vw;
    height: auto;
    top: 0;
    left: 0;
    animation-name: meineAnimation;
    animation-duration: 250s;
    animation-iteration-count: infinite;
    z-index: -5;
    
}

.sun {
    animation-name: sun;
    animation-duration: 150s;
    animation-iteration-count: infinite;
    z-index: -2;
}

@keyframes sun {

    0%{
        transform: translateY(52vw);
    }

    100%{
        transform: translateY(-27vw);
    }

}

@keyframes meineAnimation {
    0% {
        transform: translateX(-200vw);
    }
    100% {
       transform: translateX(100vw);
    }
}





.wavy {
    position: relative;
    -webkit-box-reflect: below 12px linear-gradient(transparent,rgba(0,0,0,0.2));

}

.wavy span{
    position: relative;
    display: inline-block;
    font-size: 1em;
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
    animation-duration: 5s;
}

@keyframes animate{

    0%{
         transform: translateX(0px);
     }
    20%{
        transform: translateX(-50px);
    }
    40%,100%{
        transform: translateX(00p);
    }




}

.center
{
    display: inline;
}

ul{
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 14.4em;
    margin-top: -1.18em;
    
}

ul li{
    list-style: none;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 10px;
    filter: blur(0px);
    

}
ul.blow li
{
    animation: smoke 3s infinite linear;
    top: 0;
    left: 0;

    
}


@keyframes smoke
{
    0%
    {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter: blur(0px);
        color: rgb(255, 255, 255);

    }
    100%
    {
        transform: rotate(45deg) translateY(-200px);
        opacity: 0;
        filter: blur(20px);
        color: crimson;
    }
}
ul li:nth-child(1)
{
    animation-delay: 0s;
}
ul li:nth-child(2)
{
    animation-delay: .4s;
}
ul li:nth-child(3)
{
    animation-delay: .8s;
}
ul li:nth-child(4)
{
    animation-delay: 1.2s;
}
ul li:nth-child(5)
{
    animation-delay: 1.6s;
}


.loader{
    position: absolute;
    transform: translate(-50% -50%);
}
.loader li1{
    margin: 0;
    padding: 0;
    font-size: 1em;
    color: rgb(255, 255, 255);
    background-image: url(../1.png);
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    background-clip: unset;
    animation: animate3 15s linear infinite;

}

@keyframes animate3{

    0%{
        background-position: left 0px top 80px;
    }
    40%{
        background-position: left 800px top -50px;
    }
    80%{
        background-position: left 1800px top -50px;
    }
    100%{
        background-position: left 2400 top 80;
    }
}

.abstand1{
    margin-top: 20vw;   
}

.abstand2{
    margin-top: 50vw;   
}


.Low {
    animation-name: Low;
    animation-duration: 6s;
    animation-delay: 0s;
    float:right;
    margin-right: 32vw;
    animation-iteration-count: infinite;
   

}

@keyframes Low{

    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    transform: translateY(0vw);
           
    }
    100%{
        transform: translateY(10vw);
        opacity: 0;
    }
}



.wavyy {
    position: relative;
    -webkit-box-reflect: below 12px linear-gradient(transparent,rgba(12, 2, 58, 0.2));
    background: url(process/1.png);

}

.wavyy span{
    position: relative;
    display: inline-block;
    font-size: 2em;

    animation: wavy  ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
    animation-duration: 10s;
}

@keyframes wavy{

    14.28%{
        transform: translateY(0px);
    }
    28.56%{
        transform: translateY(20px);
    }
    42.84%{
        transform: translateY(00px);
    }
    57.12%{
        transform: translateY(20px);
    }
    71.4%{
        transform: translateY(0px);
    }
    85.68%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }




}

.container{
    text-align: center;
    margin: 200px auto 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom: -10em;

}

.container span{
    font-size: 10vw;
    color: rgb(224, 127, 0);
    font-weight: bold;
    position: relative;
    text-shadow: -10px 0 0 rgba(0,0,0,.2);
}

.container span:before
{
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    color: #fff;
    transition: 05s cubic-bezier(0,1.72,.94,.66);
    transform: rotateY(20deg);
}

.container span:after
{
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    color: rgba(0,0,0,.1);
    transition: 05s cubic-bezier(0,1.72,.94,.66);
    transform: rotateY(5deg) scale(1.07 , 1) skewY(3deg);
    opacity: .5;

}

.container span:hover:before
{
    transform: perspective(1000px) rotateY(-50deg);
}
.container span:hover:after
{
    transform: rotateY(deg) scale(1.1 , 1) skewY(6deg);}


.transform{
    display: block;
    padding: 0;
    margin: 0;
    animation-name: move;
    animation-duration: 10s;


}

@keyframes move{
    
    0%{
        transform: translateX(-10em);
        scale: 1;
        color: rgb(0, 0, 0);
    }

    50%{
        scale: 1.5;
        transform: translateX(0em);
        color: rgb(255, 255, 255);
        
    }

    100%{
        scale: 1;
        transform: translateX(20vw);
        color: rgba(0, 0, 0, 0);
       
    }

}

.first{
    animation-delay: -2s;
    opacity: 0.25;
    animation-name: move;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

.second{
    animation-delay: 1.2s;
    opacity: 0.5;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.third{
    animation-delay: -1.5s;
    opacity: 0.2.5;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.third{
    animation-delay: 2s;
    opacity: 0.3;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.fourth{
    animation-delay: 2.5s;
    opacity: 0.4;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.fifth{
    animation-delay: 3s;
    opacity: 0.5;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.sixth{
    animation-delay: 3.5s;
    opacity: 0.6;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.seventh{
    animation-delay: 4s;
    opacity: 0.7;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.eigth{
    animation-delay: 4.5s;
    opacity: 0.8;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.eigth{
    animation-delay: 5.2s;
    opacity: 0.9;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.ninth{
    animation-delay: 5.6s;
    opacity: 1;
    animation-name: move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


.alone
{
    animation-name: alone;
    animation-iteration-count: infinite;
    animation-duration: 13s;
}

.alonee{
    animation-name: alonee;
    animation-iteration-count: infinite;
    animation-duration: 13s;
}

@keyframes alone {
    0%{
        opacity: 1;
    }

    30%{
        opacity: 0;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }

}

@keyframes alonee{
    0%{
        transform: translateX(0);
    }

    30%{
        transform: translateX(40vw) translateY(-3vw);
    }

    70%{
        transform: translateX(40vw) translateY(-3vw);
    }


    100%{
        transform: translateX(0);
    }

}