@import url('https://fonts.googleapis.com/css2?family=Roboto:wdth,wght@75,100..900&display=swap');

:root {
	--theme-color1: #455546;
	--theme-color2: #d5a23b;
}

body { font-family: Georgia, 'Times New Roman', Times, serif, sans-serif; }

h1, h2, h3, nav, #typewriter, .marquee {
	font-family: 'Roboto', serif;
	font-optical-sizing: auto;
	font-variation-settings: 'wdth' 75;
}

.sidebar h1 {
	text-align: center;
	color: white;
}

.sidebar { background-color: var(--theme-color1); }

.sidebar .copy > ul { padding-left: 0; }

.slogan {
	color: var(--theme-color2);
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.5px;
	padding-left: 8px;
}

#topbar, footer { background-image: none; }

#topbar::before, footer::before { opacity: 1; }

.is_frontpage .copy-container { display: block; }

#slideshow {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

#slideshow .nivoSlider::before { display: none; }

.is_frontpage .marquee { margin-top: clamp(10px, 3vw, 60px); }

#typewriter {
	padding: 30px 15px;
	background-color: var(--theme-color2);
	border-radius: 6px;
	font-size: clamp(20px, 2.8vw, 30px);
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}

@media screen and (max-width: 500px) {
	#typewriter strong { display: block; }
}

.featured { scroll-margin-top: 125px; }

.featured .page h1 {
	color: #181818;
	line-height: 38px;
	font-size: 24px;
}

@media screen and (max-width: 500px) {
	.featured { scroll-margin-top: 175px; }
}

.featured:nth-of-type(even) { background-color: var(--cms-accent-color); }

footer .copy li {
	width: 100%;
	margin: 0;
}

footer .copy ul { padding-left: 0; }

@media screen and (max-width: 1023px) {
	footer a { font-size: 14px !important; }
}

#back-to-top {
	position: fixed;
	bottom: 100px;
	right: 100px;
	z-index: 4;
	cursor: pointer;
}

#back-to-top i { position: absolute; }

#back-to-top i:first-of-type {
	color: var(--theme-color1);
	font-size: 60px;
	top: 0;
	left: 0;
}

#back-to-top i:last-of-type {
	color: white;
	font-size: 30px;
	top: 20px;
	left: 15px;
}

.box-hero-image { aspect-ratio: 4/3; }

.marquee::before { content: none; }