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

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

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

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

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

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

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

#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;
	right:125px;
	width:180px;
}

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

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

.section2 .text1 {
	top:120px;
	right:35px;
	width:460px;
}

#video {
	position:absolute;
	top:360px;
	right:55px;
}

#frame {
	position:absolute;
	top:340px;
	right:29px;
	width:482px;
	pointer-events:none;
}

.section2 .text2 {
	top:460px;
	left:35px;
	width:420px;
}

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

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

.section3 .text1 {
	top:150px;
	right:35px;
	width:465px;
}

.section3 .text2 {
	right:35px;
	bottom:180px;
	width:540px;
}

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

.section4 {
	background:url("../images/day2/section4.jpg") top center no-repeat, url("../images/day2/footer.jpg") top center repeat-y;
}

#changelog {
	padding:10px 35px;
}

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

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

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

#footer {
	background:url("../images/day2/footer.jpg") top center repeat-y;
}