:root {
	--green:#004d23;
	--green2:#006937;
	--bright_green:#83a300;
	--pale_green:#d3e2b0;
	--yellow:#fff100;
	--orange:#D86500;
	--blue:#007bc8;
	--lgrey:#e7e7e7;
	--beige:#f0ede3;
	--nav_width:400px;
	--ease_out:cubic-bezier(.14,.7,.32,1);
	--global_padding:clamp(1rem,2vw,2rem);
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:1rem;
}

.container {
	container-type: inline-size;
}

#edit-page {
	position:fixed;
	top:0;
	right:1rem;
	background-color:var(--green);
	color:#fff;
	text-decoration: none;
	font-size:0.8rem;
	padding:0.25rem;
	z-index:9999;

	&:hover {
		background-color:var(--yellow);
		color:var(--green);
	}
}

.wrap {
  position:relative;
  width:100%;
  max-inline-size:1200px;
  margin-inline:auto;
  clear:both;
}

#burger,
#mobnav {
  display:none;
}

::selection {
	background-color:var(--yellow);
	color:var(--green);
}

body {
	background-color:#fff;
	color:#212121;
	font-family: "Ubuntu", sans-serif;
}

header {
	float:left;
	clear:left;
    width:100%;
	padding:1rem;
	overflow-x:clip;
}

	header .wrap {
		display:grid;
		grid-template-columns: 250px 1fr;
		grid-gap:0.5rem;
		align-items: center;
	}

	.nav-right {
		display:grid;
		grid-template-columns: 1fr 250px;
		align-items:center;
		gap:1rem;

		& form {
			position:relative;
			& input {
				margin:0;
				border:1px solid #ddd;
			}

			& button {
				position:absolute;
				cursor:pointer;
				right:0;
				top:0;
				height:100%;
				aspect-ratio: 1;
				padding:0.7rem;
				background:none;
				border:none;
				outline:none;
				&:hover {
					opacity:0.5;
				}
			}
		}
	}

	#logo {
		float:left;
		width:min(250px,100%);
	}

		#logo img {
			width:min(250px,100%);
		}

	#searchbar {
		float:right;
		width:min(300px,100%);
		margin-bottom:0.75rem;
	}

		#searchbar input {
			margin:0;
			padding:0.5rem;
			font-size:0.75rem;
			color:var(--green);
		}

		#searchbar ::placeholder {
			font-style: italic;
		}

@media screen and (min-width:1200px){

    nav {
		float:right;
		position:relative;
		padding-right:0.5rem;
		clear:right;
    }
		
		nav ul {
			float: right;
			list-style: none;
		}
		
			nav li {
				position: relative;
				float:left;
			}

				.tri,
				.home-btn {
					display:none;
				}
			
				nav a {
					position: relative;
					float:left;
					text-decoration: none;
					padding:1rem;
					font-size:1.1rem;
					z-index:3;
					font-weight: 300;
				}

				nav a.active,
				nav a:hover {
					font-weight:bold;
					color:var(--green);
				}

				.main-nav {
					clear:both;
				}

			.subnav {
				position: absolute;
				z-index:2;
				left:-0.65rem;
				width:fit-content;
				padding-top:2.3rem;
				opacity:0;
				transform:translateY(5px);
				pointer-events: none;
				transition-property: transform, opacity, background-color, color;
				transition-duration: 0.25s;
				transition-timing-function: ease-out;
			}

				.subnav li {
					width:200px;
				}

				.subnav a {
					margin:0;
					float:left;
					clear:left;
					width:100%;
					background-color:var(--green);
					color:#fff;
					border:none;
					padding-inline:1rem;
				}

				.subnav a:hover {
					background-color:var(--bright_green);
				}

			nav li:hover .subnav {
				pointer-events: all;
				opacity:1;
				transform:translateY(0);
			}
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	font-size:3rem;
	margin-bottom:2rem;
	font-weight:normal;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

h1 {
	font-size:4rem;
	font-weight:300;
}

h2 {
	font-size:2.5rem;
}

h3 {
	font-size:2.2rem;
}

h4 {
	font-size:1.9rem;
}

h5 {
	font-size: 1.5rem;
}

main {
	.text :is(p,li){
		max-width:75ch;
	}
}

main p,
main li,
main td,
main th {
	font-size:1.3rem;
	font-weight:300;
	line-height:1.7;
	margin-bottom:1.1rem;
	clear:left;
}

main p :is(img.align_left,img.align_right) {
	max-width:40%;
}

main p a {
	color:var(--blue);
}

main ul,
main ol {
	margin-block:2rem;
	padding-left:1rem;
}

  main li {
    padding-left:1rem;
  }

  main li :is(h2,h3,h4,h5,h6) {
	margin-bottom:1rem;
  }

.table-container {
	width:100%;
	max-width:100%;
	clear:left;
	overflow-x:auto;
}

main table {
	border-collapse: collapse;
	width:100%;
	margin-bottom:3rem;
}

	main td,
	main th {
		border:1px solid #eee;
		padding:1rem;
		text-align: left;
	}

	main th {
		background-color:var(--green);
		color:#fff;
	}

	td *:last-child {
		margin-bottom:0;
	}

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
  margin-inline:auto;
  max-width:70ch;
}

