html,
body {
  height: 100vh;
  box-sizing: border-box;
  background: #fff;
}
#wrapper {
	max-width: 1000px;
	margin: 0px auto;
}

h1 {
	font-family: 'Lobster', cursive;
	color: #252525;
	text-align: center;
}

h4 {
	font-family: 'Roboto Slab', serif;
	color: #525252;
}

h2 {	
	font-family: 'Roboto Slab', serif;
	color: #252525;
	text-align: left;
	display: block;
}

a {
	float: left;
	text-align: left;
	padding-right: 50px;
	text-decoration: none;
	-webkit-transition:all .4s;
	display: block;
}

a:hover {
	opacity: 0.2;
}
.container {
    height: 40vh;
    display: flex;
    /*ul is the flex container of li*/
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    /*test differet declareations*/
    align-items: flex-end;
    /*test differet declareations*/
    align-content: stretch;
    /*stretch will stretch to the full height of the ul element, check out what happens when use: space-between and space-around*/
}

div.containers {
    flex: 1 1 20%;/*==grow and shrik, can be changed==*/
    height: auto;
    margin: 0%;
    align-self: stretch;
}

@media only screen and (max-width: 860px) {
    div.containers {
    flex: 1 1 40%;
}
}

img {    
    margin: 2%;
	height: 32vh;
    display: flex;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: stretch;
}
@media only screen and (max-width: 540px) {
    img {
	height: 18vh;
}
}
/*======detailed daily styling=====*/