/* Tags */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	font-family: helvetica, arial;
	margin: 0 auto;
	background: #e9e9e9;
}

div {
	display: block;
}

h2 {
	margin: 0 0 32px 0;
	font-size: 36px;
}

p {
	font-weight: 200;
}

a {
	color: #002071;
}

/* Classes */

.center-content {
	max-width: 980px;
	margin: 0 auto;
	height: 100%;
	padding: 0 16px;
}

.hero-text {
  position: relative;
	text-align: center;
	top: 35%;
	text-shadow: 0 0 64px black;
}

.project-box {
	width: 80%;
	height:320px;
	margin: 16px auto;
	background-size: cover;
	border-radius: 10px;
	position: relative;
}

@media (min-width: 650px) {
	.project-box {
			max-width:368px;
			float:left;
			margin: 0 8px 16px 8px;
	}
}

.project-box a {
	text-decoration: none;
	color: white;
}

.screen {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.65);
	text-align: left;
	font-size: 36px;
	font-weight: 600;
	padding: 16px;
	color: white;
	border-radius: 10px;
}

.screen img {
	width: 60px;
	height: 60px;
	position: absolute;
	bottom: 0;
}

/* IDs */

/* Main cover */

#hero {
	background: url('images/ny_hero.jpg') center center no-repeat fixed;
	background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  
  place-items: center;
	
  height: 100vh;
  width: 100vw;
  
	color: white;
}

@media (max-width: 650px) {
	#hero {
		background-attachment: scroll;
	}
}

#hero p {
	margin: 0;
}

#hero h1 {
	display: inline;
	font-size: 56px;
	letter-spacing: -0.05em;
	font-weight: 400;
}

#hero h2 {
	display: inline;
	font-size: 24px;
	font-weight: 200;
	letter-spacing: -0.05em;
}

@media (min-width: 650px) {
	#hero h1 {
		display: inline;
		font-size: 84px;
		letter-spacing: -0.05em;
		font-weight: 400;
	}

	#hero h2 {
		display: inline;
		font-size: 36px;
		font-weight: 200;
		letter-spacing: -0.05em;
	}
}

#hero img {
	width: 60px;
	height: 60px;
}

/* About */

#about {
	box-shadow: 0 0 16px black;
	position: relative;
	z-index: 10;
	font-size: 18px;
}

@media (min-width:650px) {
	#about {
		font-size: 22px;
	}
}

#about p {
	padding-left: 16px;
}

/* Work */

#work {
	background-color: #0d47a1;
	color: white;
	text-align: center;
  
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit);
}

#work h2 {
	text-align: left;
}

#work:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

/* Projects */

#projects {
	margin: 0;
	padding: 0;
}

#projects .project-box {
	background: #a0a0a0;
  background-size: cover;
	height: 320px;
}

@media (min-width: 650px) {
	#projects .project-box {
		max-width: 300px;
	}		
}

#projects p {
	font-size: 18px;
}

#projects:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

/* Text */

#about, #work {
	padding: 48px 0;
}

#about h2, #projects h2 {
	color: #0d47a1;
}

/* Footer */

#footer {
	font-size: 10px;
	height: 40px;
	padding: 12px 0;
	text-align: center;
	box-shadow: 0 0 16px black;
}