/*
Hier wird der Stile aller HTML Elemente definiert
Es wird beim Style der kompletten Website gestartet und sich immer tiefer vorgearbeitet
*/
/*Designs für gesamte  Website*/
html, body {
  font-family: "Calibri Light", sans-serif;
  height:100vh;
  width:100vw;
  margin:0;
  /*After a short period of time, the (mobile) browser will claim the pointermove event for "native" behavior like panning the page.*/
  touch-action: none;
  /*Damit Popup und Img nicht auswählbar sind*/
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
/*Grunddesign zum Overlay aller GUI Elemete übers gesamte Display im VR und AR Modus*/
#overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height:100vh;
  width:100vw;
}
/*Startseite Design*/
.startSeite{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  height:100%;
  width:100%;
  z-index: 9999;
  background-color: #a1a1a0;
}
/*Text der Startseite*/
.startSeite>div{
  position: absolute;
  top: 0px;
  border-radius: 6px;
  padding: 8px;
  max-width: 30em;
  font-size: 1em;
  text-align: center;
  color: #fff; 
  background-color: #555;
}
/*Button der Startseite*/
.startSeite>buttom{
  border: 0px solid #7CFC00;
	border-radius: 10px;
  padding: 0.3em;
  margin-top: 10px;
	width: 80%;
  max-width: 20em;
  z-index: 9999;
  text-align: center;
  font-size: 2em;
  color: white;
  background: linear-gradient(to bottom, #76aa3c,#C4D600);
	box-shadow: 0 5px 10px white inset;
	transition: all .25s ease-in;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

/*Drehelement für AR Modus*/
.drehen {
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  height:100vh;
  width:100vw;
  z-index:100;
}
/*Popup Element*/
.popup{
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  border-radius: 6px;
  padding: 8px;
  width: 80%;
  max-width: 40em;
  z-index: 1000;
  font-size: 1em;
  text-align: center;
  color: #fff;
  background-color: #555;
  /*Damit können im Text \n Umbrüche eingefügt werden*/
  white-space: pre-line;
}
/*Button für verschiedene Einstellungen unten im Bild*/
.button{
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom:0%;
  padding: 0em;
  z-index: 1000;
  text-align: center;
  font-size: 2.2em;
  color:#C4D600;
}
/*Wenn auf den Button gedrückt wird ändert sich die Text Farbe*/
.button:focus,
.button:hover {
  border:0px;
  color: #8DAC00;
}
/*Style für Einstellungen*/
.flex-container {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height:100%;
  width:100%;
  z-index: 9500 !important;
  background-color: #a1a1a0;
}
/*Style für die Einstellungsbuttons*/
.flex-container>div {
  margin-top: 10px;
  border: 1px solid darkgreen;
	border-radius: 10px;
  padding: 0.3em;
  transition: all .25s ease-in;
	width: 80%;
  max-width: 20em;
  z-index: 9999;
  text-align: center;
  font-size: 2em;
  color: white;
	box-shadow: 0 5px 10px white inset;
	background: linear-gradient(to bottom, #76aa3c,#C4D600);
}
/*Style wenn die Einstellungsbuttons gedrückt werden*/
.flex-container>div:focus,
.flex-container>div:hover {
  color: white;
  text-color: white;
	background: darkgreen;
}
.drehen>div{
  display:none;
  position:absolute;
  z-index:9000;
}
 /*UM GUI Elemte ein und auszublenden*/       
/*Durch flex Elemente sichtbar machen*/
/*Durch Imortant überschreibt flex das none*/
.show{
  display: flex !important;
}