@import url('https://fonts.googleapis.com/css?family=Quicksand');

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
	margin: auto 0;
	background-color: #F9F9F9;
	font-family: calibri, arial;
	font-size: 12px;
	color: white;
	display: block;
}

.zone {
	display: flex;
	overflow: visible;
	justify-content: center;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
}


/* BEGIN NAV ITEMS */
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

.top-zone {
	width: 80%;
	/* background-color: none; troubleshooting line */
	background-image: linear-gradient(#212A34, #19212A); 
	border-radius: 7px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
}

.main-nav {
	display: flex;
	list-style: none;
	margin: 0;
	font-size: 2em;
	padding: 20px;
	font-family: 'Quicksand', sans-serif;
}

.main-nav li {
	padding: 20px;
}

.main-nav a {
	text-decoration: none;
	color: white;
}

.main-nav a:hover {
	text-decoration: none;
	color: #26D381;
}

.push {
	margin-left: auto;

}
/* END NAV ITEMS */

/* Showcase */
/* Background vector created by GraphiqaStock */
.showcase {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background-image: linear-gradient(#ffeff3, #edd3d9);
	width: 70%;
	margin-top: 30px;
}

.showimg {
	padding-top: 7%;
	width: 30rem;
}

/* Portfolio */
.portfolio {
	display: grid;
	grid-gap: 20px;
	width: 75%;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	background-color: #212A34;
	border-radius: 7px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
	padding: 20px;
}

.port-items {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	border-radius: 7px;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.1);
	background-color: #26D381;
	transition: 500ms;
}

.port-items:hover {
	transform: scale(1.05, 1.05);
}

@media only screen and (max-width: 1442px) {
	.top-zone {
		width: 100%;
	}
	.showcase {
		width: 100%;
	}
	.portfolio {
		width: 100%;
		height: 70vh;
		align-items: start;
		grid-template-rows: repeat(2, 1fr) 100rem;
	}
}