/* ======================== */
/* SECTION 1 - HEADER       */
/* ======================== */

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

#logo {
	display:inline-block;
	position:relative;
	top:40px;
	left:350px;
	opacity:0.5;
	width:300px;
}

#logo:hover, #logo:focus {
	opacity:0.65;
}

#logo:active {
	opacity:0.35;
}

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

#top {
	position:absolute;
	top:200px;
}

.character {
	position:absolute;
	bottom:0px;
}

.character.disabled {
	filter:grayscale(1) brightness(0.75);
}

#quakeChar {
	left:-5px;
	width:90px;
}

#qwtfChar {
	left:85px;
	width:73px;
}

#tfcChar {
	left:155px;
	z-index:1;
	width:112px;
}

#q3fChar {
	left:247px;
	width:112px;
}

#unfChar {
	left:330px;
	width:124px;
}

#ffChar {
	left:435px;
	width:185px;
}

#tf2Char {
	left:530px;
	z-index:1;
	width:170px;
}

#gg2Char {
	left:640px;
	z-index:1;
	width:100px;
}

#tf2cChar {
	right:-40px;
	width:320px;
}

/* ======================== */
/* SECTION 2 - TIMELINE     */
/* ======================== */

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

.section2 a {
	position:absolute;
	top:62px;
	height:42px;
}

.section2 a img {
	width:100%;
	display:none;
}

.section2 a:hover img, .section2 a:focus img, .section2 a.selected img {
	display:block;
}

#year1996 {
	left:47px;
	width:77px;
}

#year1999 {
	left:143px;
	width:75px;
}

#year2000 {
	left:237px;
	width:109px;
}

#year2005 {
	left:365px;
	width:103px;
}

#year2007 {
	left:487px;
	width:104px;
}

#year2008 {
	left:610px;
	width:108px;
}

#year2014 {
	left:737px;
	width:94px;
}

#year2026 {
	left:850px;
	width:103px;
}

/* ======================== */
/* SECTION 3 - YEAR INFO    */
/* ======================== */

.section3 {
	background:url("../images/main/section3.jpg") top center repeat-y;
	padding-bottom:15px;
}

.section3 p {
	margin-left:50px;
	width:900px;
	font-size:18px;
	text-align:center;
}

.section3 .title {
	font-size:24px;
}

.game {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	margin-top:30px;
	margin-left:50px;
	width:900px;
}

.gameScreenshots {
	display:flex;
	gap:10px;
	background:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25) 50px, rgba(0, 0, 0, 0.25) calc(100% - 50px), transparent);
	padding:10px 100px;
	width:100%;
}

.gameScreenshots a {
	position:relative;
	flex:1 1 0;
}

.gameScreenshots a:after {
	position:absolute;
	inset:0;
	content:"";
}

.gameScreenshots a:hover:after, .gameScreenshots a:focus:after {
	background:rgba(255, 255, 255, 0.15);
}

.gameScreenshots a:active:after {
	background:rgba(0, 0, 0, 0.15);
}

.gameScreenshots img {
	display:block;
	width:100%;
}

.gameData {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	gap:5px;
	width:100%;
}

.gameData a {
	font-weight:bold;
	font-size:18px;
}

.gameInfo {
	color:#999999;
	font-size:13px;
	line-height:1.35em;
}

/* ======================== */
/* SECTION 4 - MAIN         */
/* ======================== */

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

#textMain {
	position:absolute;
	top:140px;
	left:460px;
	width:515px;
}

#citation {
	position:absolute;
	top:10px;
	left:20px;
}

/* ======================== */
/* SECTION 5 - CLASSIC      */
/* ======================== */

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

#bannerGIF {
	position:absolute;
	top:20px;
}

#notice {
	display:flex;
	position:absolute;
	top:140px;
	justify-content:center;
	align-items:center;
	background-image:url("../images/main/notice.jpg");
	width:100%;
	height:30px;
}

#logoGIF {
	position:absolute;
	top:270px;
	left:425px;
	width:150px;
}

.nav {
	display:flex;
	position:absolute;
	flex-direction:column;
	gap:10px;
	width:300px;
}

#navLeft {
	top:290px;
	left:25px;
}

#navRight {
	top:290px;
	right:25px;
}

.nav a:hover, .nav a:focus {
	filter:brightness(1.25);
}

.nav a:active {
	filter:brightness(0.75);
}

.nav a img {
	display:block;
	width:100%;
}

.nav a.disabled {
	opacity:0.5;
	filter:unset !important;
}

#chicken {
	position:absolute;
	bottom:125px;
	left:40px;
	pointer-events:none;
	user-select:none;
}

#demoman {
	position:absolute;
	right:25px;
	bottom:50px;
	pointer-events:none;
	user-select:none;
}

#chicken img, #demoman img {
	display:block;
}

#webButtons {
	display:flex;
	position:absolute;
	bottom:60px;
	justify-content:center;
	gap:5px;
	width:100%;
}

#webButtons a img {
	display:block;
}