/* 

Table of Contents:
	1.0 Setup
		1.1 Scrollbar
	2.0 Global Styles
		2.1 Section
		2.2 Header
		2.3 Form

*/

/* 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');
}

@font-face {
	font-family: 'Oswald';
	font-display: swap;
	font-style: normal;
	font-weight: 200 700;
	src: url('/fonts/Oswald/Oswald-VariableFont_wght.ttf') format('opentype');
}

* {
	/* Even though the text is white, input is the only thing using the default styling. We can either set everything */
	/* to dark (which changes nothing) and set input to light, or just set everything to light and call it a day. */
	color-scheme: light;

	--text-color: #FFF;
	--sunrise-1: #FFEECF;
	--sunrise-2: #FFCFAE;
	--sunrise-3: #FFA180;
	--sunrise-4: #FF755A;
	--sunrise-5: #C62A00;
	--sunrise-6: #992100;
	--green-1: #3E6D48;
	--green-2: #2A4B31;
	--green-3: #203825;

	--green-2-with-alpha: #2A4B31AA;
	--green-3-with-alpha: #203825AA;
	--sunrise-5-with-alpha: #C62A00AA;

	--background-color: var(--green-3);
	--focus-color: var(--sunrise-3);
	--dark-focus-color: var(--sunrise-5);

	--round-corners: 1.5rem;
}

:focus {
	outline-color: transparent;
	outline-style: solid;
	box-shadow: 0 0 0 2px var(--background-color),
							0 0 0 6px 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(--green-1);
	margin: 0;
	overflow-x: hidden;
}

a, h1, h2, h3, h4, p, li, select, td, th, label, legend {
	color: var(--text-color);
}

a, h2, h3, h4, p, li, input, select, td, th, label, legend {
	font-family: "Oswald", sans-serif;
}

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

h1 {
	font-family: "Vitesse", sans-serif;
	font-size: 3rem;
	margin: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

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

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 2rem;
}

h4, p, label, legend, select, input {
	font-size: 1.2rem;
	text-wrap: pretty;
}

p {
	margin-inline: 1rem;
}

main {
	background-color: var(--green-3);
	margin-block-start: 1rem;
}

footer p {
	font-size: 1rem;
}

.btn {
	background: var(--sunrise-5);
	border-radius: var(--round-corners);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.35em 2em;
	position: relative;
}

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

@media (max-width: 360px) {
	h1 {
		font-size: 2rem !important;
	}
}

@media(max-width: 750px) {
	h2 {
		font-size: 1.5rem;
	}
}

/* 2.1 Section Styling */

section {
	border-block-end: 6px solid var(--sunrise-5);
}

/* 2.2 Header */

.nss-logo-inline {
	aspect-ratio: 1; /* It already is, but this doesn't hurt */
	max-height: 3rem;
	max-width: 3rem;
	padding: 0.5rem;
}

header {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	position: relative;
	z-index: 5; /* Be above the search-image */
}

#title-card-background {
	height: 12.8vw;
	position: relative;
}

#title-card-background img {
	position: absolute;
}

#title-label {
	bottom: 0;
	right: 0;
	margin-right: 3%;
	width: 49%;
	z-index: 5;
}

#title-logo {
	position: absolute;
	left: min(8%, 1rem);
	top: min(8%, 1rem);
	width: 25%;
	padding: 0.4rem;
	background-color: var(--green-3-with-alpha);
	border-radius: 0.5em;
}

@media (max-width: 540px) {
	#title-logo {
		display: none;
	}
}

/* 2.3 Form */

.form-card {
	background-color: var(--green-1);
}

.form-header, form {
	display: inline;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}

select, input {
	border-color: transparent;
	border-style: solid;
	border-radius: var(--round-corners);
	padding: 0.5em 1em;
}

input[type=button], input[type=submit] {
	background-color: var(--sunrise-5);
	color: var(--text-color);
}

@media(max-width: 420px) {
	p, label, legend, select, input {
		font-size: 1.2rem;
	}
}

/* Option styling doesn't work */
/* option {
	padding: 1rem 0;
}

option:first-child {
	border-start-start-radius: var(--round-corners);
	border-start-end-radius: var(--round-corners);
}

option:last-child {
	border-end-start-radius: var(--round-corners);
	border-end-end-radius: var(--round-corners);
} */