h2{color:red}
/*body{background: white url("OIP.jpg") }*/
h1{color:green}

body { background-color: white;
 display: flex;
  min-height: 100vh;
  flex-direction: column;

}
img { background-blend-mode: multiply; }
main {
	min-height: 5em;
	flex: 1;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

/* große Viewports */
@media all and (min-width: 30em) {

	
.flex-container {
    flex-direction: row;
  }
}



.flex-item1 {
	flex: auto;
	margin: 20px 20px 0px 0px;
	padding: 20px 20px 20px 20px;
	background-color:#d5aaff;
	border-radius:15px;   
	border: 3px solid #d5aa77;
}

.flex-item2 {
        flex: auto;
        margin: 20px 20px 0px 0px;
        padding: 19px 20px 20px 20px;
        background-color:#dbffd6;
	border-radius:15px;
	border: 3px solid #dbff00;
}
.flex-item3 {
        flex: auto;
        margin: 20px 20px 0px 0px;
        padding: 20px 20px 20px 20px;
        background-color:#fff5ba;
	border-radius:15px;
	border: 3px solid #fff500;
}
.flex-item4 {
        flex: auto;
        margin: 20px 20px 0px 0px;
        padding: 20px 20px 20px 20px;
        background-color:red;
        border-radius:15px;
        border: 3px solid #fff500;
}


footer {
	background-color: #fffbcc;
	border-radius:15px;
	margin-bottom:30px;
	margin-left:50px;
	margin-right:50px;
	padding-left:40px;
	padding-right:40px;
	color:black;
	border:black solid 1px;
}