/* ======= */
/* GENERAL */
/* ======= */

* {
	padding:0px;
	margin:0px;
}

body {
	color:#C9C9C9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background-position:top center;
	background-repeat:repeat-x;
	-webkit-text-size-adjust:none;
}

section {
	box-sizing:border-box;
	position:relative;
	background-repeat:no-repeat;
	background-position:top center;
	margin:auto;
}

section h1, section h2 {
	display:none;
}

p {
	font-size:14px;
	line-height:1.35em;
	text-shadow:0px 0px 2px rgba(0,0,0,1);
}

a, a:visited {
	color:#DED9D4;
}

a:hover {
	color:#FFFFFF;
}

#logo {
	position:absolute;
	left:400px;
	top:45px;
	width:200px;
	height:66px;
	background-image:url("../images/tf2c.png");
	background-position:top;
}

#logo:hover {
	background-position:bottom;
}

#footer {
	position:relative;
	width:1000px;
	bottom:100px;
}

#copyrightValve {
	position:absolute;
	left:116px;
	top:15px;
	width:101px;
	height:30px;
	background-image:url("../images/copyright_valve.png");
	background-position:top;
}

#copyrightValve:hover {
	background-position:bottom;
}

#copyrightTF2C {
	position:absolute;
	left:227px;
	top:13px;
	width:100px;
	height:34px;
	background-image:url("../images/copyright_tf2c.png");
	background-position:top;
}

#copyrightTF2C:hover {
	background-position:bottom;
}

#copyright {
	position:absolute;
	width:547px;
	height:60px;
	display:flex;
	align-items:center;
	right:116px;
	font-size:11px;
	text-shadow:0px 0px 2px rgba(0,0,0,0.5);
	color:#A5A5A5;
}

#credits {
	position:absolute;
	width:800px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	top:60px;
	left:100px;
	font-size:11px;
	text-shadow:0px 0px 2px rgba(0,0,0,0.5);
	color:#A5A5A5;
}

#credits b {
	background:#555555;
	padding:5px;
	border-radius:5px;
	box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

#dayCounter {
	position:absolute;
}

#dayCounter a {
	text-decoration:none;
	display:inline-block;
	font-size:0px;
}

.dayCounterGlow {
	animation:dayCounterGlow 1s infinite ease-in-out alternate;
}

@keyframes dayCounterGlow {
	0% {
		filter:drop-shadow(0px 0px 5px rgba(237, 235, 227, 0.5)) drop-shadow(0px 0px 5px rgba(237, 235, 227, 0.5));
	}
	100% {
		filter:drop-shadow(0px 0px 5px rgba(237, 235, 227, 1)) drop-shadow(0px 0px 3px rgba(237, 235, 227, 0.75));
	}
}

.gallery {
	display:inline-grid;
	grid-template-columns:50% 50%;
	margin:-2px;
}

.gallery a {
	display:block;
	padding:2px;
}

.gallery a img {
	display:block;
}

.mapModal {
	width:120px;
	height:68px;
	border:1px solid #6D6D6D;
	transition:transform 0.2s, box-shadow 0.2s;
}

.mapModal:hover {
	transform:translate(0,-2px);
	box-shadow:0px 5px 5px rgba(0,0,0,0.5);
}

#modal {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:rgba(0,0,0,0.5);
	backdrop-filter:blur(5px) grayscale(1);
	-webkit-backdrop-filter:blur(5px) grayscale(1);
	animation:modalFadeIn 0.5s cubic-bezier(0, 0.5, 0.1, 1);
	cursor:pointer;
	z-index:10;
}

@keyframes modalFadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

#modalImage {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-width:90vw;
	max-height:90vh;
	user-select:none;
	object-fit:contain;
	width:100%;
	height:100%;
	animation:modalImageZoom 0.5s cubic-bezier(0, 0.5, 0.1, 1);
}

@keyframes modalImageZoom {
	0% {
		transform:translate(-50%, -50%) scale(0.75);
	}
	100% {
		transform:translate(-50%, -50%) scale(1);
	}
}

.achievements {
	position:absolute;
	left:130px;
	right:130px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	text-shadow:0px 0px 2px rgba(0,0,0,1);
}

.achievements>* {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:64px;
	margin-bottom:10px;
	padding-left:72px;
	width:298px;
}

.achievements>*:nth-child(odd) {
	padding-right:10px;
	width:288px;
}