body,html{margin:0;padding:0;
  height:100%;
  width:100%;
  font-family:'Poppins';
  background-color:#002d74;
}
img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  padding:0;
  margin:0;
  border:0;

}
#banner_div{
/*  background-image:url(vector_HSBHV_Campus_2022.svg);*/
  background-image:url(img/ausschnitt-grau.svg);
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-attachment:scroll;



}
#container{
  width: 100%;        
  height:100%;
  padding:0;
  margin:0;
}    

/*#sizecontroller{
  position: absolute;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  z-index:0;
}*/

#overlay{
  position: absolute;
  padding:0;
  margin:0;
  top: 0;
  left: 0;
  height: 95%;
  width:96%;
  background-color: rgba(0,0,0,0.5); 
  margin:2%;
  display:none;
  z-index:10;
}
#theframe{
  position:absolute;
  display:block;
  margin:2%;
  width:96%;
  height:94%;
  border:none
}
#closer{
  position:absolute;
  right:0;
  background-color:gray;
  display:block;
  cursor: pointer;
  padding:0.3em;
  z-index:30;
}
#thename{
  border-radius: 5px 5px 0px 0px;
  font-size: calc(16px + (30 - 16) * ((100vw - 320px) / (1600 - 320)));
  /*font-size:25px;*/
  border: 0px black solid;
  width:100%;
  outline: none;
  margin:0;
  padding:0.3rem;
  box-sizing: border-box;
}
#thename.noflash{
  background-color:#8fffc5

}
#thename.flash{
  background-color:lightgreen
}
#thename.flashred{
  background-color:#800000
}
#themessage{
  font-size:25px;
  border: 0px black solid;
  width:100%;
  outline: none;
  background-color:rgb(196,196,196); /*rgb(196,196,196);*/ 
  display:none;
  margin:0;
  padding:0;

}
#thepassword{
  font-size:25px;
  border: 0px black solid;
  width:100%
}
/*otherwise class backgroundColor from thewarning and flashinput conflict*/
#damnwarningcontainer{
  /*background-color:rgb(0,138,128);*/
  background-color:#002d74;
}
#thewarning{
  padding:0.3em;
  color:white;

  border-radius: 0px 0px 5px 5px
}
#thewarning h3 {
  font-size: calc(10px + (30 - 10) * ((80vw - 320px) / (1600 - 320)));
  font-weight: normal;
  color:#8fffc5;
  margin: 0px;
}
.flashinput{
  background-color:darkred;
}


#config{
  border-radius: 5px;
  box-shadow: 0 0 8px rgb(196,196,196);
  z-index:12;
  position:absolute;
  width:30%;
  padding:0;
  margin:10px;
  text-align: center;
  background-color:#a0d1b2;

}
#programmlink{
  display:block;
  float:right;
  margin-top:-15px;
  margin-bottom:5px;
  margin-right:5px;
}
#help {
  border-radius: 5px;
  box-shadow: 0 0 8px rgb(196,196,196);
  background-color:lightgray;
  margin:10px;
  padding:10px;
  position:absolute;
  left:50%;
  z-index:30;
  opacity:0.9;
}
#helplink{
  color:gray;
}
#help:hover{
  background-color:#999999;
  opacity:1.0;
}
#helpcontainer{
  border-radius: 5px;
  box-shadow: 0 0 8px rgb(196,196,196);
  position: absolute;
  top: 0;
  left: 0;
  background-color: lightgray; 
  margin:5% 20% 5% 20%;
  display:none;
  z-index:20;
  overflow:auto;
  box-sizing: border-box;
  padding:1em;
}
#helpvideo{
  width:100%;
  display:block;
  margin-left:auto;
  margin-right:auto;
  box-sizing: border-box;

}
#configright{
  margin: 10px;
  right:0;
  top:0;
  position:absolute;
  /*background-color:rgb(0,138,128); /*rgb(11,85,147);*/
  width:30%;
  
}
#theobject{
  z-index:0;

}
#video{
  border-radius: 5px;
  display: block;
  width:100%;
  position:relative
}
#x{
  font-family:'Helvetica', 'Arial', sans-serif;
  font-size: 28px;
  font-weight: bold;
  color: white;
}
#footer{
  text-align: center;
  /*  background-color:rgb(211,237,252); weser*/
  background-color:#a5ffff;

}