html{
	font-family: "bebas", sans-serif;
	font-style: bold;
	font-weight: 300;
	margin: 0;
	background-color:#000;
	height:auto;
}
	
#topnav{
	background-color:#98007e;
	padding:1rem;
	font-size:1rem;
	top:0;
}
#topnav a{
	color:#fff;
	text-align: left;
	text-decoration: none;
	padding: 1.5rem;
}
#topnav a:hover{
	color:#b2081e;
}
span{
	text-align: right;
	margin: 0;
}
#landing-text h1{
	color: #89BBe4;
	font-weight:700;
	font-size: 5.5rem;
	text-transform:uppercase;
    padding-right: 5rem;
}
landing-text h1{
	text-align: center;
}
#landing-text h2{
	color:#B0B0B0;
	font-weight:100;
	font-size:2rem;
   	text-align:center;
    margin-right: inherit;
}

.container{
	width:100%;
	max-width:120rem;
	margin:auto;
	padding: 0 1.5rem;
}

.image-gallery{
	display:grid;
	grid-template-columns: repeat;
	grid-template-rows: auto;
	grid-gap:1rem;
	grid-template-areas: 
		"img-1 img-2 img-3"
		"img-4 img-5 img-6"
		"img-7 img-8 img-9";
}

.image-gallery a{
	width:100%;
	height:25rem;
	background-position: center;
	background-repeat:no-repeat;
	background-size: cover;
	position: relative;
	display:flex;
	align-items: center;
	justify-content: center;
}

.img-1{
	grid-area: img-1;
	min-height: 51.5rem;
	background-image:url("../img/Designer fb Cover Mockup 2.png");
}
.img-2{
	grid-area: img-2;
	background-image:url("../img/Dotto Mock Up 2.png");
}
.img-3{
	grid-area: img-3;
	background-image:url("../img/Flat Illsutrator Vector Logo-04.png");
}
.img-4{
	grid-area: img-4;
	background-image:url("../img/Jump Start Logo Mockup.png");
}
.img-5{
	grid-area: img-5;
	background-image:url("../img/Jump Start Stationary Branding Mockup.png");
}
.img-6{
	grid-area: img-6;
	min-height: 51.5rem;
	background-image:url("../img/Paintball Business Card MockUp.png");
}
.img-7{
	grid-area: img-7;
	background-image:url("../img/Pasta Amora Project Samples.png");
}
.img-8{
	grid-area: img-8;
	background-image:url("../img/Suits Business Card MockUp.png");
}

footer{
	background-color:#000;
	color:#fff;
    padding: 1rem;
}
p{
	text-align: center;
}
h3{
	color:#89bbe4;
	padding: -1.2rem;
    text-align: center;
}

/*Small (phone) Screen Sizes*/
@media screen and (max-width: 767px){
	#landing{
		display:flex;
		height:100%;
	}
	
	#landing-text{
		height:100vh;
		text-align: center;
	}
	.image-gallery{
		grid-template-areas: 
		"img-1 img-1"
		"img-2 img-2"
		"img-3 img-3"
		"img-4 img-4"
		"img-5 img-5"
		"img-6"
		"img-7 img-7"
		"img-8 img-8";
}
}
.img-1{
	box-sizing: content-box;
	margin: auto;
}
.img-2{

}
/*Medium (tablet) Screen Size*/
@media screen and (max-width:1023px){
	#landing{
		display:flex;
		height:100%;
	}
	
	#landing-text{
		height:100vh;
		text-align: center;
	}
	.image-gallery{
	display:grid;
	grid-template-columns: repeat;
	grid-template-rows: auto;
	grid-gap:1rem;
	grid-template-areas: 
		"img-1 img-2"
		"img-3 img-2"
		"img-3 img-4"
		"img-5 img-4"
		"img-5 img-6"
		"img-7 img-6"
		"img-7 img-8";
}
}
/*Large Screen Size*/
@media screen and (min-width:1024px){
	#landing{
		display:flex;
		height:100%;
	}
	
	#landing-text{
		height:100vh;
		text-align: center;
	}
    .landing-text h1{
        margin:0;
        position: absolute;
        top:50%;
        left:50%;
        margin-right:-50%;
        transform:translate(-50%, -50%)    }
	.image-gallery{
	display:grid;
	grid-template-columns: repeat;
	grid-template-rows: auto;
	grid-gap:1rem;
	grid-template-areas: 
		"img-1 img-2"
		"img-3 img-4"
		"img-5 img-6"
		"img-7 img-8";
}
}