/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

:root {
	--contentWidth:1000px;
	--colBackground:#242424;
}

body {
	background:var(--colBackground);
}

a {
	color:var(--colPurpleMid);
}

a:active {
	color:var(--colPurpleDark);
}

/* ======================== */
/* SECTION 1                */
/* ======================== */

.section1 {
	background-image:url("../images/day1/section1.jpg");
	height:700px;
}

#logo {
	display:inline-block;
	position:absolute;
	top:70px;
	left:190px;
	width:620px;
}

#logo:hover, #logo:focus {
	filter:brightness(1.15);
}

#logo:active {
	filter:brightness(0.85);
}

#logo img {
	display:block;
	width:100%;
}

#subtitle {
	position:absolute;
	top:240px;
	left:90px;
	width:820px;
	pointer-events:none;
}

#daySelector {
	top:375px;
	left:125px;
	width:180px;
}

/* ======================== */
/* SECTION 2                */
/* ======================== */

.section2 {
	background-image:url("../images/day1/section2.jpg");
	height:550px;
}

.section2 .text1 {
	top:290px;
	left:50px;
	width:900px;
	font-size:18px;
}

/* ======================== */
/* SECTION 3                */
/* ======================== */

.section3 {
	background-image:url("../images/day1/section3.jpg");
	height:560px;
}

.section3 .text1 {
	top:240px;
	left:35px;
	width:325px;
}

/* ======================== */
/* SECTION 4                */
/* ======================== */

.section4 {
	background-image:url("../images/day1/section4.jpg");
	height:490px;
}

.section4 .text1 {
	top:165px;
	right:35px;
	width:390px;
}

/* ======================== */
/* SECTION 5                */
/* ======================== */

.section5 {
	background-image:url("../images/day1/section5.jpg");
	height:900px;
}

.section5 .text1 {
	top:130px;
	left:50px;
	width:900px;
}

.section5 .maps1 {
	display:grid;
	bottom:65px;
	left:35px;
	gap:6px;
	width:300px;
}

.section5 .text2 {
	right:35px;
	bottom:65px;
	width:600px;
}

/* ======================== */
/* SECTION 6                */
/* ======================== */

.section6 {
	background-image:url("../images/day1/section6.jpg");
	height:700px;
}

.section6 .text1 {
	bottom:65px;
	left:35px;
	width:600px;
}

.section6 .maps1 {
	display:grid;
	right:35px;
	bottom:65px;
	gap:6px;
	width:300px;
}

/* ======================== */
/* FOOTER                   */
/* ======================== */

#footer {
	background-image:url("../images/day1/footer.jpg");
}