/* (C)2020 schnuppe.net */

* {
  padding     : 0px;
  margin      : 0px;
  box-sizing  : border-box; /* includes padding and border in total width + height */
  font-family : 'Roboto', sans-serif;
  color       : #888888; /*A9A9A9; */
}  


.container {
  display         : flex;
  text-align      : center;
  align-content   : center;
  justify-content : center;
  flex-wrap       : wrap;
  width           : 100%;
}

 

a:link, a:visited {
  text-decoration : none; 
}

a:active, a:hover {   }  

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


.content {
    width            : 90%;
    margin-top       : 1em;
    margin-left      : 5%;
    margin-right     : 5%;
    /* background-color : whitesmoke; */
    background-color : gainsboro;
    border           : 1px solid #4e4e4e;
    border-radius    : .7em .7em; 
    padding-top      : 1em; 
    padding-bottom   : 0.7em; 
    font-size        : 120%;
}

img.large {
    border        : 1px solid grey;
    border-radius : .7em .7em;  
    max-width     : 100%; 
    height        : auto;
}    

img.thumb {
    border        : 1px solid grey;
    border-radius : .2em .2em;  
    width         : 100px; 
    height        : 100px;
    margin-right  : 3px;
    margin-bottom : 3px;
}   

@media only screen and (max-width:1500px){
    img.arrow {
        width: 130px;
        height: auto;
    }
}

@media only screen and (max-width:1000px){
    img.arrow {
        width: 90px;
        height: auto;
    }
}

@media only screen and (max-width:750px){
    img.arrow {
        width: 60px;
        height: auto;
    }
}

@media only screen and (max-width:550px){
    img.arrow {
        width: 40px;
        height: auto;
    }
}

.navi {
  display          : flex;
  flex-wrap        : wrap;
  border           : 1px solid #4e4e4e;
  border-radius    : .7em .7em; 
  width            : 90%;

  margin-top       : 12px;
  margin-left      : 5%;
  margin-right     : 5%;
  padding          : 1em;
  color            : grey; 
  background-color : gainsboro;
  justify-content: flex-start;

}

.center {
  text-align: center;
  align-content   : center;
  justify-content : flex-start;
} 

.footer {
  display          : flex;
  border           : 1px solid #4e4e4e;
  border-radius    : .7em .7em; 
  width            : 90%;
  align-items      : flex-start;  /* vertikal */

  margin-top       : 12px;
  margin-bottom    : 52px;
  margin-left      : 5%;
  margin-right     : 5%;
  padding-top      : 1em;
  padding-bottom   : 2em;

  color            : grey; 
  background-color : whitesmoke;
  
}

.foot1 {
  flex          : 1 0 10%;
  margin-left   : 1em;
  margin-right  : 1em;
}

.foot2 {
  flex            : 1 0 auto;
  margin-right    : 1em;
  text-align      : right;
}