/* CSS file contains styles for body content across website:
	- grid contents
	- body text
	- body images
*/
:root {
	--body-color: #A68A64; /* keep hex value for future design reference */
	--image-width: 2vw + 400px;
	--header-color: #656D4A;
	--border-color: #333D29;
	--body-paragraph-color: #AE9C7A; /* keep hex value for future design reference */
	--font-size: 25px;
	--link-base: #7F4F24;
	/* link opacity drops instead of changing colors */
	--link-active: #875A23; /* color upon click */
}

/* ----------------------------------------------------- */
/* <uniquifier>: Use a unique and descriptive class name */
 
/* <weight>: Use a value from 300 to 800 */
.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
/* <weight>: Use a value from 300 to 900 */
.figtree-<uniquifier> {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* ----------------------------------------------------- */

/* PSD with background texture/image in the images folder */
body { 
	background-image: url(../images/body_dirt.png); 
	font-family: "figtree", "Open Sans", "Times New Roman";
}


.container {
	display: grid; 
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	/* padding var order: top, right, bottom, and left */
	padding: 10px 10px 20px 10px; /* increased padding on the bottom for to top button */
}

.container > div {
	align-content: center;  /* background-color: #f1f1f1; */
	font-size: var(--font-size);
	text-align: center;
}

.container .image {
	display: grid; 
	width: calc(var(--image-width));
	border-radius: 25px;
	background-color: var(--header-color);
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
}

@media screen and (max-width: 1200px) {
	/* fit text to viewport as the window size decreases */
	.container > div { font-size: 2.5vw; }
}

@media screen and (max-width: 900px) {
	.container {
		/* switch to single column grid layout */
		display: grid;
		grid-template-columns: 1fr;
	}
	.container > div { font-size: 3.5vw; }
}

/* start expanding text when container gets smaller */
@media screen and (max-width: 600px) {
	.container > div { font-size: 4.5vw; }
}

@media screen and (max-width: 400px) { 
	.container > div { font-size: 5.5vw; }
}
/* ------------------------------------------------ */


.container .section_titles {
	/* all of the large h2 headings on every page */
	grid-column: 1 / span 3;
	background-color: var(--header-color);
	
	border-style: solid;
	border-radius: 25px;
	border-width: 1px;
	border-color: var(--border-color);
}

.container > div > h2{
	display: grid;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.container div > h3{
	font-size: var(--font-size);
}

.container div > h4{
	background-color: var(--header-color);
	border-radius: 25px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	max-width: 1080px;
	margin: auto;
}

.container > div > p {
	background: url(../images/paragraph_dirt.png);
	border-radius:15px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	
	padding: 25px;
	margin: 10px auto auto auto;
	max-width: 1080px;
	text-align: center;
}

/* -------------------- styling links ------------------- */
.container a:link {
	text-decoration: none;
	color: var(--link-base);
}

.container a:hover  {
	text-decoration: none;
	opacity: 0.7;
}

.container a:active {
	text-decoration: none;
	color: var(--link-active);
}

.container a:visited {
	text-decoration: none;
	color: var(--link-base);
}
/* ------------------ end styling links ----------------- */