@charset "UTF-8";
.body{

}
.aboutus{
  background: black;
}
.haus{
  position: fixed;
  top:2%;
  left:2%
}
.haus1{
  position: fixed;
  top:2%;
  left:2%
}
.first_pic{
  background-image:url("/pic/alle.png");
  background-repeat:no-repeat;
  height: 960px;
  width: 1440px;
  z-index: -8;
  margin-top: -8%;
}
.header_aboutus{
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: center;
  margin-top: -5%;
}
.second_pic{
  background-image:url("/pic/leila.png");
  background-repeat:no-repeat;
  height: 960px;
  width: 1440px;
  z-index: -2;
}
.titel_leila{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  margin-left: 15%;
  margin-top:15%;

}
.leila{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: left;
  margin-left: 15%;
  margin-top: 27%;
}
.third_pic{
  background-image:url("/pic/raphi.png");
  background-repeat:no-repeat;
  height: 960px;
  width: 1440px;
  z-index: -2;
}
.titel_raphi{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: right;
  margin-left: 60%;
  margin-top: 10%;
}
.raphi{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: right;
  margin-left: 50%;
  margin-top: 35%;
}
.fourth_pic{
  background-image:url("/pic/phil.png");
  background-repeat:no-repeat;
  height: 960px;
  width: 1440px;
  z-index: -2;
}
.phil_titel{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  margin-left: 2%;
  margin-top:15%;
}
.phil{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: left;
  margin-left: 2%;
  margin-top: 27%;
}
.fifth_pic{
  background-image:url("/pic/laura.png");
  background-repeat:no-repeat;
  height: 960px;
  width: 1440px;
  z-index: -2;
}

.laura_titel{
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: left;
  margin-left: 40%;
  margin-top: 15%;
}
.hier{
  font-family: "Oswald";
  color: #993333;
  font-size: 8rem;
  text-align: center;
  margin-top:-6%;
}
.laura{
  text-shadow: 0.3rem 0.3rem black;
  position: absolute;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: left;
  margin-left: 40%;
  margin-top: 30%;
  z-index: 0;
}

a{
  font-family: "Oswald";
  color:#999999;
  text-decoration: none;
}

.header{
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: center;
  margin-top: -4%;
}
.wrapper{
  display: flex;
  flex-direction: row;
}
.notenzeile{
  position:absolute;
  margin-top:-15%;
  z-index: -1;
}
.notenschlussel{
position:absolute;
 z-index: 1;
 margin-top: 3%;
 margin-left: 10%;
}

.info{
  position:absolute;
  z-index: 2;
  margin-left: 22%;
  margin-top: 6%;
}
.about{
  position:absolute;
  z-index: 3;
  transform: rotate(180deg);
  margin-left: 32%;
  margin-top: 4%;


}
.quiz{
position:absolute;
margin-left: 38%;
  margin-top:-5%;

}
.break{
  position:absolute;
  margin-top:4.5%;
  margin-left: 61%;
}

.faq{
  position:absolute;
  margin-top:3%;
  margin-left:74%;
}
.untertitel{
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  text-align: center;
  font-size: 3rem;
  margin-top: 12%;
}
.replace{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 40%;
  margin-top: 26%;
  display: none;
}
.replace1{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 34%;
  margin-top: 26%;
  display: none;
}
.replace2{
  position: absolute;
  text-shadow: 0.3rem 0.3rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 42%;
  margin-top: 26%;
  display: none;
}
.replace3{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 42%;
  margin-top: 26%;
  display: none;
}
.replace4{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 39%;
  margin-top: 26%;
  display: none;
}
.replace5{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 30%;
  font-size: 3rem;
  margin-left: 41%;
  margin-top: 26%;
  display: none;
}
.untertext{
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  margin-left: 30%;
  margin-top: ;

}
.untertext1{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 32%;
  font-size: 2rem;
  margin-left: 24%;
  margin-top: %;
  display:none;
}
.untertext2{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  margin-top: 32%;
  font-size: 2rem;
  margin-left: 15%;
  display: none;
}
.untertext3{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  margin-left: 27%;
  margin-top: 32%;
  display: none;
}
.untertext4{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  margin-left: 29%;
  margin-top: 32%;
  display: none;
}
.untertext5{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";

  font-size: 2rem;
  margin-left: 24%;
  margin-top: 32%;
  display: none;
}
.untertext6{
  position: absolute;
  text-shadow: 0.1rem 0.1rem black;
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  margin-left: 20%;
  margin-top: 32%;
  display: none;
}
.header_frage{
  font-family: "Oswald";
  color: #999999;
  font-size: 4rem;
  text-align: center;
}
.notes {
display: flex;
flex-direction: row;
margin-top: 10%;
}
#intro{
  display: none;
}
.einfach{
  position: absolute;
  margin-left: 20%;
}
.mittel{
  position: absolute;
  margin-left: 40%;
}
.schwer{
  position: absolute;
  margin-left: 60%
}

