body{
    color:whitesmoke;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    
    min-width: 90%;
    min-height: 90%;
    background-color: black;
    background-image:  url(./images/BackUmutBlk50.jpg) ;
    background-position: top left;
    background-size: 100vmax 100vmax;
    background-repeat: no-repeat;
}
footer{
    display: block;
    background-image: url(./images/frogtransBlk64.png);
    background-repeat: no-repeat;
    width:64px;
    height:64px;
    position: fixed;
    top: 0;
    right: 0px;
}
footer>a{
    width: 64px;
    height: 64px;
    font-size: large;
}

header{
    display: none;
    background-color: gray;   
    padding:2rem; 
    position: fixed; 
    left:0;   
    top:5rem;
    width: 90%;
}
header *{
    margin-top: 1rem;}

header input{
    width: 100%;
}
header textarea{
    width: 100%;
}
header div{
    width: 100%;
}
header div:last-child >div{
    width: 20%;
    min-width: 7rem;
    float: right;
}


h1,h2{
    text-align: center; letter-spacing: 1em;
}
h1::first-letter{text-decoration: overline;}
a{
    color:whitesmoke;
    text-decoration: none;
    display: block;
    overflow: visible;
}

li>a {    
    font-size: larger;
    width: 60px;
  }
  li>a::before{content: "|";}
  h1 span{display: inline-block;}
  body.invert div h1 span,
  li.focus>a{
    transform:  scaley(-1);
  }
ul {
    list-style: none;
}
li:focus-within a {
    outline: none;
  }


   /* ,
  li:focus-within > div,
  li > div:focus-within */
 li.focus>div{
    display: block;
    min-width:90%;
    }

li>div{
    display: none;
}

iframe, .img,.dsc,.map{
    width:60vw;
    max-width:600px;
    margin-top: 1rem;
    margin-left: 1rem;
    float: right;
    background-position: top left;
    background-color:gray;
    background-size:contain;
    background-repeat: no-repeat;
}

.img,.map{
    height:40vw;
    max-height:400px;
}

iframe.player{
    width:100%;
    height:160px;
}


#content{
    min-width: 90%;
    min-height: 90%;
    padding: 1rem;
}
#cancel,#send{
    display: inline-block;
    text-align: center;
    margin-left: 1rem;
    margin-top: 1rem;
    min-width: 2rem;
    background-color: #333;
}
#lupp{
    background-image:  url(./images/lupp.jpg) ;
}
#rucker{
    background-image:  url(./images/rucker.jpg) ;
}
#spirig{
    background-image:  url(./images/spirig.jpg) ;
}  
#keller{
    background-image:  url(./images/keller.jpg) ;
}  
#saar{
    background-image:  url(./images/saar.jpg) ;
}  

.active{
    display: block;
}
body.invert{
    background-image:  url(./images/BackUmut.jpg) ;
    filter: invert(100%) !important;
}

@media all and (orientation:portrait){
    body{
        background-image:  url(./images/BackUmutBlkVrt50.jpg) ;
     }
     body.invert{
         filter: invert(100%) !important;
         background-image:  url(./images/BackUmutVrt.jpg) ;
     }
     h1{
        /* display: block;
         min-width: 90%;
         */
         text-align: left; letter-spacing: .5em;
     
     }
     footer{
         top: 90%;
         left: 0px;
     }
     iframe, .img,.dsc,.map{
        width:72vw;
        height:48vw;
        float: none;
        margin-left: 0.5rem;
    }
    li>a {    
        width:11vw;
    }
}