/* ==========================================================================
   CSS Variables for easy customization
   ========================================================================== */
:root {
	/* Adjust this value (0-1) to control background image opacity */
	--bg-image-opacity: 0.3;
	
	/* Adjust this value (0-1) to control white overlay opacity */
	--overlay-opacity: 0.7;
}

/* ==========================================================================
   Basic CSS reset and body styles
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	line-height: .9;
	padding: 50px;
	background-color: #f8f8f8;
	position: relative;
	transition: background-image 0.5s ease-in-out;
}

/* Background images - fixed, centered, cover */
body.bg-atlanta {
	background-image: url('images/atlanta.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body.bg-boston {
	background-image: url('images/boston.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* White overlay for controlling background visibility */
.background-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(248, 248, 248, var(--overlay-opacity));
	pointer-events: none;
	z-index: 0;
	transition: background-color 0.5s ease-in-out;
}

/* Ensure content appears above overlay */
main,
footer {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Layout
   ========================================================================== */
main {
	max-width: 90%;
}

footer {
	margin-top: 4em;
	color: grey;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1 {
	font-family: "agenda-extra-condensed", sans-serif;
	font-style: italic;
	font-size: 6vw;
	font-weight: 600;
	color: color(display-p3 0.227 0.227 0.231);
	margin: 0 0 .75em 0;
}

p {
	font-family: "agenda-extra-condensed", sans-serif;
	font-weight: 500;
	font-size: 3vw;
	color: color(display-p3 0.227 0.227 0.231);
	margin-top: 1em;
	line-height: 1.1em;
}

.bigLink {
	font-family: "agenda", sans-serif;
	font-weight: 800;
	font-size: 18vw;
	letter-spacing: -4px;
	margin-top: 0;
	line-height: .8em;
}

.copyright {
	font-size: 20px;
}

.copyright img {
	width: 16px !important;
	height: 16px;
	vertical-align: middle;
	margin-left: 0;
	margin-top: 0;
	filter: brightness(100%);
}

.copyright a {
	margin-right: -1em;
	padding-right: 0;
	text-decoration: none;
}

/* ==========================================================================
   Links
   ========================================================================== */
/* Atlanta links */
a.atl:link,
a.atl:visited {
	color: color(display-p3 0.678 0.216 0.184);
	text-decoration: none;
}

a.atl:visited:hover,
a.atl:hover {
	color: color(display-p3 0.799 0.186 0.143);
	cursor: pointer;
	text-decoration: none;
}

/* Boston links */
a.bos:link,
a.bos:visited {
	color: color(display-p3 0.073 0.18 0.435);
	text-decoration: none;
}

a.bos:visited:hover,
a.bos:hover {
	color: color(display-p3 0.064 0.191 0.845);
	cursor: pointer;
	text-decoration: none;
}

/* General links */
a:link {
	color: black;
	font-weight: 600;
}

a:visited {
	color: color(display-p3 0.227 0.227 0.231);
}

a:hover,
a:visited:hover {
	color: #ccc;
}