@import url(https://api.fontshare.com/css?f[]=tanker@400&display=swap);

* {
	box-sizing: border-box;
}

body {
	background-color: #0F3C4C;
	color: white;
	font-family: sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: 'Tanker', sans-serif;
}

h1 {
	font-size: 2.6rem;
	line-height: 3rem;
}

a {
	color: hsl(196, 67%, 60%);
	text-decoration: none;
}

main {
	max-width: 1000px;
	margin: 0 auto;
	padding: 80px 0;
}

.logo {
	max-width: 200px;
}

section {
	display: flex;
	padding: 60px 0 60px;
	justify-content: space-between;
	align-items: center;
}

.content {
	padding: 16px;
	flex: 1;
}

.img {
	flex: 1;
}

.hero {
	background-image: url(assets/jon-flobrant-_r19nfvS3wY-unsplash.jpg);
	background-color: #0F3C4C;
	background-size: cover;
	width: 100%;
	min-height: 80vh;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.hero .intro {
	max-width: 1000px;
	text-align: center;
}

img {
	max-width: 400px;
}



/*.personal {
	display: flex;
}*/

.profile {
	/* justify-content: space-around; */
	max-width: 300px;
}
.profile .headshot {
	width: 100%;
	margin-bottom: 20px;
}

.profile .name {
	font-family: 'Tanker', sans-serif;
	font-size: 1.6rem;
}

footer {
	padding: 80px;
	background-color: rgb(0, 0, 0);
	text-align: center;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
	section {
	  flex-direction: column;
	}
	img {
		width: 100%;
	}
	h1 {
		font-size: 1.8rem;
	}
	.profile .headshot img{
		width: 100%;
		max-width: 300px;
		margin: 0 auto 20px;
	}
	
	.profile {
		padding: 0;
		width: 100%;
	}
  }