html{
height: 100%;  
}
body {
  background-size:cover;
  font-family: "Comic Sans MS",Helvetica, sans-serif; 
  border: 1px dashed #ffffff;
  border-radius:30%;
  box-shadow: 0px 0px 350px; #000000;;
  background: radial-gradient(#28427B,#14213D,#0d001f);
  justify-content:center;
  background-position: center;

}
/* Hint lenkt den User durch das Spiel und die einzelnen Optionen. 'Hint' wird an bestimmten Stellen auftauchen, um den User zu einem bestimmten Zeitpunkt bestimmte Optionen zu geben*/
.hint{
    -moz-border-radius: 200px/200px;
    -webkit-border-radius: 200px 200px;
    border-radius: 200px/200px;;
    border:1px solid #52c7aa;
    width:auto;
    height:auto;
    outline:none;
    -webkit-animation-name: hintPulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes hintPulse {
from { -webkit-box-shadow: 0 0 3px #0c2720; }
50% {  -webkit-box-shadow: 0 0 21px #52c7aa; }
to {-webkit-box-shadow: 0 0 12px #246E5B; }
}
/*Start und Stop button*/
.button{
  display: flex;
  position: center;
  margin:0em auto;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  box-shadow:0px 0px 15px #000000;
  padding: 5px;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.2;
}/* Wir genutztz, um per JS zu steuern, wann der Inhalt auftaucht, wenn die buttons gedrückt werden*/
#gamestart{
  visibility:hidden;
}
#gamestop{
  visibility:hidden;
}/*Danke-Text am Ende des Spiels */
.thanks{
  border-radius:50%;
  z-index:-5;
  margin: 5em auto 5;
  text-align: center;
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0% {transform: scale(0.95);}
	70% {transform: scale(1);}
	100% {transform: scale(0.95);}
} /* formatiert den div-container, wo Titel und untertitel drinstehen*/
.context {
  text-align: center;
  color: #ffffff;
  max-width: 700px;
  margin: 2em auto; 
  padding:10px;
}
h1 {
  font-familiy:"Cursive", Helvetica; 
  font-variant:small-caps;
  margin: 2em 0;
  padding:10px;
  color: #fff;
  border-bottom: 1px;
  border-bottom-color:#ffffff;
  box-shadow: 0px 0px 15px #000000; 
  border-bottom-style:solid;
  border-radius:50px;
}
a {
  overflow:hidden;
  text-decoration: none;
  color: #ffffff;
  padding: 4px 0;
  border: 1px;
}/*formatiert Sprechblase generell*/
.bubble {
  z-index:4;
  min-width: 0px;
  max-width: 210px;
  max-height:50px;
  font-size: 15px;
  line-height: 1.2;
  display:flex;
  text-align: center;
  position: absolute;
  border-radius: 50px; 
  margin-right: auto;
  margin-left: auto;
  left: 85%;
  right: 0;
  top:50%;
  padding:1px;
}/* Da die Scenen verschiedene backgrounds haben, werden den jeweiligen Sprechblasen verschiedene background-colors gegeben, damit sie gut zu sehen sind*/
.bubble.bubble1{
  background:rgba(255, 255, 255, 0.30);
  padding: 6px 6px 4px;
  }
.bubble.bubble2{
  background:rgba(26, 22, 95, 0.55);
  padding: 6px 6px 4px;
}/* Animation für die Sprechblase*/
.anim-typewriter{
  animation: typing 7s steps(8,end) infinite normal both;
    -webkit-animation-duration: 7s;
}
@keyframes typing{
  from{width: 0;}
  to{width: 20em;} 
}/*Ab hier sind im Content zusehende Objekte /Bilder definiert*/
.main-content {
  max-width: 700px;
  margin: 0em auto 0;
  text-align: center;
  max-height:500px;  
  overflow:hidden;
}
.illustration {
  position: relative;
  align-self: flex-end;
  margin: auto;
  height: 250px;
  width: 250px;
}/* styled signpost am Anfang. Da er einzeln in JS gesteuert wird, wird er extra gestyled */
#signpost{
  position:absolute;
  width:150px;
  margin-top:135px;
  margin-left:-150px;
}/* styled position der svg's und gesamten scenen */
.figure,
.scenery,
.background-items,
.foreground-items {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto; 
}/* styled scenen-wechsel*/
.scenery {
  transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index:-2;
}/* Styled die Hintergrundbilder der Scenen */
.backgroundimg{
  border-radius:50%;
  margin-left:-73%;
  width:626px; 
  height:335px;
  box-shadow: 0px 0px 15px #000000;
}/* Styled die einzelnen Objekte/svg's */
.background-items {
  transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
  top: 23px;
}
.foreground-items {
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms;
  margin-top:100%;
}
.home-body {
  .foreground-items {
    margin-left: -60px;
  }
}
.outdoor-person {
  .foreground-items {
    margin-right: -80px;
  }
}
.figure {
  bottom: -30px;
  margin-right: -200px;
}
.person-type > div {
  transform: scale(0);
  opacity: 0;
}
.person-type.active > div {
  transform: scale(1);
  opacity: 1;
}/* Styled die auswählbaren Optionen als div gesamt*/
.option-wrapper {
  display: flex;
  position: center;
  margin:8em auto;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 5px;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0px 0px 15px #000000;
}/* Syteld die Optionen im div-option-wrapper*/
.option {
  transition: all 200ms ease;
  padding: 10px 10px 8px;
  width: 50%;   
  border-radius: 50px;
  cursor: pointer;
  color: #ffffff;
}/* gibt aktiver Option style */
.active {
  background: #FFB200;  
  pointer-events: none;
  color:#000000;
}
.option:hover: {
  text-decoration: none;
}
/*Ab hier sind die Anweisungen für die Hover-Animation der Optionen. Für "Wiggle" sind die einzelnen Bewegungen auch Prozente aufgeteilt, damit der Effekt entsteht. */
.wobble-vertical-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical-on-hover:hover, .wobble-vertical-on-hover:focus, .wobble-vertical-on-hover:active {
  -webkit-animation-name: wobble-vertical-on-hover;
  animation-name: wobble-vertical-on-hover;
  -webkit-animation-duration: 1s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: infinite;
}/* Bewegungen der Animation wobble, aufgeteilt nach Prozent*/
@keyframes wobble-vertical-on-hover {
  16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
  33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
  49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
  66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
  83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
  100% {-webkit-transform: translateY(0);transform: translateY(0);}
}