/* code to style the body elements and containers */
:root {
--body-color: #A68A64;
--font-size: 25px;
--image-width: 2vw + 400px;
--niko-width: 2vw + 250px;
--header-color: #656D4A;
--border-color: #333D29;
--body-paragraph-color: #AE9C7A;

--link-base: #7F4F24;
/* link opacity drops instead of changing colors */
--link-active: #875A23; /* color upon click */
}

/* PSD with background texture/image in the images folder */
body { background-color: var(--body-color); }

.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 {
	width: calc(var(--image-width));
	border-radius: 25px;
	background-color: var(--header-color);
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
}

.container .niko-image {
	width: calc(var(--niko-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;
	border-radius: 25px;
	background-color: var(--header-color);
	border-style: solid;
	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: var(--body-paragraph-color);
	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 ----------------- */