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

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

body, section, .container {
	min-width:1000px;
}

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;
	overflow-x:hidden;
}

.container {
	position:relative;
	margin:auto;
	width:1000px;
	height:100%;
	background-position:top center;
}

section h1, section h2, section h3 {
	display:none;
}

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

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

a:hover, a:focus {
	color:#FFFFFF;
}

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

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

#dayCounter {
	top:525px;
	right:75px;
}

#footer {
	position:relative;
	bottom:85px;
	width:900px;
	min-width:900px !important;
	overflow-x:unset !important;
}

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

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

#copyrightValve:hover, #copyrightValve:focus, #copyrightTF2C:hover, #copyrightTF2C:focus {
	background-position:bottom;
}

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

#dayCounter {
	position:absolute;
	display:flex;
	font-size:0px;
	filter:drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.75));
	transform:rotate(-3deg);
}

#dayCounter div {
	margin:0px -14px;
	position:relative;
}

#dayCounter a {
	position:absolute;
	display:inline-block;
	width:calc(100% - 28px);
	height:100%;
	margin-left:28px;
	z-index:1;
}

#dayCounter div:first-of-type a {
	width:100% !important;
	margin-left:0px !important;
}

#dayCounter a:hover + img, #dayCounter a:focus + img {
	filter:brightness(1.15);
}

.dayCounterSelected {
	filter:brightness(1.3) !important;
}

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

@keyframes dayCounterGlow {
	0% {
		filter:drop-shadow(0px 0px 5px rgba(224, 242, 255, 0.25));
	}
	100% {
		filter:drop-shadow(0px 0px 5px rgba(224, 242, 255, 1)) drop-shadow(0px 0px 3px rgba(224, 242, 255, 0.5));
	}
}

.gallery {
	display:flex;
	gap:5px;
}

.gallery a, .gallery a img  {
	display:block;
}

.map {
	transition:transform 0.2s, box-shadow 0.2s;
	box-shadow:0px 3px 3px rgba(0,0,0,0.5);
}

.map img {
	width:150px;
	height:84px;
	border:2px solid #6D6D6D;
	border-radius:3px;
}

.map:hover, .map:focus {
	transform:translate(0,-2px);
	box-shadow:0px 5px 5px rgba(0,0,0,1);
}

.modalLink {
	display:inline-block;
	font-size:0px;
}

#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;
	font-size:18px;
	left:60px;
	right:60px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	text-shadow:0px 0px 3px rgba(0,0,0,1);
}

.achievements>* {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:100px;
	margin-bottom:20px;
	padding-left:120px;
	width:310px;
}

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

.hidden {
	opacity:0.5;
	font-style:italic;
}

#buttonAchievements {
	position:absolute;
	filter:drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
	font-size:0px;
}

#buttonAchievements:hover {
	filter:brightness(1.25) drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}