:root {
	--background-color: #cdcdcd;
	--main-color: #b5b4b4;
	--boxes-padding: 20px;
    --text-color: rgb(39, 39, 39);
	--accent-color: rgb(218, 212, 129);
    --header-font: "Cormorant Garamond", serif;
    --navigation-font: "Proza Libre", "Trebuchet MS", sans-serif;
}

body {
	background-color: var(--background-color);
    color: var(--text-color);
	min-height: 100vh;
	display: grid;
}


.container {
	display: grid;
	grid-template-columns: 1fr minmax(auto, 1000px) 1fr;
	grid-template-rows: auto auto 1fr auto;
	min-height: 100vh;
}


header,
nav,
main,
footer {
	grid-column: 2;
}

header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: solid var(--accent-color) 2px;
	background-color: var(--main-color);
	padding: var(--boxes-padding);
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: left;
	border-bottom: solid var(--accent-color) 2px;
	background-color: var(--main-color);
	padding: var(--boxes-padding);
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--main-color);
	padding: var(--boxes-padding);
}

main img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}


footer {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-top: solid var(--accent-color) 2px;
	background-color: var(--main-color);
	padding: var(--boxes-padding);
	max-height: 5vh;
}

footer img {
	max-width: 50%;
	max-height: 50%;
	object-fit: contain;
}

footer img:hover {
    filter: brightness(150%); 
}

.view-all {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 10px;
}

.gallery-item {
	height: 200px;
	flex-grow: 0;
	margin: 20px;
}

.gallery-item img {
	max-height: 100%;
	min-width: 100%;
	box-shadow: 7px 7px 5px #585858;
}

header a {
	color: var(--text-color);
	font-size: 22px;
	font-family: var(--header-font);
	font-weight: 400;
	font-style: bold;
	text-decoration: none;
    padding-right: 50px;
}

header a:hover {
	color: var(--accent-color);
}

nav a {
	color: var(--text-color);
	font-size: 16px;
	font-family: var(--navigation-font);
	font-weight: bold;
	text-decoration: none;
}

nav a:hover {
	color: var(--accent-color);
}

.contact-container {
	display: flex;
    flex-wrap: wrap;
	width: 100%;	
    align-items: flex-start;
	justify-content: center;
    gap: 20px; /* Adds space between the text and image */
    padding: 0px;
}

.contact-text {
	flex: 2; 
	align-self: flex-start; 
	padding-left: 0; 
    min-width: 200px;
	font-size: 20px;
	font-family: var(--navigation-font);
	font-weight: 400;
	text-align: left;
	line-height: 1.3;
}

.contact-image {
    flex: 1;
	height: 70%;
    min-width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contact-image img {
    max-width: 100%;
    height: auto;
    display: block;
}