*{
	box-sizing: border-box;
}

p{
	margin:0;
	



}

html{
	font-size: 18px;
}

header{
	margin-top: 60px;
	margin-bottom: 50px;
	text-align: center;
	text-transform: uppercase;

}

h1{
	margin-top: 0;
	font-family: Verdana, Courier;
	font-weight:100;
}

h3{
	margin:0;
}

body{
	margin:0;

}



#picture{
	color:	#D3D3D3;
	text-shadow: 1px 1px #8c8c8c;

}

/*Content Style*/

.content{
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
}

img{
	width:300px;
	display:block;
	border-radius: 10px;
}
.pic{
	position:relative;
	overflow: hidden;
	margin-bottom: 20px;
}


.overlay{
	position:absolute;
	top:0;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background:rgba(0,0,0, .30);
	color:white;
	height:100%;
	width:100%;

}
.button{
	margin-top:10px;
	width:80%;
	border-radius: .5em;
	padding: 10px 0 ;
	background: rgba(34, 77, 250, 0.5);
	text-decoration: none;
	color:white;


}



/*Interactive CSS*/





#logo{
	transition-property: transform;
	transition-duration: .5s;
}
#logo:hover{
	transform:rotate(-10deg);
}



.overlay{
	opacity:0;
	transition-property: opacity;
	transition-duration: .5s;
	transition-delay: .2s;

}

.overlay:hover{
	opacity:1;
}

.button{
	opacity:0.5;
	transition-property: opacity,background,box-shadow;
	transition-duration: .5s;
	transition-delay: .2s, .3s,.3s;
	position:relative;
}

.button:hover{
	
	background:rgb(80, 115, 254);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); 

}

.overlay:hover .button{
	opacity:1;
}

.pic img{
	transform-origin: 0 0;
	transition-property: transform;
	transition-duration: .5s;
}

.pic:hover img{
	
	transform:scale(1.2);

}


.download-icon{
background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='#ffffff' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z' /></svg>");
width: 24px;
height: 24px;
display: inline-block;
position:absolute;
left:45%;
vertical-align: middle;
opacity:0;
transition-property: opacity,left;
transition-duration: .5s,.3s;
transition-timing-function: ease-out;



}

.button:hover .download-icon{
	opacity:1;
	left:70%;

}