:root {
	--nav-height: 5.5rem;
	--nav-border-width: 2px;
	--nav-padding: 0.5rem;
}

:root,
.light {
	--page-text-color: #143057;
	--page-background-color: #f6f6f6;
	--page-background-color--rgb: 246, 246, 246;
	--content-border-color: #182C55;
	--ends-background-color: #182C56;
	--ends-background-color--rgb: 24, 44, 86;
	--link-color: #0645ad;
	--link-color--hover: #0b0080;
	--link-color--missing: #808080;
	--footer-text-color: #969EB6;

	--main-color-1: #ffffff;
	--main-color-2: #91AED6;
	--main-color-3: #79B791;

}

/*****************
* base framework *
******************/
html {
	scroll-behavior: smooth;
}

body {
	background: var(--page-background-image) no-repeat;
	background-color: var(--page-background-color);
	background-size: cover;
	background-attachment: fixed;
	font-family: sans-serif;
	font-size: 1.25em;
	line-height: 1.3em;
	color: var(--page-text-color);
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#mobile-menu {
	display: none;
	user-select: none;
}

main {
	flex: 1;
	align-self: center;
	clear: both;
	width: 100%;
	margin-top: calc(var(--nav-height) + var(--nav-border-width));
	/* 	max-width:1024px; */
}

.main-logo {
	height: calc(var(--nav-height) - var(--nav-padding));
	width: auto;
	vertical-align:middle;
}

.main-logo__link {
	flex: 0 1 auto;
}

.contentBlob {
	padding: 1em;
	clear: both;
}

.contentBlob.no-padding {
	padding: 0;
}

.contentBlob-inner {
	width: calc(50% - 3px);
	text-align: center;
}

.contentBlob-inner.right {
	border-left: 1px solid #ccc;
}

/*********************
* end base framework *
**********************/

/*******
* Hero *
********/
.hero-container {
	position: relative;
	height: 500px;
	overflow: hidden;
	background-color: var(--ends-background-color);
	border-bottom: 1px solid var(--ends-background-color);
}

.hero-container img {
	position: relative;
	top: -150px;
	width: 1250px;
}

.hero-container .hero-text {
	position: absolute;
	top: 20%;
	width: clamp(10em, 100%, 43%);
	padding: 1em;
	box-sizing: border-box;
	right: 0;
	color: var(--main-color-3);
	z-index: 2;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.25em;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
}

.hero-container h1 {
	padding: 0;
	color: var(--main-color-1);
}

.hero-darken {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to left, rgba(var(--ends-background-color--rgb), 01.75) clamp(10em, 100%, 43%), transparent clamp(10em, 100%, 63%));
	z-index: 1;
}


/***********
* headings *
************/
h1 {
	position: relative;
	text-align: left;
	font-size: 2.5rem;
	margin: 0;
	padding: 2rem 1.25rem;
	line-height: 2.5rem;
	background-image: linear-gradient(to right, var(--main-color-3), transparent);
	background-size: 50% 2px;
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: left 0px bottom -0.5rem;
}

h1,
h2 {
	font-family: Montserrat, Helvetica, sans-serif;
}

.contentBlob:not(.no-padding)>h1 {
	padding-left: 0;
}

.anchor {
	visibility: hidden;
	position: absolute;
	top: calc((var(--nav-height) + var(--nav-border-width)) * -1);
}

/***************
* end headings *
****************/

/***************
* image styles *
****************/
.anchor-center {
	align-items: center;
}

.anchor-right {
	align-items: flex-end;
}

.anchor-left {
	align-items: flex-start;
}

/*******************
* end image styles *
********************/

/**************
* link styles *
***************/

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

a:hover,
a:focus,
a:active {
	color: var(--link-color--hover);
	text-decoration: underline;
}

a.not-a-link {
	color: inherit;
}

/******************
* end link styles *
*******************/

/*********
* navbar *
**********/
nav {
	position: fixed;
	background-color: var(--ends-background-color);
	--link-color: var(--main-color-3);
	--link-color--hover: var(--main-color-3);
	border-bottom: var(--nav-border-width) solid var(--main-color-3);
	display: flex;
	align-items: center;
	flex-flow: row;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	padding: var(--nav-padding);
	z-index: 3;
	height: calc(var(--nav-height) + var(--nav-border-width));
}

#navbar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

#title {
	display: block;
	height: 100%;
	line-height: 100%;
	font-size: 2em;
	margin: 0;
	padding: 0.25em;
}

#navbar li {
	display: inline-block;
	margin: 0.3em;
	padding: 0.5em;
	height: 100%;
}

#navbar a {
	font-weight: bold;
}


/*************
* end navbar *
**************/

/*******************
* Alternating Grid *
********************/
.grid-row {
	display: flex;
}

.grid-row:nth-child(2n) {
	flex-direction: row-reverse;
}

.grid-item {
	display: flex;
	flex-direction: column;
	width: 50%;
	border: 1px solid var(--ends-background-color);
	border-width: 1px 0;
	box-sizing: border-box;
}

.grid-row:only-of-type .grid-item {
	border:none;
}

.grid-item.image {
	flex-direction: row;
	overflow: hidden;
	justify-content: center;
}

.grid-item.image img {
	width: 100%;
	height: 100%;
	max-height: 600px;
	object-fit: cover;
}

.grid-item.text {
	align-items: center;
	justify-content: center;
	padding: 1em;
	/*! box-shadow: inset 0 0 0 1px var(--main-color-2); */
}

.grid-item.color-1 {
	background-color: var(--main-color-1);
}

.grid-item.color-2 {
	background-color: var(--main-color-2);
}

.grid-item.color-3 {
	background-color: var(--main-color-3);
}

/***********************
* End alternating grid *
************************/

/*********
* Footer *
**********/
footer {
	 margin-top: 4em;
	padding: 2em;
	padding-bottom: 0;
	text-align: center;
	color: var(--footer-text-color);
	background-color: rgba(var(--ends-background-color--rgb), 1);
	border-top: 2px solid var(--content-border-color);
	font-size: 0.9em;
	min-height: 3em;
	justify-self: flex-end;
}

/*************
* End footer *
**************/

/**********************
* Contact list styles *
***********************/
.contact-list {
	list-style: none;
}

/*******************
* End contact list *
********************/

/****************
* Donate button *
*****************/
.donate-button {
	padding: 0.5em;
	background-color: var(--main-color-3);
	color:var(--main-color-1);
	border:1px solid var(--ends-background-color);
	border-radius:3px;
	font-weight:bold;
	text-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

.donate-button:hover,
.donate-button:focus,
.donate-button:active {
	text-decoration:underline;
	color:var(--main-color-1);
	box-shadow:inset 0 0 0.2em 0.3em rgba(0,0,0,0.1);
}