@font-face {
	font-family: 'Andika';
		src: url(/fonts/Andika-Regular.woff2) format('woff2'),
			url(/fonts/Andika-Regular.woff) format('woff');
	font-feature-settings:
		"cv04" 1, /* open 4 */
		"cv06" 1, /* slanted stems on 6 and 9 */
		"cv51" 1, /* q's tail */
		"cv52" 1; /* Q's tail */
}

@font-face {
	font-family: 'Caroni';
	src: url(/fonts/Caroni.woff2) format('woff2'),
		url(/fonts/Caroni.woff) format('woff');
}

* {
	padding: 0px;
	margin: 0px;
}

body {
	position: relative;
	margin: 0;
	font: 18px Andika;
	background-color: var(--theme-color-1);
	background-repeat: no-repeat;
	text-align: justify; /* Should this only be on p's? */
	--block-bottom-margin: 100px;
	--theme-color-1: hsl(148 27% 85%);
	--theme-color-2: hsl(148 27% 80%);
	--theme-color-3: hsl(148 27% 74%);
	--theme-color-4: hsl(148 27% 66%);
	--theme-color-5: hsl(148 27% 55%);
	--small-nav-drop-height: 40px;
}

body, html {
	overflow-x: hidden;
}

main {
	/* padding-top: 100px; */
}

#title-region {
	background-color: var(--theme-color-5);
}

#title-block {
	padding-top: 125px;
	padding-bottom: 50px;
	margin-bottom: calc(var(--block-bottom-margin) + 50px);
}

.page-title {
	text-align: center;
	font: clamp(4em, 14vw, 8em) Caroni;
	color: whitesmoke;
}

.shadow {
	filter: drop-shadow(0px 5px 2px rgb(0 0 0 / 0.3));
}

p~p {
	margin-top: .75em;
}

.narrow-block, .block, .wide-block {
	margin: 0 auto var(--block-bottom-margin);
}

.narrow-block {
	width: min(90%, 550px);
}

.block {
	width: min(90%, 850px);
}

.wide-block {
	width: min(90%, 1100px);
}

.region {
	width: 100%;
	position: relative;
}

.wavy-divider-top, .wavy-divider-bottom {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 1;
}

.wavy-divider-top {
	top: -1px;
}

.wavy-divider-bottom {
	top: calc(100% - 1px);
}

.footer-decoration {
	--footer-height: 10px;
	--footer-divider-height: 170px;
	height: var(--footer-height);
	padding-top: var(--footer-divider-height);
	background-color: var(--theme-color-5);
}

@media (max-width: 781px) {
	.wavy-divider-top, .wavy-divider-bottom {
		transform: scaley(.7);
		transform-origin: top;
	}

	.footer-decoration {
		padding-top: calc(0.7 * var(--footer-divider-height));
	}
}

.side-by-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5em;
}

.side-by-side>.heading {
	font: 2.25em Caroni;
	font-weight: 600;
	text-align: center;
}

.button-stack {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	gap: 1.5em;
}

.button {
	padding: .4em 1.5em .6em;
	display: inline-block;
	background-color: var(--theme-color-5);
	border-radius: 4px;
	text-decoration: none;
	color: ghostwhite;
	white-space: nowrap;
}

@media (min-width: 782px) {
	.side-by-side {
		flex-direction: row;
	}

	.side-by-side.swap {
		flex-direction: row-reverse;
	}

	.side-by-side>.heading {
		text-align: right;
		flex-basis: 33.33%;
	}

	.side-by-side.swap>.heading {
		text-align: left;
	}

	.side-by-side>.text {
		flex-basis: 66.66%;
		flex-grow: 1;
	}

	.button-stack {
		flex-direction: column;
	}
}

.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
}

/* Navigation Menu Things */

.navigation-bar-background {
	width: 100%;
	height: 100%;
	background-color: var(--theme-color-1);
}

#main-menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-start;
}

header {
	position: fixed;
	width: 100%;
	z-index: 10;
}

header .region {
	position: relative;
	top: -1px;
}

.logo-box.shadow {
	z-index: -1;
}

.sub-menu-container {
	display: grid;
	grid-template-rows: 0fr;
	grid-template-columns: max-content;
	position: absolute;
	top: 2.5em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background-color: var(--theme-color-1);
	border-radius: 10px;
	transition: grid-template-rows .5s, margin .5s, border-width .25s .25s;
	border: solid var(--theme-color-3);
	border-width: 0;
	box-shadow: 0px 3px 5px rgb(0 0 0 / 0.4);
}

.sub-menu {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	overflow: hidden;
}

