:root {
	--nav-height: 56px;
	--footer-height: 120px;
	--primary-color: #a94c13;
	--secondary-color: #5C2605;
	--complimentary-color: #F56E1B;
	--spacing: 16px;
	--border: 3px solid var(--primary-color);
	--border-radius: 8px;
}

::-webkit-scrollbar {
	width: 1px;
}

::-webkit-scrollbar-track {
	background: black;
}

::-webkit-scrollbar-thumb {
	background: var(--complimentary-color);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Museo Moderno";
	scrollbar-width: none;
}

::selection {
	color: white;
	background: var(--complimentary-color);
}

body {
	display: grid;
	width: 100vw;
	min-height: 100dvh;
	background-color: var(--primary-color);
	background-image: url("../media/body_pattern.jpg");
	background-size: cover;
	background-blend-mode: multiply;
	grid-template-rows: calc(var(--nav-height) + var(--spacing)*3) auto var(--footer-height);
	grid-template-columns: 1fr 60% 1fr;
	grid-template-areas:
		"header header header"
		". main ."
		"footer footer footer";
	overflow-x: hidden;
}

header {
	grid-area: header;
	position: relative;
	display: grid;
	place-items: center;
	color: white;
}

#header-patter {
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	object-fit: cover;
	height: 100%;
	opacity: .2;
	border-top-right-radius: calc(var(--nav-height) / 2);
	border-bottom-right-radius: calc(var(--nav-height) / 2);
	z-index: -1;
}

main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
	height: fit-content;
	background: linear-gradient(135deg, var(--secondary-color) 45%, black);
	padding: var(--spacing);
	margin-bottom: 100px;
	overflow-x: hidden;
	border: 2px ridge var(--complimentary-color);
	border-radius: var(--border-radius);
}

section {
	opacity: 0;
	background-color: white;
	padding: var(--spacing);
	padding-bottom: calc(var(--spacing)*2);
	border-radius: var(--border-radius);
	border: var(--border);
	margin-bottom: var(--spacing);
	box-shadow: 7px 8px 8px black;
}

section img {
	width: 50%;
}

section p:last-child {
	margin-bottom: 0;
}

section:nth-child(odd) img {
	float: left;
	margin-right: var(--spacing);
}

section:nth-child(even) img {
	float: right;
	margin-left: var(--spacing);
}

p {
	margin-bottom: var(--spacing);
}

h1 {
	font-family: 'Rock Salt';
	font-weight: bolder;
	font-size: 4rem;
	color: white;
	text-shadow: 0 0 10px black, 0 0 10px black, 0 0 10px black, 0 0 10px black;
}

#hero {
	position: absolute;
	display: grid;
	place-items: center;
	width: 100vw;
	height: 100vh;
}

#hero img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	border-bottom: 3px solid var(--primary-color);
}

footer {
	grid-area: footer;
	position: relative;
	background: linear-gradient(175deg, var(--secondary-color) 45%, black);
	color: white;
	padding: var(--spacing);
	border-top: var(--border);
}

footer img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .1;
}

iframe {
	width: 100%;
	height: 450px;
}

.prevent-select {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.flex {
	display: flex;
}

.conditional-flex {
	display: flex;
}

.gap {
	gap: var(--spacing);
}

.center-block {
	align-items: center;
}

.space-between {
	justify-content: space-between;
}

@media only screen and (max-width: 1150px) {
	h1 {
		font-size: 2.7rem;
	}
}


@media only screen and (max-width: 783px) {
	body {
		grid-template-areas:
			"header header header"
			"main main main"
			"footer footer footer";
	}

	h1 {
		font-size: unset;
	}

	main {
		background: unset;
		border: unset;
	}

	section img {
		width: 100%;
		margin-bottom: var(--spacing);
	}

	.conditional-flex {
		flex-direction: column;
	}
}