/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 306).

The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve a similar layout.

*/

/* Fonts */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/* Base Styles */

:root {
	/* Base font size */
	font-size: 10px;
}

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

body {
	font-family: 'Zilla Slab', serif;
	min-height: 100vh;
	background-color: #fff;
	color: #262626;
	padding: 0;
	margin: 0;
}

img {
	display: block;
}

.container {
	max-width: 160rem;
	margin: 0 auto;
	padding: 0 2rem;
}

.sub-header {
	display: flex;
	align-items: center;
  justify-content: center;
	text-align: center;
	padding: 5rem;
	font-size: 5rem;
	flex-direction: column;
}

.sub-header > h3 {
  font-size: 5rem;
	font-family: 'Zilla Slab', sans-serif;
}

.sub-header > h4 {
	font-size: 1.5rem;
	padding-top: 1rem;
}

footer {
	background-color: #f2f2f2;
	color: #000;
	padding: 0;
	margin: 0;
	height: 100%;
	max-width: 100%;
}

footer > div.contents {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

footer > div.info {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.5rem;
	padding: 2rem 5rem;
}

footer > div.info > p:first-child {
	align-self: flex-start;
}

footer > div.info > p:last-child {
	margin-left: auto;
}

footer > div.contents > section {
	flex: 1;
	flex-grow: 1;
	flex-basis: 0;
	padding: 8rem 5rem 0;
	min-width: 40rem;
}

footer > div.contents > section > h3 {
	padding-bottom: 3rem;
	font-size: 3rem;
	text-align: center;
	font-family: 'Zilla Slab', sans-serif;
}

footer > div.contents > section > article {
	padding-bottom: 3rem;
	font-size: 1.5rem;
	letter-spacing: 0.01rem;
	line-height: 1.2;
}

/* Gallery Section */

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: -0.5rem -0.5rem;
	padding-bottom: 5rem;
}

.gallery-item {
	position: relative;
	border: 2rem solid #fff;
	flex: 1 0 30rem;
	margin: 1rem;
	color: #fff;
	cursor: pointer;
	box-shadow: 8px 10px 28px -5px rgba(0,0,0,0.36);
}

.gallery-item.empty {
	border: 20px solid transparent;
	box-shadow: none;
}

.gallery-text {
	display: flex;
	flex-direction: column;
	color: #000;
}

.gallery-text > span {
	text-align: center;
	padding: 1.2rem;
}

.gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Media Query */

/* @media screen and (max-width: 1390px) {
	.container {
		background-color: yellow;
	}

	.gallery-item {
		flex: 1 0 20rem;
	}
}


@media screen and (max-width: 1140px) {
	.container {
		background-color: violet;
	}

	.gallery-item {
		flex: 1 0 18rem;
	}
} */

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.

*/

/* @supports (display: grid) {
	.profile {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-rows: repeat(3, auto);
		grid-column-gap: 3rem;
		align-items: center;
	}

	.profile-image {
		grid-row: 1 / -1;
	}

	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		grid-gap: 2rem;
	}

	.profile-image,
	.profile-user-settings,
	.profile-stats,
	.profile-bio,
	.gallery-item,
	.gallery {
		width: auto;
		margin: 0;
	}

	@media (max-width: 40rem) {
		.profile {
			grid-template-columns: auto 1fr;
			grid-row-gap: 1.5rem;
		}

		.profile-image {
			grid-row: 1 / 2;
		}

		.profile-user-settings {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 1rem;
		}

		.profile-edit-btn,
		.profile-stats,
		.profile-bio {
			grid-column: 1 / -1;
		}

		.profile-user-settings,
		.profile-edit-btn,
		.profile-settings-btn,
		.profile-bio,
		.profile-stats {
			margin: 0;
		}
	}
} */