html{
	font-family: "bebas", sans-serif;
	font-style: bold;
	font-weight: 300;
	margin: 0;
	background-color:#fff;
	height:auto;
}

body{
    width: 100%;
    height:100vh;
    background-color:#ffff;
    display: flex;
}
	
.topnav{
	background-color:#98007e;
	padding:1rem;
	font-size:1rem;
	top:0 0 0 0;
}
.topnav a{
	color:#fff;
	text-align: left;
	text-decoration: none;
	padding: 1.5rem;
}
.topnav a:hover{
	color:#b2081e;
}
.topnav a.active{
	background-color:#000;
	color:#b2081e;
}
span{
	text-align: right;
	margin: 0;
}
.landing-text h1{
	color: #89BBe4;
	font-weight:700;
	font-size: 5.5rem;
	text-transform:uppercase;
	text-align: center;
	margin-bottom:-15%;
}
.landing-text h2{
	color:#B0B0B0;
	font-weight:100;
	font-size:2.5rem;
	text-align: center;
	margin:15%;
}

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

.image-gallery{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
    grid-gap:1.5rem;
    grid-template-areas:
        'img-1 img-3 img-3'
        'img-1 img-2 img-4'
        'img-5 img-7 img-8'
        'img-9 img-10 img-6'
        'img-12 img-11 img-6';
}

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

.img-1{
    grid-area:img-1;
    min-height: 51.5rem;
	background-image:url("../img/Asset%206-100.jpg");
}
.img-2{
    grid-area:img-2;
	background-image:url("../img/Ginia3.jpg");
}
.img-3{
    grid-area:img-3;
	background-image:url("../img/Ginias4.jpg");
}
.img-4{
    grid-area:img-4;
	background-image:url("../img/Close%20Up%20Oil%20Vanity.jpg");
}
.img-5{
    grid-area:img-5;
	background-image:url("../img/BIA-IG-BOGO12-5-OF-5.jpg");
}
.img-6{
    grid-area:img-6;
    min-height: 51.5rem;
	background-image:url("../img/Lips.png");
}
.img-7{
    grid-area:img-7;
	background-image:url("../img/Ginia's%20FB%20Page.png");
}
.img-8{
    grid-area:img-8;
	background-image:url("../img/Suits Business Card MockUp.png");
}
.img-9{
    grid-area:img-9;
	background-image:url("../img/Both%20Oils_Vanity.jpg");
}
.img-10{
    grid-area:img-10;
	background-image:url("../img/570.png");
}
.img-11{
    grid-area:img-11;
	background-image:url("../img/IMG_2722.JPG");
}
.img-12{
    grid-area:img-12;
    min-height: -51.5rem;
	background-image:url("../img/Organic%20Skin%20and%20Scalp%20Moisturizer_Vanity.jpg");
}

footer{
	background-color:#98007e;
	color:#fff;
	margin-bottom: -4%;
	padding: 1rem;
}
p{
	text-align: left;
}
h3{
	color:#89bbe4;
	padding: -1.2rem;
}

/*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-1'
        'img-2 img-2 img-2'
        'img-3 img-3 img-3'
        'img-4 img-4 img-4'
        'img-5 img-5 img-5'
        'img-6 img-6 img-6'
        'img-7 img-7 img-7'
        'img-8 img-8 img-8'
        'img-9 img-9 img-9'
        'img-10 img-10 img-10'
        'img-11 img-11 img-11'
        'img-12 img-12 img-12';
		
}
    .image-gallery a{
        height:20rem;
    }
    
    .img-1{
        min-height: 20rem;
    }
    .img-6{
        min-height:20rem;
    }
}

/*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-1 img-2'
        'img-3 img-3 img-2'
        'img-3 img-3 img-4'
        'img-6 img-5 img-5'
        'img-7 img-7 img-8'
        'img-9 img-9 img-8'
        'img-10 img-10 img-11'
        'img-12 img-12 img-11';
		
}
		
}
}
/*Large Screen Size*/
	@media screen and (min-width:1024px){
	#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: 
		
}
}