:root {
  --primary: rgb(255, 196, 0);
}

body {
  color: white;
  font-family: sans-serif;
}

.menu-button {
  padding: 10px;
  border: none;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s;
  color: white;
  outline: none;
  font-size: 200%;
  cursor: pointer;
}

.main-menu {
  background: url("./../textures/loading.jpg");
  background-size: cover;
}

.main-menu-button {
  -webkit-text-stroke: 2px #270E41;
  border: 6px solid #270E41;
  background: #FD009C;
  color: #ffffff;
  border-radius: 30px;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24pt;
  width: 300px;
  height: 60px;
  outline: none;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.15s;
  cursor: pointer;
}

.main-menu-button:hover {
  background: #ff3374;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2);
}

.popup {
  background: url("./../img/bg.png");
  width: 1513px;
  height: 926px;
  position: absolute;
  left: calc(50vw - 755px);
  top: 10px;
  pointer-events: initial;
  font-size: 35px;
  color: #270E41;
  font-family: 'Balsamiq Sans', cursive;
}

.popup table td {
  padding: 20px;
  vertical-align: top;
}

.settings-title {
  font-size: 300%;
  margin: 10px;
}

.dialog-text {
  font-family: 'Balsamiq Sans', cursive;
}

.now-playing {
  background: url("./../img/IG_10_Musiktitel.png") no-repeat;
  width: 444px;
  height: 63px;
  padding: 15px;
  text-align: center;
  color: #270E41;
  font-family: 'Balsamiq Sans', cursive;
}

.bar-hp {
  background: #BCF097;
}

.bar-hp-back {
  background: #FF0151;
}

.bar-special {
  background: #85DAE1;
}

.loading-background {
  background: cover url("./public/textures/loading.jpg");
}

.loading-bar {
  background: #270E41;
  border-radius: 50px;
}

.loading-bar-fill {
  background: #FD009C;
  border-radius: 50px;
}

.loading-text {
  font-family: 'Balsamiq Sans', cursive;
}

.touch-controls-button {
  background: rgba(0, 0, 0, 0.8);
  border: none;
  outline: none;
}

.note-meter {
  position: absolute;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("./../img/ui/9_Note_Small.png");
}

.note-meter-big {
  background-image: url("./../img/ui/8_Note_Big.png");
}

#wait {
  line-height: 100vh;
  text-align: center;
  height: 100%;
  width: 100%;
  background: black;
  color: white;
  font-size: 10vh;
}