*{
  font-family: "Press Start 2P", cursive;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}
body {
  background-color: #044928;
  display: grid;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  
}

html{
  height: 100%;
  width: 100%;
}


* button {

  border: black, solid 0.3vw;
  border-radius: 0;
  /* background-color: lightgrey; */
  color: black; 


}




canvas {
    background-color: #044928;
        
  }

  @keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 10px); }
}





  .Transition{
    background-color:black; 
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 20000;
    max-width: 100%;
    max-height: 100%;
  
  }

  
  .Auswahl{
    display: block;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 80%;
    left: 50%;
    height: 70%;
    width: 60%;
    transform: translate(-50%, -50%);
   
    
   
  }

  .Hilfe{
    z-index: 22000;
    display: none;
    position: absolute;
    bottom: 80%;
    left: 7%;
    width: 6%;
    height: 12%;
    border-radius: 30%;
  }

  .Warten {
    display: grid; 
    justify-content: center;
    align-items: center; 
    position: absolute;
    font-size: 1.5em;
    top: 50%;
    left: 32%;
    width: 40%;
    height: 20%;

  }
  .Anleitung {

    background-color: black; 
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 1000;  
    overflow: hidden;
    


  }

.AnleitungButton{
  z-index: 1000; 
}

  .Geräte{

    position: relative;
    height: 100%;
    width: 50%;
    display: grid;
    grid-template-rows: 3;
   
    
    
  }

  
.GeräteButton{
  cursor: pointer;
  font-size: 1.5vw;
  height: 100%;
  background-color: lightgrey
  
}

.ErklärBox{
 
  font-size: 1.5vw;
  background-color: lightgrey;
  border: black, solid 0.3vw;
  display: flex; 
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.3em;
  line-height: 1.5em;
  margin-bottom: 1.5em;
  
  

}


  .movingInterface{
    
    height: 45%;
    width: 45%;
    position: absolute;
    bottom: 10%;
    left: 5%;
    right: 0;
    display: grid;
    grid-template-columns: 3;
    transform: translate(-10%);
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

   
  
    

  }

  .movingUp{

    
    display:flex;
    justify-content: center;
    align-items: end;
    

    
    
  }

  .movingUpButton{

    position: relative;
    width: 25%;
    height: 100%;
    background-color: lightgrey
    

  }


  .movingRightLeft{
    
    
    
    display:flex;
    justify-content: center;
    align-items: center;
  
  }

  .movingRightLeftButton{
    height: 100%;
    width: 25%;
    background-color: lightgrey
    

    
  }

  .movingDown{
    
    position: relative;
    
    display:flex;
    justify-content: center;
    align-items: top; 
    
    
  }

 .movingDownButton{
 
    height: 100%;
    width: 25%;
    background-color: lightgrey
    

 }

 .Pfeil{
  font-size: 3vw;
 }

 .timer{
  background-color: lightgrey;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* top: 15%; */
  top: 6%;
  /* right: 17%; */
  right: 6%;
  width: 18%;
  height: 18%;
  border: 4px black solid;
  
 }

 .Zeit{

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;


 }


  .Interface{
    position: absolute;
    border-top: 4px black solid;
    transform: translate(0%,-100%);

    
  }

  .Content{
    
    position: relative;
    transform: translate(0%, -10%)
  }

  
  .Dialog{
    background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1vw;
    font-size: 1.25vw;
    display: grid;
    grid-template-rows: 2;
    justify-content: center;
    align-items: center; 

  
  }

  .DialogText{
   width: 100%;
   height: 100%;
   display: flex; 
   align-items: center;
   text-align: center;
   line-height: 1.5;
  }

  .DialogButton{

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .FortfahrenButton{
    width: 40%;
    height: 100%;
    font-size: 1.5vw;
  }
  .Answers{

    position: relative;
    width: 70%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 2;
    /*border:black, solid, 0.5vw;*/
    transform: translate(0%, -30%);
    

  }

  
.AnswersButton {
  cursor: pointer;
  font-size: 1vw;
  background-color: #af070f;
  color: lightgrey;
  /*border:black, solid, 0.2vw;*/
  
}
.ErklärungAntworten{
  background-color: lightgrey;
  display: flex;
  justify-content: center; 
  align-items: center;
  font-size: 1vw; 
  height: 30%;
  width: 70%;
  height: 30%;
  border-left: 0.25vw black solid;
  border-right: 0.25vw black solid;
  border-top: 0.25vw black solid;
}

.ErklärungHinweise{
  display: flex; 
  justify-content: center; 
  align-items: center;
  transform: translate(233%, -100%); 
  border-left: 0.5vw black solid;
  border-right: 0.25vw black solid; 
  border-top: 0.25vw black solid;
  background-color: lightgrey;
  width: 30%;
  height: 30%;
  font-size: 1vw;
  
}



  .Hinweise {
    
    position: relative;
    width: 30%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 2;
    transform: translate(233%, -130%);
    border-left: 4px black solid;

  }


  .HinweisCss{
    
    cursor: not-allowed;
    position: relative;
    font-size: 1vw;
    background-color: grey;
    
    
  }

 
  .ZurückCss{
    cursor: pointer;
    position: relative;
    font-size: 1vw;
    background-color: lightgrey
    
  }

  .confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 0.8;
    animation: fall 3s linear forwards;
  }
  
  /* Keyframes für die Fall-Animation */
  @keyframes fall {
    0% {
      transform: translateY(-10px) rotate(0deg);
    }
    100% {
      transform: translateY(510px) rotate(360deg);
      opacity: 0;
    }
  }