/* 

Table of Contents:
	1.0 Setup
		1.1 Scrollbar
	2.0 Global Styles
		2.1 Header/Nav Bar
		2.2 Hero (trees, tagline, counter
		2.3 Main Content
	3.0 Utility

*/

/* 1.0 Setup */

@font-face {
	font-family: 'Vitesse';
	font-style: normal;
	font-weight: bolder;
	font-display: swap;
	src: url('/fonts/Vitesse-Black.otf') format('opentype');
}

@font-face {
	font-family: 'Vitesse';
	font-style: normal;
	font-weight: bold;
	font-display: swap;
	src: url('/fonts/Vitesse-Bold.otf') format('opentype');
}

@font-face {
	font-family: 'Vitesse';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/Vitesse-Medium.otf') format('opentype');
}

* {
	color-scheme: light;

	--dark-green: #213824;
	--dark-green-with-alpha: #213824cc;
	--medium-green: #2a4a32;
	--dark-beige: #ddc9b4;
	--sand: #fceddc;
	--orange: #cc3f0c;
	
	--text-color: #FFF;
	--background-color: var(--dark-green);
	--focus-color: var(--dark-beige);
	--dark-focus-color: var(--dark-beige);

	--round-corners: 1.5rem;

	/* Font Sizes via Utopia.fyi */
	/* @link https://utopia.fyi/type/calculator?c=270,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--2: clamp(0.7813rem, 0.776rem + 0.0309vw, 0.8rem);
	--step--1: clamp(0.9375rem, 0.9201rem + 0.1031vw, 1rem);
	--step-0: clamp(1.125rem, 1.0902rem + 0.2062vw, 1.25rem);
	--step-1: clamp(1.35rem, 1.2909rem + 0.3505vw, 1.5625rem);
	--step-2: clamp(1.62rem, 1.5273rem + 0.5495vw, 1.9531rem);
	--step-3: clamp(1.944rem, 1.8055rem + 0.8205vw, 2.4414rem);
	--step-4: clamp(2.3328rem, 2.1327rem + 1.1859vw, 3.0518rem);
	--step-5: clamp(4rem, 3.1649rem + 4.9485vw, 7rem);
	--step-6: clamp(6rem, 4.8866rem + 6.5979vw, 10rem);
}

:focus {
	outline-color: transparent;
	outline-style: solid;
	box-shadow: 0 0 0 4px var(--background-color),
							0 0 0 8px var(--focus-color)
}

::selection {
	background: var(--background-color);
	color: var(--focus-color);
}

html {
	scroll-behavior: smooth;
}

/* 1.1 Scrollbar */

* {
	scrollbar-color: var(--dark-focus-color) var(--background-color);
}

/* 2.0 Global Styling */

body {
	background-color: var(--background-color);
	margin: 0;
	overflow-x: hidden;
}

a, h1, h2, h3, h4, p, li, input, select, td, th, legend {
	color: var(--text-color);
	font-family: "Lato", sans-serif;
}

h1, h2, h3, h4, p, li, select, option, td, th, legend {
	text-align: center;
}

h1 {
	font-size: var(--step-4);
	margin: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

h2, h3, h4 {
	margin: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-2);
}

h4, p, a, label, legend, select, input {
	font-size: var(--step-0);
	text-wrap: pretty;
}

td, td a {
	font-size: var(--step--1);
	text-wrap: balance;
}

main {
	background-color: var(--background-color);
}

footer p, footer a {
	font-size: var(--step--1);
}

.button-holder {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
}

.button-holder p {
	margin-block-end: 0;
}

.button-holder a {
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

@media(max-width: 675px) {
	.button-holder {
		gap: 0;
		flex-direction: column;
	}

	.button-holder a, input[type=submit] {
		margin-block-end: 0;
		width: 100%;
	}

	.button-holder p a {
		display: block;

		/* .btn has a margin-inline of 1rem */
		width: calc(100% - 4em);
	}
}

.btn, input[type=submit] {
	background: var(--background-color);
	color: var(--sand) !important;
	border-radius: var(--round-corners);
	/* font-weight: bold; */
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.5em 2em;
	position: relative;
}

.btn.secondary {
	background: var(--sand);
	color: var(--background-color) !important;
}

img, picture {
	/* max-height: 100%; */
	height: fit-content;
	width: fit-content;
	max-width: 100%;
}

/* 2.1 Header/Nav Bar */

nav {
	background-color: var(--background-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

nav * {
	font-size: var(--step-0);
	margin: 0;
	text-decoration: none;
}

nav > * {
	padding-inline: 2rem;
}

#made-by-northern-star {
	padding-block: 0.5rem;
}

#made-by-northern-star img {
	max-height: var(--step-0);
	margin-block-end: -3px;
}

#made-by-northern-star span, #login-link-holder a {
	font-family: 'Vitesse', 'Lato', sans-serif;
	text-transform: uppercase;
}

#login-link-holder {
	background-color: var(--focus-color);
	text-align: center;
	padding-block: 0.5rem;
}

#login-link-holder > * {
	color: var(--background-color);
	white-space: nowrap;
}

@media (max-width: 800px) {
	nav {
		flex-direction: column;
	}

	nav * {
		padding-inline: 0;
	}

	#login-link-holder {
		width: 100%;
	}
}

/* 2.2 Hero: bg img with trees, floating text, tree counter */

.header-card {
	background-image: url('/assets/forest-bg.png');
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}

.header-card > div {
	display: grid;
	align-items: center;
	justify-items: center;
}

@media (min-width: 1150px) {
	.header-card > div {
		grid-template-columns: 7fr 5fr;
	}
}

#tagline * {
	font-weight: normal;
	text-align: start !important;
}

#tagline p:nth-child(2) {
	color: var(--sand);
	font-weight: bold;
}

#tagline *:not(.normal) {
	font-size: var(--step-4);
	margin-block: 0;
	text-transform: uppercase;
}

#tree-counter {
	background-color: var(--dark-green-with-alpha);
	border-radius: var(--round-corners);
	padding: 3rem;
}

#tree-counter * {
	color: var(--sand);
}

#current-tree-count {
	font-size: var(--step-6);
}

/* 2.3 Main Content */

section {
	padding-block: 3rem;
	padding-inline: 5%;
}

main section:nth-of-type(odd) {
	background-color: var(--dark-beige);
}

main section:nth-of-type(odd) * {
	color: var(--dark-green);
}

/* 3.0 Utility */

.left {
	text-align: left !important;
}