*{
	box-sizing:border-box;
	}
@font-face{
	font-family: Redressed;
	src: url(Redressed-Regular.ttf);
	}
@font-face{
	font-family: "Poiret One";
	src: url(PoiretOne-Regular.ttf);
	}
body{
	font-family:Arial,Helvetica,sans-serif;
	font-size:12pt;
	margin:0; padding:6px;
	background-color: lightsteelblue;
	}

img{
	display:block;
	margin:0 auto;
	box-shadow:6px 6px 16px black;

	}
@keyframes myani {
  from { opacity: 0}
  to   { opacity: 1}
}
.imgani {
	animation: 2s ease-in 0s 1 myani;
	}
.mybox{
	margin:10px;
	color:white;
	text-shadow:3px 3px 8px black;
	text-align:center;
	font-family:"Redressed",sans-serif;
	font-size:2.8em;
	}
.wrapperbilder{
	max-width:420px;
	margin:0 auto;
	display:grid;
	grid-template-columns: 1fr;
	background:slategrey;
	box-shadow:2px 2px 4px black;
	}
#footer,#header {
	max-width:420px;
	margin:0 auto;
	padding:10px;
	font-family:"Poiret One",sans-serif;
	font-size:1.6em;
	background:slategrey;
}
#header{
	font-size:2.6em;
	text-align:center;
	box-shadow:2px 2px 4px black;
	background-color: lightsteelblue;
	}
.wrappertexte{
	max-width:420px;
	margin:0 auto;
	display:grid;
	grid-template-columns: 1fr;
	column-gap:2%;
	background:slategrey;
	box-shadow:2px 2px 4px black;
	}
.myhead{
	background-color: lightsteelblue;
	padding:6px;
	margin:6px 0;
	box-shadow:2px 2px 4px black;
	text-align:center;
	}
.bildtext{
	margin:2px;
	color:black;
	font-family:"Poiret One",sans-serif;
	text-shadow:none;
	text-align:left;
	font-size:0.8em;
	}
.mydiv{
	padding:2%;
	}
@media only screen and (min-width:992px){
	.wrapperbilder{
		max-width:820px;
		grid-template-columns:repeat(2,1fr);
		}
	.wrappertexte{
		max-width:820px;
		grid-template-columns:repeat(2,1fr);
		}		
	#footer,#header {
		max-width:820px;
		padding:20px 10px;
		}
}

@media only screen and (min-width:1200px){
	.wrapperbilder{
		max-width:1220px;
		grid-template-columns:repeat(3,1fr);
		}
	.wrappertexte{
		max-width:1220px;
		grid-template-columns:repeat(3,1fr);
		}
	#footer,#header {
		max-width:1220px;
		}
}