@import url("fonts/fontawesome/css/all.min.css");
@import url("fonts/NotoSans.css");

:root {
	--color-bg: #ffffff;
	--color-accent: #fff200;
	--color-g1a: #76993d;
	--color-g1b: #3b5336;
	--color-g2a: #935a2f;
	--color-g2b: #714122;
	--color-g2c: #3f1e00;
	--color-other: #b3b3b3;
	--anim-time: 0.15s;

	--nav-width: 300px;
	--main-width: 800px;
	--main-margin-h: 2rem;
	--main-margin-v: 2rem;
}

body {
	font-family: 'NotoSans', sans-serif;/*SourceSerif4;*/
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bolder;
}

h1 { font-size: 1.3rem; }

.main nav a {
	color: var(--color-bg);
	text-decoration: none;
	display: block;
	margin: 1rem;
}

.main header {
	background: linear-gradient(90deg, var(--color-g1a), var(--color-g1b));
	color: var(--color-bg);
	width: 100%;
}

#banner {
	background-color: white;
	display: block;
	padding: 1rem;
	margin-bottom: 5rem;
	text-align: center;
}

img {
	max-width: 100% !important;
	height: auto;
	object-fit: contain;
}

.main nav {
	text-align: center;
	margin: auto;
	display: block;
	font-weight: bold;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
.main nav::after {
	content: '';
	height: 3rem;
}

.main nav ul {
	display: inline-block;
	margin: 0 auto;
}

.main nav ul li {
	display: inline-block;
}

.main header > section, .main main > section {
	
	display: flex;
	justify-content: center;
	flex-direction: column;
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
section p {
	font-weight: bold;
	line-height: 1.2;
}

section p, section h2 {
	margin: 1rem 0;
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }

.main .container h1,
.main .container h2,
.main .container h3,
.main .container p {
}

.main .container {
	margin-left: auto; /* var(--main-margin-h); */
	margin-right: auto; /* var(--main-margin-h); */
	max-width: var(--main-width);
	width: 90%;
	/* margin-left: auto;
	margin-right: auto;
	max-width: 800px; */
}

header .info {
	min-height: 100vh;
}

main .container {
	margin: 5rem auto;
	text-align: left;
}

body, .light, .info {
	background: white;
	color: var(--color-g1b);
}

.dark {
	background: linear-gradient(90deg, var(--color-g1a), var(--color-g1b));
	color: var(--color-bg);
}

.darkb {
	background: linear-gradient(90deg, var(--color-g2a), var(--color-g2b));
	color: var(--color-bg);
}

body a, body a:visited, .light a, .light a:visited, .info a, .info a:visited {
	color: var(--color-g1b);
}

.dark a, .dark a:visited, .darkb a, .darkb a:visited {
	color: var(--color-bg);
}

.info i {
	font-size: larger;
}

.main footer {
	padding: 1rem;
	text-align: center;
	font-weight: bold;
}

.social * {
	vertical-align: middle;
}

input, button, select, option, textarea {
	border: 2px solid var(--color-g1b);
	border-radius: 5px;
	margin: 0.5rem auto;
	padding: 0.5rem;
	color: var(--color-g1b);
}

.dark input, .dark button, .dark select, .dark option, .dark textarea,
.darkb input, .darkb button, .darkb select, .darkb option, .darkb textarea {
	border: 0 none;
}

textarea {
	min-width: 300px;
	min-height: 300px;
}

form > * {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

form h1, form h2, form h3, form h4, form h5, form h6, form p {
	text-align: center;
}

.hide {
	display: none;
}

.input-hide {
	appearance: none;
}

.dropdown {
	cursor: pointer;
	position: relative;
	z-index: 0;
}

.dropdown .dd-main {
	position: absolute;
	z-index: 10;
	width: 200px;
	top: 35px;
	right: 0;
}

/* .dropdown .dd-main a, .dropdown .dd-main a:visited {
	color: var(--color-bg);
} */

.dropdown input[type="checkbox"]:not(:hover/* checked */) ~ .dd-main {
	visibility: hidden;
	transition: visibility 500ms linear 0s allow-discrete;
}

.dropdown input[type="checkbox"]:hover/* checked */ ~ .dd-main {
	visibility: visible;
}

.warning {
	color: #f00;
}