.frage_h{
  display: flex;
  flex-direction: row;
  margin-bottom: -5%
}
.home{
  position: fixed;
  top:2%;
  left:2%
}

.home_crea{

}

.heim{
  position: absolute;
  margin-top: 9%;;
  margin-left: 5%;
}

.titel{
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: center;
  width: 100%;
}
.align{
display: flex;
flex-direction: row;
}

.space{
  width:44%;
}

.play{
  position:relative;
}
#play_but{
  height: 100%;
}
.play_but{
  height: 100%;
}
.frage{
  text-shadow: 0.2rem 0.2rem black;
  font-family: "Oswald";
  font-size: 3rem;
  color: #999999;
  text-align: center;
  margin-bottom: 4%;

}

.choise {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top:2%;
  margin-left: -1.5%;
}
.choise1 {
  font-family: "Oswald";
  font-size: 2rem;
  color: #999999;
  text-align: center;
}

.choise2 {
  font-family: "Oswald";
  font-size: 2rem;
  color: #999999;
  text-align: center;
}

.choise3 {
  font-family: "Oswald";
  font-size: 2rem;
  color: #999999;
  text-align: center;
}


.body_crea{
  height: 100vh; overflow: hidden;
  background-color: black;
  -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */
}
#crea{
  text-align: center;
  font-size: 8rem;
  margin-top: 15%;
}
.play1{
  margin-top: 4%;
  margin-left: 17%;
}
.play2{
  margin-left: 10%;
}
.play3{
  margin-left: 10%;
  margin-right:10%;
}
.play4{
  margin-top: 4%;
  margin-left: 17%;
}
.play5{
  margin-left: 10%;
}
.play6{
  margin-left: 10%;
  margin-right:10%;
}
.header_info{
  font-family: "Oswald";
  color: #999999;
  font-size: 6rem;
  text-align: center;

}
.up{
  margin-top:5%;
}
.down{
  margin-top:2%;
}
.world{

margin-left: 5%;

}
.peas{
  margin-left: 11%;

}
.snoop{
margin-left: 11%;
}
.lenny{
  margin-left: 5%;
}
.chris{
  margin-left: 11%;
}
.wheatus{
  margin-left: 11%;
}
.body_text{
  background-repeat: no-repeat;
}
.back{
  position: fixed;
  top:2%;
  left:12%;
}
.back_bot{
  position: absolute;
  margin-left: 79%;
}
.home_bot{
  position: absolute;
  margin-left:89%;
}
h1{
  text-shadow: 0.2rem 0.2rem black;
  font-family: "Oswald";
  color: #999999;
  font-size: 4rem;
  text-align: center;
  margin-left: 5%;
  max-width: 90%;
}
h2{
  text-shadow: 0.2rem 0.2rem black;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: center;
}
h3{
  text-shadow: 0.2rem 0.2rem black;
  font-family: "Oswald";
  color: #999999;
  font-size: 3rem;
  text-align: center;
  max-width: 60%;
  margin-left: 20%;
}
.intertext{
  text-shadow: 0.2rem 0.2rem black;
  font-family: "Oswald";
  color: #999999;
  font-size: 2rem;
  text-align: left;
  max-width: 90%;
  margin-left: 5%;
  text-align: center;
}
.logo{
  position: absolute;
  margin-left: -15%;
}

  #animate1 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate2 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate3 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate4 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate5 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate6 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate7 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate8 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate9 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate10 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: white;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate11 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: #cccccc;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate12 {
    width: 50px;
    height: 50px;
    border-radius: 2000px;
    border-color: #cccccc;
    border-style: solid;
    border-width: 10px;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 1px;
    top: 1px;
    z-index: -1;
  }
  #animate13 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate14 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate15 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate16 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate17 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate18 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate19 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate20 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #cccccc;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate21 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate22 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate23 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate24 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate25 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate26 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate27 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate28 {
      width: 50px;
      height: 50px;
      border-radius: 2000px;
      border-color: #999999;
      border-style: solid;
      border-width: 10px;
      opacity: 0;
      position: absolute;
      transform: translateX(-50%) translateY(-50%);
      left: 1px;
      top: 1px;
      z-index: -1;
    }
    #animate29 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #999999;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate30 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #999999;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate31 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate32 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate33 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate34 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate35 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate36 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate37 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate38 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate39 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate40 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: #666666;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate41 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: red;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate42 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: blue;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate43 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: green;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate44 {
        width: 50px;
        height: 50px;
        border-radius: 2000px;
        border-color: yellow;
        border-style: solid;
        border-width: 10px;
        opacity: 0;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        left: 1px;
        top: 1px;
        z-index: -1;
      }
      #animate45 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: orange;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }
        #animate46 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: pink;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }
        #animate47 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: brown;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }
        #animate48 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: #ff6666;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }
        #animate49 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: #cc66ff;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }
        #animate50 {
          width: 50px;
          height: 50px;
          border-radius: 2000px;
          border-color: #33cccc;
          border-style: solid;
          border-width: 10px;
          opacity: 0;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);
          left: 1px;
          top: 1px;
          z-index: -1;
        }