:is(h1,h2,h3,h4,h5,h6).align_center {
	max-width:40ch;
}

img.align_left {
  margin:0.5rem 2rem 2rem 0;
}

img.align_right {
  margin:0.5rem 0 2rem 2rem;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

figure {
	margin-bottom:2rem;
}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1rem;
}

hr {
	border:0;
	outline:0;
	margin-block:2rem;
	border-bottom:1px solid #aaa;
}

input,
textarea {
	background-color:#fff;
	border:1px solid #aaa;
	padding:0.5rem;
	font-size:0.8rem;
}

input[type="submit"],
.submit-btn {
	float:left;
	clear:left;
	text-decoration: none;
	cursor: pointer;
	border:none;
	outline:none;
}

.errortext {
	color:red;
	font-weight:bold;
}

video {
	max-width:100%;
}

.green-btn,
.green-outline-btn,
.blue-btn,
.lgreen-btn {
	background-color:var(--green);
	color:#fff;
	text-decoration: none !important;
	padding:1rem 1.75rem;
	line-height: 1;
	font-size:1rem;
	display:inline-block;
	margin-block:1rem 0.75rem;
	transition:background-color 0.25s ease-out, color 0.25s ease-out;

	&::after {
		content:"➝";
		margin-left:0.5rem;
	}
}

	.green-outline-btn {
		background-color:unset;
		border:2px solid var(--green);
		color:var(--green);
		font-weight:400;
	}

	.green-outline-btn:hover {
		background-color:var(--yellow);
	}

	.green-btn:hover,
	.blue-btn:hover,
	.lgreen-btn:hover {
		background-color:var(--yellow);
		color:#212121;
	}

	.green-outline-btn.clicked {
		background-color:var(--green);
		color:#fff;
	}

.lgreen-btn {
	background-color: var(--bright_green);
}

.blue-btn {
	background-color:var(--blue);
}

.container {
	container-type: inline-size;
}

.standard {
	background-color:var(--green);
}
  
footer {
	background-color:var(--green);
	color:#fff;
	padding-block:5vw;
	clear:both;
}

	footer .wrap {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap:5vw;
	}

	.copyright {
		grid-column: 1/-1;
	}

	footer p {
		line-height:1.6;
	}

		footer p a {
			text-decoration: none;
		}

			footer p a:hover {
				color:var(--yellow);
			}

			.cookies {
				position:fixed;
				left:0;
				top:0;
				width:100%;
				height:100%;
				background-color:#0006;
				z-index:100;
			}
					
				.cookies .inner {
					position:absolute;
					bottom:0;
					width:100%;
					background-color:#fff;
					padding:2rem;
					border-top:1px solid var(--green);
					display:grid;
					grid-template-columns: 1fr 150px 150px;
					grid-gap:1rem;
					align-items: top;
				}
			
					.cookies .text {
						position:static;
						float:left;
					}
			
					.cookies .text h2 {
						font-size:2rem;
						margin-bottom:0;
					}
			
					.accept-btn {
						float:right;
						color:#fff;
						background-color:var(--green);
						text-decoration: none;
						font-size:1rem;
						padding:1rem 2rem;
						text-align: center;
					}

.anim-delay {
    animation-delay: calc(var(--delay) * 0.1s);
}

.fade_up {
	opacity:0;
}

.fade_up.run {
	animation-name: fade_up;
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.36,1.59,.35,1.01);
}

