:root {
	--threat-low: #92d050;
	--threat-moderate: #ffff00;
	--threat-elevated: #ff4300; 
	--threat-high: #930e0e;
	--orange: #f5961e;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
}

html {
	background-color: black;
	color: white;

	background-image: 
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('/static/1.jpg');
	background-attachment: fixed;
	scroll-behavior: smooth;

	background: black;
}

header {
	height: 16vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: rgba(0, 0, 0, 1);
	position: sticky;
	top: 0;
	z-index: 9999;
}

.header-image {
	height: 100%;
	aspect-ratio: 1.778;
}

.content {
}

.section, form {
	background: black;
	padding-left: 16vw;
	padding-right: 16vw;
	padding-top: 2vh;
	padding-bottom: 2vh;
}

.parallax {
	height: 50vh;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;	
}

.parallax .section {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	filter: contrast(150%);

	/* Flexbox properties for vertical centering */
	display: flex;
	align-items: center;
	justify-content: center;
}

.parallax p {
	font-size: 28px;
}

h1, h2 {
	text-align: center;
	padding: 2vh;
}

h1 {
	font-size: 36px;
}

h2 {
	color: var(--orange);
	font-size: 28px;
}

p {
	padding-bottom: 2vh;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown label, header a {
	font-size: 1.5vw;
	cursor: pointer;
	text-decoration: none;
}

.dropdown-content {
	display: none;
	position: absolute;
	z-index: 1;
	cursor: pointer;
}

.dropdown-content a {
	padding: 0.5vw;
	text-decoration: none;
	display: block;
	background-color: #030303;
	transition-duration: 0.25s;
	font-size: 1vw;
}

.dropdown-content a:hover {
	background-color: white;
	color: #030303;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.profile {
	display: grid;
	grid-template-columns: 1fr 3fr; /* 1 part for the first column, 3 parts for the second column */
	padding-top: 4vh;
	padding-bottom: 4vh;
}

.profile img {
	width: 12vw;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 0.25vh solid grey;
	border-radius: 3vh 0 3vh 0;
	object-position: center top;
}

span {
	color: orange;
}

p, label, input, textarea {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Use Arial or Helvetica as primary fonts, and if they're not available, use the default sans-serif font of the system */
    font-size: 22px; /* A typical size for body text; adjust as needed */
    line-height: 1.5; /* Spacing between lines to improve readability */
    color: #eee; /* A dark gray color that's gentler on the eyes than pure black */
    margin: 0.5em 0; /* Some vertical spacing above and below paragraphs */
    word-spacing: 0.5px; /* Spacing between words */
    letter-spacing: 0.5px; /* Spacing between characters; can improve legibility */
}

footer {
	margin: 20vh;
}

footer p {
	text-align: center;
}

.deck {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
	justify-content: center;
}

.half {
	width: 50%;
	margin: auto;
	display: block;
	padding-bottom: 2vh;
}

.twin {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.single {
	border-bottom: 0.25vh solid orange;
}

.single img {
	width: 50% !important;
	border: none !important;
	margin: auto;
	display: block;
}

.quint {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.center {
	text-align: center;
}

.card {
	border: 0.25vh solid grey;
	margin: 1vh;
	padding: 0.5vh;
	text-decoration: none;
	transition-duration: 0.25s;
}

.card:hover {
	border-color: white;
}

.card img {
	width: 100%;
	border-bottom: 0.25vh solid orange;
}

.card p {
	text-align: left;
	padding: 0;
	padding-left: 8px;
	line-height: 1.25;
}

input, textarea {
	color: black;
	width: 100%;
	padding: 1vh;
	border-radius: 0.25vw;
}

input[type=submit] {
	background-color: orange;
	border: none;
	text-align: center;
	cursor: pointer;
}

input[type=submit]:hover {
	filter: contrast(150%);
}

input[type=checkbox] {
	width: unset;
}

/* scrollbar customization */
/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
    width: 10px;  /* Adjust width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: black;  /* Background color of the track */
}

::-webkit-scrollbar-thumb {
    background: orange;  /* Color of the moving scrollbar element */
}

::-webkit-scrollbar-thumb:hover {
    background: #ff8c00;  /* Slightly different shade of orange when hovered */
}

.button {
	background: white;
	color: black;
	border-radius: 0.5vh;
	padding: 1vh;
	text-decoration: none;
	transition-duration: 0.25s;
}

.button:hover {
	background: var(--orange);
}

@media (orientation: portrait) {
	.mobile {
		display: none;
	}
}

@media (orientation: portrait) {
	.desktop, .dropdown-content {
		display: none !important;
	}

	header {
		flex-direction: column;
		height: unset;
		position: unset;
	}

	.header-image {
		height: 25vh;
	}

	.dropdown {
		height: 8vh;
	}

	.dropdown * {
		font-size: 5vw !important;
	}

	.parallax {
		height: 25vh;
		background-attachment: unset;
	}

	.section {
		padding-left: 2vw;
		padding-right: 2vw;
	}

	.deck, .quint {
		grid-template-columns: 1fr;
	}

	.profile {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.profile img {
		width: 50vw;
	}

	footer {
		margin: 0;
		margin-top: 20vh;
		margin-bottom: 20vh;
	}

	form {
		padding-left: 2vw;
		padding-right: 2vw;
	}
}

ul {
    padding-left: 24px;
    font-size: 22px;
	line-height: 1.25;
}