/* === Global & Element settings ===*/
html {
	--darkgreen: #024422;
	--lightgreen: #BBDD99;
	
	--greentext: #241;
	
	--text: #2e2a26;
	--background: #e0d7d4;
	--primary: #3c5805;
	--inverttext: #e0d7d4;
	--invertbg: #c5b083;
	--accent: #a1b92f;

	scroll-behavior: smooth;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	text-align: center;
	color: var(--text);
	background-color: var(--background);
	
	font-family: ubuntu, roboto, sans-serif;
	
	overflow-x: hidden;
}
h1, h2, h3, h4 {
	font-family: "BioRhyme", serif;
	font-optical-sizing: auto;
}
h1 {
	font-size: clamp(4rem, 6vw, 8rem);
	font-weight: 300;
	line-height: 120%;
}
h2 {
	font-size: clamp(3rem, 4vw, 6rem);
	font-weight: 800;
}
h3 {
	font-size: clamp(1.5rem, 2vw, 3rem);
	font-weight: 500;
}
p, button {
	font-size: 1.3rem;
	font-weight: 400;
}
main p {
	line-height: 1.4;

}
section {
	min-height: 100vh;
	min-width: 100vw;
	width: fit-content;
	border-bottom: solid var(--invertbg) 1px;
}


/* === Links css reset ===*/
a {
	margin-top: 0.2rem; /*this cancels text-decoration*/
	outline-color: transparent;
	text-decoration: none;
	color: var(--text);

	/*Sets up hover mechanics*/
	transition: all 0.3s ease;
	position: relative;
}
a:hover {
	translate: 0 -0.3rem;
	color: var(--primary);
}


/* === Reusable classes ===*/
.centeritems {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.fullpage {
	min-height: 100vh;
	min-width: 100%;
	width: fit-content;
}

button {
	padding: 1rem 2rem;
	margin: 2rem 0;
	
	border-radius: 1rem;
	
	transition: all 0.3s ease;
	text-align: center;
	position: relative;
	width: fit-content;

	border: none;
	background-color: var(--invertbg);
}
button:hover {
	translate: 0 -0.3rem;
	background-color: var(--accent);
	box-shadow: 0 1rem 2rem -0.5rem var(--primary);
}

img {
	/* Note to self: learn how to wrap img properly later!! */
	width: 100%;
}