.popup-message {
	position:fixed;
	z-index:99;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	background-color:#0005;

	& .inner {
		background-color:#fff;
		padding:2rem;
		position:absolute;
		width:min(500px,90%);
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);

		& .accept-btn {
			margin-top:1rem;
		}

		& :is(h1,h2,h3,h4,h5,h6){
			margin-bottom:1rem;
		}

		& p {
			margin-bottom:1rem;
		}
	}
}

@keyframes fade_up {
	0% {opacity: 0; transform: translateY(100px);}
	100%{opacity:1; transform: translateY(0);}
}

@media screen and (max-width:1199px){
	/* .wrap {
		padding:0;
		width:100%;
	} */

	footer .wrap {
		padding-inline:5vw;
	}

	nav :is(ul,li,a) {
		float:left;
		clear:left;
		width:100%;
		text-align: left;
		padding-inline:0;
	}

	nav {
		position:fixed;
		width:var(--nav_width);
		max-width:calc(100vw - 72px);
		left:calc(-1 * var(--nav_width));
		height:100%;
		top:0;
		background-color:var(--green);
		color:#fff;
		padding:3rem;
		z-index:1001;
		transition:left 0.25s ease-out;
		overflow-y:auto;
	}

	#burger:has(input:checked) ~ nav {
		left:0;
		margin:0;
	}

	#burger {
		position:relative;
		display:block;
		float:right;
		width:40px;
		height:35px;
		z-index: 6;
		margin-top:0.5rem;
	}

		#burger input {
			position:absolute;
			width:100%;
			height:100%;
			cursor:pointer;
			opacity:0;
		}

	nav ul {
		list-style: none;
		padding:0;
		margin:0;
	}

	nav :is(li,a) {
		float:left;
		clear:left;
		width:100%;
	}

		nav li:has(.tri){
			display:grid;
			grid-template-columns: 1fr 40px;
			grid-gap:0.5rem;
		}

		.tri {
			text-align: center;
			position:relative;
			display:Grid;
			align-items: center;
		}

		.tri input {
			position:absolute;
			inset:0;
			width:100%;
			height:100%;
			opacity:0;
			cursor: pointer;
		}

		.tri p {
			width:100%;
			margin:0;
		}

		.home-btn {
			display:block;
		}

	nav a {
		text-decoration: none;
		padding:0.5rem 0;
	}

		nav a:hover,
		nav a.active {
			color:var(--yellow);
		}

	.subnav {
		display:none;
		grid-column: 1/-1;
		background-color:#444;
	}

	.tri:has(input:checked) ~ .subnav {
		display:block;
	}

	#searchbar {
		margin-top:0.5rem;
		margin-right:1rem;
	}

		#searchbar input {
			height:35px;
		}
}

@media screen and (max-width:999px){
	footer .wrap {
		grid-template-columns: 1fr;
	}

	.cookies .inner {
		padding:1rem;
	}

	.cookies .text {
		width:100%;
		float:left;
		clear:left;
		margin-bottom:1rem;
	}

	.cookies .accept-btn {
		width:min(200px,100%);
		float:left;
		clear:left;
	}

	main td,
	main th {
		padding:0.5rem;
		font-size:0.9rem;
	}

	main td p,
	main th p {
		font-size:0.9rem;
	}
}

@media screen and (max-width:749px){
	header .wrap {
		grid-template-columns: 1fr 40px;
		grid-gap:1rem;
	}

	.nav-right {
		display:contents;
		display:Grid;
		justify-content: end;
		align-items: center;
	}

	#burger {
		margin:0;
	}

	.cookies .inner {
		grid-template-columns: 1fr 1fr;
	}

		.cookies .inner .text {
			grid-column: 1/-1;
			margin:0;
		}

		.cookies .accept-btn {
			width:100%;
		}
}

@media screen and (max-width:600px){
	header .wrap {
		grid-template-columns: 1fr 40px;
	}
}

@media screen and (max-width:499px){
	main p {
		font-size:1.1rem;
	}

	main h2 {
		font-size:2.5rem;
	}
	main h3 {
		font-size:2rem;
	}
	main h4 {
		font-size:1.75rem;
	}

	/* .extralogo {
		display:none;
	}*/

	nav {
		padding:2rem;
	}

}