@charset "utf-8";
/* author: Thomas Fux; www.brokenscreen.at -  

*/
* { margin:0; padding:0px;  outline: none; box-sizing: border-box}
html, body {  margin: 0px; padding:0px;   }

body {background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); background-attachment: fixed; font-family:  Verdana, "sans-serif"; font-size: 20px}

header { display:block; width:100%; padding: 4px 20px 4px 20px; background:#39604a; color:whitesmoke; text-align:center; font-size:1.0em; position: fixed; z-index:99}


img {width:100%; height:auto;  border: solid 1px grey; border-radius:.4em; transition: all 2s ease; aspect-ratio: 16/9;  }

.abstand {display:block; height:50px; width: 100%}

span { font-size: .6em}

.bli {opacity:.0;filter: grayscale(1); }
.show {opacity:1; filter: grayscale(0);}

.footerline {display:block; width:100%; padding:4px; text-align: center; font-size:0rem; background: rgba(25,24,24,1.00); color: azure}
.footerline span { font-size: .7em}

a {text-decoration: none; color:azure}

@media screen and (min-width : 40px)
{	
    article { padding:20px;  position: static; top:200px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    }
	.footerline {font-size:.5rem;}
}

@media screen and (min-width: 620px) 
{
	
article { padding:20px;  position: static; top:200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
	.footerline {font-size:.6rem;}
}

@media screen and (min-width: 1180px) 
{
	
article { padding:20px;  position: static; top:200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
	.footerline {font-size:.7rem;}
}