@media (display-mode: standalone) {
   :root {
     --status-bar-color: #000000;
   }
   html {
     background-color: var(--status-bar-color);
   }
 }

body {-webkit-text-size-adjust:none;}
header,footer, nav, section {display:block;}

a:link, a:visited{font-size:14px; color:#0000EE; text-decoration:none; font-family:calibri, arial, sans-serif, helvetica;}
a:hover, a:focus, a:active{font-size:14px; color:#681664; text-decoration:underline;}

html, body{margin:0; padding:0; width:100vw; height:100vh; overflow:hidden;}
body {background-color:#ffffff; font-family:calibri, arial, sans-serif, helvetica; color:#333; background:#000;}
body.home{background:#fff;}

body {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}


div{overflow:hidden; box-sizing:border-box;}

h1,h2,h3 {margin:0px; padding:0px;}

.poAb{position:absolute;}
.poFi{position:fixed;}
.poRe{position:relative;}

.zIndex5{z-index:5;}
.zIndex10{z-index:10;}
.zIndex15{z-index:15;}
.zIndex20{z-index:20;}
.zIndex25{z-index:25;}

.top0{top:0px;}
.left0{left:0px;}
.right{right:0px;}
.bottom{bottom:0px;}

.left, .right{float:left; width:50%;}
.center{float:left; width:100%;}

.fl{float:left;}

.h100vh{height:100vh;}

.h45px{height:45px;}
.h35px{height:35px;}
.h25px{height:25px;}

.w100{width:100%;}
.w90{width:90%;}
.w80{width:80%;}
.w75{width:75%;}
.w70{width:70%;}
.w60{width:60%;}
.w50{width:50%;}
.w40{width:100%;}
.w33{width:33.3%;}
.w30{width:30%;}
.w25{width:25%;}
.w20{width:20%;}
.w10{width:10%;}

.w50px{width:50px;}

.ma0{margin:0 auto;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt25{margin-top:25px;}
.mt50{margin-top:50px;}

.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb25{margin-bottom:25px;}
.mb50{margin-bottom:50px;}

.ml15{margin-left:15px;}
.ml25{margin-left:25px;}

.ta_l{text-align:left!important;}
.ta_c{text-align:center!important;}
.ta_rc{text-align:right!important;}

.paTo5px{padding-top:5px;}
.paLe5px{padding-left:5px;}
.paRi5px{padding-right:5px;}
.paBo5px{padding-bottom:5px;}

.paTo10px{padding-top:10px;}
.paLe10px{padding-left:10px;}
.paRi10px{padding-right:10px;}
.paBo10px{padding-bottom:10px;}

.paTo25px{padding-top:25px;}
.paLe25px{padding-left:25px;}
.paRi25px{padding-right:25px;}
.paBo25px{padding-bottom:25px;}

.paTo50px{padding-top:50px;}
.paLe50px{padding-left:50px;}
.paRi50px{padding-right:50px;}
.paBo50px{padding-bottom:50px;}

.fl{float:left;}
.ovhi{overflow:hidden;}
.ovScY{overflow-y:scroll;}

.colorWhite{color:#fff;}
.colorBlack{color:#000;}
.colorYellow{color:#eeaa55;}
.colorGreen{color:#71b594;}
.colorPurple{color:#e777b1;}
.colorRed{color:#df4f52;}
.colorBlue{color:#727eb8;}

.backgroundWhiteT{background-color: rgba(255, 255, 255, 0.7);}
.backgroundWhite{background:#fff;}
.backgroundGrey{background:#ccc;}

.teSh1{text-shadow: 3px 3px 1px rgba(0, 0, 0, 1);}
.maPa0{margin:0px; padding:0px;}

.boRa10{border-radius:10px;}
.boRa25{border-radius:25px;}

.bo0{border:0px;}
.bo1{border:1px solid #ccc;}

.foSi12{font-size:12px;}
.foSi14{font-size:14px;}
.foSi16{font-size:16px;}
.foSi18{font-size:18px;}
.foSi20{font-size:20px;}
.foSi25{font-size:25px;}
.foSi28{font-size:28px;}
.foSi30{font-size:30px;}
.foSi35{font-size:35px;}
.foSi40{font-size:40px;}
.foSi50{font-size:50px;}
.foSi60{font-size:60px;}
.foSi70{font-size:70px;}
.foSi80{font-size:80px;}

.motion1 {
    -webkit-transition: all 1s;
    transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

.leSp12{letter-spacing: 12px;}
.leSp13 {letter-spacing: 13px;}
.leSp14 {letter-spacing: 14px;}
.leSp15 {letter-spacing: 15px;}

.foWeBo {font-weight:bold;}


a:link, a:visited {
    text-decoration: none;
}
a:hover, a:focus, a:active {
    text-decoration: underline;
}


.quiz-input {
    outline: none;
    background: none;
    text-decoration-thickness: 2px;
}




/**********************************************************
                 Home
**********************************************************/
#home{width:100%; height:100vh; text-align:center; box-sizing:border-box; padding-top:20vh; font-size:25px;}
#home_img{width:50%; max-width:300px;}
#home_logo{width:50%; max-width:300px;}



/**********************************************************
                 Browser
**********************************************************/
#landscape{margin-top:150px; width:15%;}
#einstellungenButton, #einstellungenBox, #menu, #background, #section {visibility:hidden; display:none;}


@media screen and (max-width:1024px){
         #landscape{margin-top:150px; width:25%;}
}

@media screen and (max-width:765px){
         #landscape{margin-top:150px; width:50%;}
}


/**********************************************************
                 Smartphone
**********************************************************/
@media only screen and (orientation: portrait) {

#landscape{visibility:hidden; display:none;}

#leftArrow{left:5px; bottom:5px; z-index:150;}

#einstellungenButton, #einstellungenBox, #menu, #background, #section  {visibility:visible; display:block;}


/**********************************************************
                 Einstellungen
**********************************************************/
#einstellungenButton{position:fixed; z-index:15; bottom:10px; right:10px; display:none;}
#einstellungenImg{width:40px;}

#einstellungenBox{position:fixed; z-index:10; padding:2.5%; bottom:-150px; width:100%; background:#000000; float:left; border:3px solid #ccc; box-sizing:border-box;
                 -webkit-transition: bottom 1s;
                 transition: bottom 1s;
                 -moz-transition: bottom 1s;
                 -o-transition: bottom 1s;
                 }
                 #einstellungenBox.on{bottom:0px;}



}