html {
	background-color: var(--black);
	display: inline-block;
	margin: 0px auto;
	font-family: "Arial Nova";
	color: var(--white);
	text-align: center;
}

:root {
	--black: #171717;
	--white: #e6e6e6;
	--colorOne: #f4a127;
	--colorTwo: #ffecb4;
	--colorThree: #5a3d2b;
	--colorFour: #75c8ae;

	--gridColumnsAuto: auto auto auto auto auto auto;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

body {
	margin-top: 30px;
}

/* HEADER */
h1 {
	font-size: 60px;
	text-transform: uppercase;
}

.stripeOne {
	font-family: elephant;
	text-transform: capitalize;
	font-size: 30px;
	color: black;
	background-color: var(--colorOne);
	margin-top: 30px;
	margin-bottom: 10px;
	padding: 5px;
}

.stripeTwo {
	font-family: elephant;
	font-size: 10px;
	color: black;
	background-color: var(--colorTwo);
	margin-bottom: 10px;
}

.stripeThree {
	font-family: elephant;
	font-size: 10px;
	color: black;
	background-color: var(--colorThree);
	margin-bottom: 10px;
}

.stripeFour {
	font-family: elephant;
	font-size: 10px;
	color: black;
	background-color: var(--colorFour);
	margin-bottom: 10px;
}

/* NAVIGATION */
.nav-grid-container {
	display: grid;
	grid-template-columns: var(--gridColumnsAuto);
	overflow: auto;
	white-space: nowrap;
	margin-top: 30px;
	grid-gap: 30px;
	font-style: italic;
}

.nav-grid-item {
	padding: 10px;
	background: var(--white);
	color: black;
	text-transform: uppercase;
	font-weight: bold;
}

.nav-grid-photo {
	max-width: 400px;
	width: 70vw;
	max-height: 400px;
	height: 70vw;
	padding-top: 10px;
	margin-left: auto;
	margin-right: auto;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);
}

/* GALLERY */
.grid-container {
	display: grid;
	justify-content: center;
	grid-template-columns: auto;
	margin-top: 30px;
	grid-gap: 10px;
}

.grid-title {
	font-family: elephant;
	text-transform: capitalize;
	font-size: 30px;
	color: black;
	background-color: var(--colorOne);
	padding: 5px;
}

.grid-stripe {
	font-family: elephant;
	font-size: 10px;
	color: black;
	background-color: var(--colorFour);
}

.grid-item {
	padding: 10px;
	background: var(--white);
	color: black;
	text-transform: uppercase;
	font-weight: bold;
}

.grid-photo {
	max-width: 500px;
	width: 80vw;
	max-height: 500px;
	height: 80vw;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	object-fit: cover;
	display: block;
}