@import url('https://fonts.cdnfonts.com/css/akrobat');

body {
  background-size: cover;
  background-image: url("img/background.png");
  overflow: hidden;
}

#logo {
  position: absolute;
  width: 4.198062432723359vh;
  height: 2.95625vw;
  top: 5%;
  left: 5%;
}

#lester_mobile {
  display: none;
}

#strich1 {
  position: absolute;
  width: 206.67384284176535vh;
  height: 0vw;
  border: 0.052083333333333336vw solid rgba(53, 53, 53, 0.6);
  left: 0%;
  top: 15%;
}

#home, #forum, #shop, #regelwerk, #dc {
  position: absolute;
  font-family: 'Akrobat Light', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.0416666666666667vw;
  line-height: 1.25vw;
  color: #FFFFFF;
  text-decoration: none;
}

#home { left: 25%; top: 7%; }
#forum { left: 40%; top: 7%; }
#shop { left: 55%; top: 7%; }
#regelwerk { left: 70%; top: 7%; }
#dc { left: 85%; top: 7%; }

#home:hover, #forum:hover, #shop:hover, #regelwerk:hover, #dc:hover {
  color: #87DA21;
}

#homestrich {
  position: absolute;
  width: 2.3681377825618943vh;
  height: 0.10416666666666667vw;
  background: #87DA21;
  box-shadow: 0wv 0wv 0.15625vw #B7FF6D;
  top: 10%;
  left: 25.5%;
}

#copyright {
  position: absolute;
  font-family: 'Akrobat Light', sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 1.0416666666666667vw;
  line-height: 1.25vw;
  color: #525252;
  left: 40%;
  top: 95%;
  text-decoration: none;
}

#brezelrp, #logotext {
  font-family: 'Apex Mk2';
  font-style: normal;
  font-weight: 700;
  font-size: 3.125vw;
  line-height: 2.5vw;
  color: #87DA21;
}

#brezelrpweiß, #logotext2 {
  color: #FFFFFF;
}

#textbox {
  position: absolute;
  width: 43.05705059203444vh;
  height: 26.041666666666668vw;
  top: 30%;
  left: 60%;
}

#serverinfo, #serverextra {
  position: absolute;
  font-family: 'Akrobat SemiBold', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.3020833333333333vw;
  line-height: 1.5625vw;
  color: #FFFFFF;
}

#serverinfo { top: 20%; }
#serverextra { top: 50%; }

#serverinfotext, #serverextratext {
  position: absolute;
  font-family: 'Akrobat Light', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 0.625vw;
  line-height: 0.7291666666666666vw;
  color: rgba(255, 255, 255, 0.5);
}

#serverinfotext { top: 30%; }
#serverextratext { top: 60%; }

#play {
  position: absolute;
  width: 44.13347685683531vh;
  height: 4.583333333333333vw;
  background: rgba(135, 218, 33, 0.8);
  box-shadow: 0vw 0vw 0.2604166666666667vw #B7FF6D;
  border-radius: 0.2604166666666667vw;
  text-align: center;
  top: 80%;
  left: 60%;
  cursor: pointer;
  display: inline-block;
  transition: 0.5s;
}

#play:after {
  content: '▶';
  font-family: 'Akrobat Light', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.8229166666666667vw;
  line-height: 2.1875vw;
  color: #000000;
  position: absolute;
  opacity: 0;
  top: 30%;
  left: 40%;
  transition: 0.3s;
}

#play:hover {
  padding-right: 2%;
  padding-left: 1%;
}

#play:hover:after {
  opacity: 1;
  right: 2%;
}

#playtext {
  position: absolute;
  left: 40%;
  top: 30%;
  font-family: 'Akrobat Light', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.8229166666666667vw;
  line-height: 2.1875vw;
  color: #000000;
}

#lester {
  position: absolute;
  max-width: 100%;
  height: auto;
  left: -20%;
  top: 10%;
}

#mobile-trigger, #mobilenav {
  display: none;
}

@media (max-width: 1000px) {
  body {
    overflow-x: hidden;
    background-image: url(img/bg_mobile.png);
  }
  #logo {
    position: absolute;
    width: 9.558557588805167vw;
    height: 7.2395833333333335vh;
    top: 2%;
    left: 28%;
  }
  #logotext {
    top: 2%;
    left: 40%;
    font-size: 8.0416666666666667vw;
    color: #87DA21;
  }
  #logotext2 {
    top: 80%;
    left: 0%;
    font-size: 6.8854166666666666vw;
    color: #FFFFFF;
  }
  #textbox {
    width: 83.05705059203444vh;
    height: 66.041666666666668vw;
    top: 30%;
    left: 5%;
    text-align: left;
  }
  #serverinfo, #serverextra {
    font-size: 5.3020833333333333vw;
  }
  #serverinfotext, #serverextratext {
    font-size: 2.625vw;
    line-height: 2.991666666666666vw;
  }
  #lester {
    left: -35%;
    top: 15%;
    opacity: 20%;
  }
  #play {
    width: 24.13347685683531vh;
    height: 10.583333333333333vw;
    background: rgba(135, 218, 33, 0.8);
    box-shadow: 0vw 0vw 0.2604166666666667vw #B7FF6D;
    left: 30%;
  }
  #playtext {
    left: 33.2%;
    top: 40%;
    font-size: 7.8229166666666667vw;
  }
  #home, #forum, #shop, #regelwerk, #dc {
    font-size: 3.5416666666666667vw;
  }
  #home { left: 10%; top: 15%; }
  #forum { left: 25%; top: 15%; }
  #shop { left: 41%; top: 15%; }
  #regelwerk { left: 55%; top: 15%; }
  #dc { left: 75%; top: 15%; }
  #homestrich, #strich1 {
    display: none;
  }
}