/* _______________________________________________ALLGEMEIN____________ */

html,body{
width:95vw;
height:101vh;
margin:0;
padding:0;
font-family:"Modern No. 20", "Times New Roman", "Times", "Georgia", serif; 
}


/* _______________________________________________VERLAUF____________ */

#background{

background-image:url("img/Verlauf.png");
background-repeat:repeat-x;
background-position:top 0 left 0;
background-size:5px 190vw;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
}

/* _______________________________________________Trennlinie___________ */

#trennung{
position:fixed;
top:33vw;
width:100vw;
height:1.2vw;
border-top:0.5vw solid white;
border-bottom:0.2vw solid white;
}

/* _______________________________________________Tanzpaar____________ */

#tanzpaar{
background-image:url("img/Tanzpaar_Schatten.png");
background-repeat:no-repeat;
background-position:left 0 top 0;
background-size:100vw;
position:fixed;
top:25vw;
left:0;
width:100vw;
height:100vh;
}

/* ______________________________________________Post-it_______________ */
#postit{
background-image:url("img/Postit.png");
background-repeat:no-repeat;
background-position:left 0 top 0;
background-size:20vw;
position:fixed;
top:35vw;
left:47vw;
width:100vw;
height:100vh;
}

/* _______________________________________________ANREISSER____________ */

#anreisser1{
position:fixed;
width:100vw;
height:100vh;
background-repeat:no-repeat;
background-position:right 0 top 0;
background-image:url("img/Willkommen.png");
background-size:90vw;
top:8vw;
left:-5vw;
}


#anreisser2{
position:fixed;
width:100vw;
height:100vh;
background-repeat:no-repeat;
background-position:right 0 top 0;
background-image:url("img/antanzen.png");
background-size:90vw;
top:118vw;
left:-5vw;
}

/* _______________________________________________Button____________ */

#button a{
position:fixed;
width:20vw;
height:20vw;
left:40vw;
top:100vw;
border-radius:1vw;
border:0.15vw solid black;
background-size:100% 100%;
background-repeat:no-repeat;
background-image:url("img/Takt7.png");
animation-duration: 8s;
animation-name: takt;
animation-iteration-count: infinite;
display:block;
text-indent:-9999px;
text-decoration:none;
}

#button:hover{
border-color:white;
}

/* _______________________________________________Lauftext____________ */
#ticker {
position:fixed;
height:3vw;
top:2.5vw;
right:0vw;
left:0vw;
color:white;
font-size:5vw;
}

#ticker a{
color:white;
}

/* _______________________________________________ANIMATION____________ */

@keyframes takt {
   11% {
  background-image:url("img/Takt6.png");
  }
   22% {
   background-image:url("img/Takt1.png");
  }
    33% {
   background-image:url("img/Takt2.png");
  }
    44% {
   background-image:url("img/Takt3.png");
  }
    55% {
   background-image:url("img/Takt4.png");
  }
   66% {
  background-image:url("img/Takt5.png");
  }
   77% {
  background-image:url("img/Takt6.png");
  }
   100% {
  background-image:url("img/Takt7.png");
  }
}