@charset "utf-8";

body {
	padding: 0;
	margin: 0;
}

.wrapper {
	padding: 0;
	margin: 0;
	font-family: helvetica;
}

header {
	background-color: #a37f6f;
	padding: 3.125rem;
	text-align: center;
	font-size: 36pt;
	color: aliceblue;
	margin-bottom: 1px;
}

/* menu */
.menu ul {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 0;
	
}

.menu li {
	padding: 1.875rem;
	background-color: #6c9890;
	text-transform: uppercase;
	text-align: center;
	font-size: 12pt;
	margin: 0 1px 0 1px ;
}

.menu li a {
	text-decoration: none;
	color: aliceblue;	
}

.menu li:hover {
	background-color: #314570;
	font-weight: bold;
}

.menu .active {
	background-color: #314570;
	font-weight: bold;
}

.hero {
	background-image: url(../img/hero.jpg);
	padding: 125px;
	background-repeat: no-repeat;
	background-size: cover;
}

p {
	font-size: 36pt;
	color: aliceblue;
	padding: 0;
	margin: 0;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-template-rows: repeat(4, 250px);
	padding: 0;
	margin: 1px 0 0 0;
	grid-gap: 1px;
}

.box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.footer {
	background-color: #314570;
	padding: 1.25rem;
	color: aliceblue;
	text-align: center;
}

.footer a {
	color: aliceblue;
	text-decoration: none;
}