@font-face {
    font-family: ebrima;
    src: url(../fonts/MYRIADPRO-REGULAR.OTF);
    font-display: swap;
}
@font-face {
    font-family: ebrima;
    src: url(../fonts/MYRIADPRO-BOLD.OTF);
    font-weight: bold;
    font-display: swap;
}

html{
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  font-family: 'ebrima', sans-serif;
  background-color: #222222;
  color: white;
  background-image: url("../img/bg-steine.webp");
  background-size: 100%;
  background-repeat: no-repeat;
}

a{
  color: white;
  text-decoration: none;
  transition-duration:0.6s;
}

a:hover{
  background-color: white;
  color: rgb(91,118,90);
  transition-duration:0.6s; 
}
#buehne-wrapper{

}
#buehne-logo{
  width: 30vw;
  margin: 0 auto;
  margin-top:60px;
  margin-bottom:100px
}
#buehne-slogan{
  margin: 0 auto;
  margin-bottom:80px
}
#buehne-service{
  width: 50vw;
  margin: 0 auto;
  margin-bottom:80px;
}

#buehne-text{
  margin: 0 auto;
  font-size: 4vw;
  font-weight: bold;
  margin-bottom:80px
}

#buehne-wrapper hr{
  border: 1px solid rgb(91,118,90);
  opacity: 1;
  margin-bottom: 20px
}

#buehne-wrapper #kontakt img{
  width: 60px
}

#footer{
  margin:100px 0 20px 0
}


@media screen and (min-width: 992px) {
  
body{
  #background-size: 80%;
  background-position:0px -200px
  }
  
  #buehne-logo{
    display: block;
    width: 10vw;
    margin-top:60px;
    margin-bottom:80px
  }
  #buehne-slogan{
    width: 50vw;
    margin-bottom:40px
  }
  #buehne-service{
    width: 40vw;
    margin-bottom:80px
  }

  #buehne-text{
    font-size: 1.3vw;
    font-weight: bold;
    margin-bottom:80px
    }
  
}

@media screen and (min-width: 1400px) {
  
body{
  background-size: 80%;
  background-position:0px -400px;
  }
  
}