#main-menu .sub-menu>li:not(:last-child) {
	border-bottom: 4px solid var(--theme-color-3);
}

#main-menu>li {
	position: relative;
	z-index: 100;
}

.has-sub-menu>span::before {
	content:"+";
	margin-right: 5pt;
	display: inline-block;
	transition: transform .5s;
	transform: rotate(0deg);
}

.has-sub-menu.expanded>span::before {
	transform: rotate(135deg);
}

.has-sub-menu.expanded>.sub-menu-container {
	grid-template-rows: 1fr;
	border-width: 4px;
	transition: grid-template-rows .5s, margin .5s, border-width .25s;
}

@media(hover: hover) and (pointer: fine) {
	@media(min-width: 782px) {
		.has-sub-menu:hover>.sub-menu-container {
			grid-template-rows: 1fr;
			border-width: 4px;
			transition: grid-template-rows .5s, margin .5s, border-width .25s;
		}
	}

	.logo-box:has(~.logo-box #logo-mask:hover)>.logo-img {
		transform: rotate(-15deg) scale(1.05);
	}
}

#main-menu :is(span, a) {
	color: unset;
	width: 100%;
	display: inline-block;
	padding: .5em 1em .5em 1em;
	box-sizing: border-box;
	text-underline-offset: 0.25ch;
	text-decoration: none;
	text-align: center;

}

#main-menu :is(span, a):hover {
	text-decoration: underline;
}

#main-menu, .sub-menu {
	list-style: none;
}

.logo-box {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
}

.logo-img {
	width:90%;
	margin: auto;
	transition: transform .3s;
}

/* There is room to further simplify this, especially if keeping the "minus" animation.  I think the hamburger-box is just not necessary at all? */
.hamburger {
	position: absolute;
	top:10px;
	right: 10px;
	z-index: 100;
}

.hamburger {
	display: none;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: #000;
}

.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
	position: absolute;
	transition-property: top, bottom;
	transition-duration: 0.5s;
	transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}

.hamburger-inner::before {
	top: -10px;
}

.hamburger-inner::after {
	bottom: -10px;
}

/*.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after,
.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
	transition: bottom 0.25s ease-out, top 0.25s ease-out;
}*/

.hamburger--minus.is-active .hamburger-inner::before {
	top: 0;
}

.hamburger--minus.is-active .hamburger-inner::after {
	bottom: 0;
}

@media (min-width: 782px) {
	#main-menu>li {
		margin-bottom: -0.5em;
	}

	#main-menu>li:last-child>.sub-menu-container {
		right: 0;
		left: unset;
		transform: unset;
	}
}

@media (max-width: 781px) {
	.hamburger {
		display: inline-block;
	}

	#navigation-bar {
		transform: translateY(0px);
		position: absolute;
		width: 100%;
		bottom: calc(-1 * var(--small-nav-drop-height));
		transition: transform .5s;
	}

	.hamburger.is-active ~ #navigation-bar {
		transform: translateY(calc(100% - var(--small-nav-drop-height)));
	}

	.hamburger.is-active ~ #navigation-bar #main-menu {
		visibility: visible;
		transition: visibility 0s;
	}

	#main-menu {
		visibility: hidden;
		display: inline-flex;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		min-width: 60%;
		flex-direction: column;
		align-items: center;
		margin-top:40px;
		margin-bottom: var(--small-nav-drop-height);
		border: 4px solid var(--theme-color-3);
		border-radius: 10px;
		transition: visibility 0s .5s;
	}

	.sub-menu-container {
		margin: 0 10px 0 10px;
		grid-template-columns: 1fr;
		background-color: unset;
		position: static;
		top: unset;
		left: unset;
		transform: unset;
		z-index: unset;
		box-shadow: unset;
	}

	.expanded>.sub-menu-container {
		margin: 0 10px 10px 10px;
	}

	.sub-menu {
		display: inline-flex;
		width: 100%;

	}

	#main-menu li {
		width: 100%;
	}

	#main-menu li>:is(span, a) {
		width: 100%;
		padding: .5em 0em .5em 0em;
	}

	#main-menu>li:not(:last-child) {
		border-bottom: 4px solid var(--theme-color-3);
	}

	.logo-box {
		width: 90px;
		height: 90px;
		top: unset;
		bottom: 0px;
		left: 0px;
		transform: translateY(calc(100% - var(--small-nav-drop-height)));
	}
}

ul.bullets {
  list-style-position: outside;
  padding-left: 1.25em;
  padding-top: 8px;
}

ul.bullets li {
	text-indent: 0em;
}

ul.bullets li:not(:first-child) {
	padding-top: 0.5em;
}