/* ---Color Palette

#343434 - dark gray - almost black
#F2F2F2 - light gray
#195A24 - deep green - header pattern background color
#DBE5DD - pale green - menu pattern background color
#611505 - dark maroon - navbar
--- */

/* ---Global Styles--- */
body {
	color: #343434;
	margin: 0;
	padding: 0;
	font: 18px 'Garamond', serif;
	line-height: 1.25;
}

h1 {
	font-family: 'Helvetica', sans-serif;
	font-size: 36px;
	text-align: center;
	margin: 20px 0 0 0;
}
h2, h3 {
	font-family: 'Helvetica', sans-serif;
}
.logo-wrap {
	text-align: center;
	margin: 0 auto;
	padding: 20px 0 0;
}

/* ---Header--- */
header { /*  This is the background color and pattern ('endless clouds' from heropatterns.com) for the header block */
	background-color: #195A24;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%231bea18' fill-opacity='0.59' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
}

/* --- Navigation ---*/
/* Add a dark maroon background color to the top navigation bar */
.topnav {
  overflow: auto;
  background-color: #611505;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: inline-block;
  color: #F2F2F2;
  text-align: center;
  padding: 10px 32px;
  text-decoration: none;
  font-size: 17px;
}
/*  Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/*  Add an active class to highlight (underline) the current page link in topnav */
.topnav .active {
  color: white;
  text-decoration: underline;
}
/*  Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* ---Main--- */
.content-item {
	display: grid;			/* creating a grid to align the home page and about us page content*/
	grid-template-columns: 1fr 2fr;
	column-gap: 10px;
	text-align: center;
	margin: 30px 5%;
}
.content-item a:link, .contact-item a:link {
	color: blue;
}
.content-item a:visited, .contact-item a:visited {
	color: blueviolet;
}
.gallery-item {
	text-align: center;
	margin: 30px 5%;
}
.menu-item {
	background-color: #DBE5DD; /* background color and pattern ('lines in motion' from heropatterns.com) for the menu items */
	background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%2375a77b' fill-opacity='0.29' fill-rule='evenodd'/%3E%3C/svg%3E");	
	display: grid;			/* creating a grid to align the menu page content*/
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	text-align: center;
	margin: 30px 5%;
}
.contact-item {
	display: grid;			/* creating a grid to align the contact page content*/
	grid-template-columns: 1fr 1fr;
	column-gap: 10px;
	text-align: center;
	margin: 30px 5%;
}
/* ---Footer--- */
footer {
	background-color: #611505;
	color: #F2F2F2;
	display: flex;					/*  creating a flex box to align the copyright text */
  	justify-content: center;
 	font-size: 15px;
 	margin: 0;
 	padding: 0;
}

/* ---Responsive Styles--- */
/* For screen widths >= 751px*/
@media screen and (min-width: 751px) {
	.topnav {
		display: flex;						/* creating a flex box to align nav links*/
  		justify-content: center;
	}
}

/* When the screen  width < 750px wide, hide all links, except for the first one
("Home"). Show the link that contains should open and close the topnav (.icon)
Re-aligns the page content into a single column */
@media screen and (max-width: 750px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .content-item, .menu-item, .contact-item {
		display: grid;
		grid-template-columns: 1fr;
		text-align: center;
		margin: 22px 20px 20px 22px;
	}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on 
the icon. This class makes the topnav look good on small screens (display the links 
vertically instead of horizontally) */
@media screen and (max-width: 750px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}