.bug{
  color: black;
margin-top: 50%;
}
.bug1{
  color: black;
  font-size: 12rem;
}
/* Teil Leila */

/*Formular-btn formatiert*/
.btn_submit {
  font-family: "Oswald";
  font-size: 1.5rem;
  background-color: #000;
  color: #999999;
  border: 2px solid #999999;
  text-align: center;
  padding: 0.5%;
  align-self: center;
  margin-top: 2%;
  margin-left: 1%;
}
.btn_submit:hover{
  font-weight: bold;
  cursor: default;
  background-color: #993333;
  border-color: #993333;
  color: #999999;
}

/*Btn-im Modal formatiert*/
.btn_submit_sm_auswertung {
  font-family: "Oswald";
  font-size: 1.5rem;
  background-color: #000;
  color: #999999;
  border: 2px solid #999999;
  text-align: center;
  padding: 1%;
  align-self: center;
  margin: 2%;
}
.btn_submit_sm_auswertung:hover{
  font-weight: bold;
  cursor: default;
  background-color: #993333;
  border-color: #993333;
  color: #999999;
}

/*Btn-im Modal formatiert*/
.btn_submit_sm {
  font-family: "Oswald";
  font-size: 1.3rem;
  background-color: #000;
  color: #999999;
  border: 2px solid #999999;
  text-align: center;
  padding: 0.7%;
  align-self: center;
  margin-bottom: 5%;
  margin-top: 2%;
  margin-left: 42%;
}
.btn_submit_sm:hover{
  font-weight: bold;
  cursor: default;
  background-color: #993333;
  border-color: #993333;
  color: #999999;
}




/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  border-radius: 25%;
  display: flex;
  flex-direction: column;
}

/* Modal Content/Box */
.modal-content {
  background-color: black;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 0.5%;
  border: solid #999999;
  border-width: 1rem;
  width: 30%; /* Could be more or less, depending on screen size */

}

/*Schriftformatierung error-modal*/
.modal_schrift{
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  display: flex;
  flex-direction: row;
  margin-left: 20%;
  align-self: center;
  padding-bottom: 3%;
  padding-top: 2%;
}

.modal_schrift_sm{
  color: #999999;
  font-family: "Oswald";
  font-size: 1.5rem;
  display: flex;
  flex-direction: row;
  margin-left: 20%;
  align-self: center;
  padding: 4%;
}


/*Schriftformatierung modal nach auswertungsseiten*/
.modal_schrift_auswertung{
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  display: flex;
  flex-direction: row;
  margin-left: 33%;
  margin_bottom: -0.3%;
  align-self: center;
}

.modal_schrift_sm_auswertung{
  color: #999999;
  font-family: "Oswald";
  font-size: 1.5rem;
  display: flex;
  flex-direction: row;
  margin-left: 30%;
  align-self: center;
}

/*Schriftformatierung weiter-modal*/
.modal_schrift_weiter{
  color: #999999;
  font-family: "Oswald";
  font-size: 2rem;
  display: flex;
  flex-direction: row;
  margin-left: 32%;
  align-self: center;
}

.modal_schrift_sm_weiter{
  color: #999999;
  font-family: "Oswald";
  font-size: 1.5rem;
  display: flex;
  flex-direction: row;
  margin-left: 21%;
  align-self: center;
}



/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  margin-right: 1%;
  margin-top: -1.5%;
}

.close:hover,
.close:focus {
  color: #993333;
  text-decoration: none;
  cursor: pointer;
}


/*formular formatierung: Checkboxen unsichtbar machen*/

.check_radio {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}
.backend{
  position: relative;
  height: 100%;

}
.hausend{
  position: relative;
  height: 100%;