html {
  margin: 0;
  padding: 0;
  font-family: Calibri, Arial, Helvetica, sans-serif;
}
body {
  margin: 0;
}

#background-image {
  height: 100vh;
  width: 100vw;
  background: url("../img/bg.png") no-repeat center center fixed;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);
}

#content {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 5vh;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
#Gemeinden {
  display: none;
}
#Staedte {
  display: none;
}
#Landkreise {
  display: none;
}
input[type="range"] {
  background-color: var(--sekundärfarbe);
}
.overlayScreen {
  min-height: 70vh;
  width: 60vw;
  padding: 2vh 10vw;
  background-color: var(--primärfarbe);
  color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
}
#startButton {
  color: white;
}
.mapSettingDeactivated svg {
  padding: 0;
  fill: none;
  stroke: #ffffff;
}
.mapSetting svg {
  padding: 0;
  fill: none;
  stroke: #ffffff;
}
button {
  padding: 2vh 10vw;
  border-radius: 5px;
  width: 58vw;
  background-color: var(--primärfarbeHell);
  border: 0;
  color: white;
  transition: 0.1s;
}
button:hover {
  background-color: var(--sekundärfarbe);

  cursor: pointer;
}
.mapSettingDeactivated {
  margin: 1vh 0;
  padding: 0 4vw;
  border-radius: 5px;
  width: 50vw;
  /* background: repeating-linear-gradient(
    -45deg,
    var(--grau) 0%,
    var(--grau) 2%,
    var(--primärfarbeHell) 2%,
    var(--primärfarbeHell) 4%,
    var(--grau) 4%
  ); */
  background-color: var(--grau);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.1s;
}
.mapSetting {
  margin: 1vh 0;
  padding: 0 4vw;
  border-radius: 5px;
  width: 50vw;
  background-color: var(--primärfarbeHell);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.1s;
}
.mapSetting:hover {
  background-color: var(--sekundärfarbe);
  cursor: pointer;
}
#roundSlider {
  display: flex;
  width: 60vw;
}
#numberOfRounds {
  width: 45vw;
  padding: 0;
  margin-right: 4vw;
}

#numberOfRoundsDisplay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5vh 2vw;
  width: 5vw;
  border-radius: 5px;
  background-color: var(--primärfarbeHell);
}
#backButton {
  display: none;
}
.mapSettings {
  display: flex;
  flex-direction: column;
}
#qrcode {
  width: 200px;
  border: 5px solid white;
  background-color: white;
  display: none;
}
#startButton {
  margin-top: 1vh;
  width: 60vw;
  height: 4vh;
  padding: 2vh 10vw;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  stroke: white;
  /* position: absolute; */
  /* left: 10vw; */
  /* bottom: 17vh; */
  background-color: var(--korrekt-grün);
  border-radius: 5px;
  transition: 0.2s;
  font-size: 2vh;
}
#startButton:hover {
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
}