@charset "utf-8";
/*Typography*/
* {
	box-sizing: border-box;
	margin-top: 0;
}
h1 {
	font-family: Satoshi, sans-serif;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
}
.hero {
	background-color: #444;
	background-image: url("assets/background.jpg");
	background-size: cover;
	height: 100vh;
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.hero h1{
	font-size: 60px;
}
div.projects{
background-color: black;
display: flex;
flex-direction: column;
text-align: center;
padding: 12vh 0;
justify-content: space-around;
}
div.project-card{
flex-basis: 100%;
}
div.project-card h2{
	color: white;
	font-family: Satoshi, sans-serif;
}
div.project-card p{
	color: white;
	text-align: center;
}

div.contact img{
width: 100%;
height: auto;
}

@media(min-width: 40rem) {
	div.projects{
		flex-direction: row;
	}
	div.project-card{
		flex-basis: 30%;
	}
	div.contact-text{
		flex-basis: 50%;
	}
	}