/* https://www.w3schools.com/CSS/css3_variables.asp */
/* https://coolors.co/palette/780000-c1121f-fdf0d5-003049-669bbc */
:root {
	--molten-lava: #780000ff;
	--brick-red: #c1121fff;
	--papaya-whip: #fdf0d5ff;
	--deep-space-blue: #003049ff;
	--steel-blue: #669bbcff;
}

body {
	font-family: system-ui;
	background-color: var(--papaya-whip);
	color: var(--deep-space-blue);
}

/* https://www.w3schools.com/cssref/css3_pr_flex.php */
.textImageContainer {
	display: flex;
	margin: 5px;
	gap: 10px;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-wrap */
	flex-wrap: wrap;
	width: 100%;
}

/* https://www.w3schools.com/cssref/css3_pr_flex.php */
.textImageContainer p {
	/* https://www.google.com/search?q=flex+grow%5D&sourceid=chrome&source=chrome.ob&ie=UTF-8 */
	flex-grow: 1;
	flex-shrink: 1;
	/* https://www.w3schools.com/csSref/css3_pr_flex-basis.php */
	flex-basis: 300px;
	min-width: 0;
}

p {
	font-size: 1.5em;
}

.pdfContainer {
	display: flex;
}

.pdf {
	aspect-ratio: 1 / 1;
	width: 50%;
}

/* mobile make it vertical instead of side by side */
@media screen and (max-width: 480px) {
	.textImageContainer {
		flex-direction: column;
	}

	.textImageContainer p {
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-basis */
		flex-basis: 100%;
	}

	.slideshow-container {
		flex-basis: 100%;
	}

	p {
		font-size: 1em;
	}

	.pdfContainer {
		flex-direction: column;
	}

	.pdf {
		width: 100%;
	}
}

/*  footer */
/* https://www.w3schools.com/css/css_navbar_horizontal.asp */
ul {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	justify-content: center;

	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items */
	flex-wrap: wrap;

	background-color: var(--deep-space-blue);
}

ul li a {
	display: block;
	padding: 14px 16px;
	text-decoration: underline;
	color: var(--papaya-whip);
}

/* slideshow */
/* https://www.w3schools.com/howto/howto_js_slideshow.asp */
.slideshow-container {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 300px;
	max-width: 1000px;
	min-width: 0;
	position: relative;
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
	background-color: #f1f1f1;
	color: black;
}

.numbertext {
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 1;
	}
}

.mySlides1,
.mySlides2 {
	display: none;
}

.mySlides1 img {
	vertical-align: middle;
}

.mySlides2 img {
	vertical-align: middle;
}