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

@font-face {
	font-family:'Lexend Deca';
	src:url(/fonts/LexendDeca.woff2) format('woff2');
}

@font-face {
	font-family:'Source Code Pro';
	src:url(/fonts/SourceCodePro.woff2) format('woff2');
}

@font-face {
	font-family:'Alegreya';
	src:url(/fonts/Alegreya.woff2) format('woff2');
}

@font-face {
	font-family:'TF2C';
	src:url(/fonts/TF2C.woff2) format('woff2');
}

@font-face {
	font-family:'TF2C Secondary';
	src:url(/fonts/TF2CSecondary.woff2) format('woff2');
}

@font-face {
	font-family:'TF2C Build';
	src:url(/fonts/TF2CBuild.woff2) format('woff2');
}

@font-face {
	font-family:'TF2C Professor';
	src:url(/fonts/TF2CProfessor.woff2) format('woff2');
}

* {
	margin:0px;
	padding:0px;
	border:0px;
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
}

html.gameMode {
	scroll-behavior:unset !important;
}

html, body {
	margin:0px;
	height:100%;
	font-size:16px;
	-webkit-text-size-adjust:100% !important;
	-webkit-font-smoothing:antialiased !important;
}

html.gameMode::-webkit-scrollbar {
	width:20px;
}

@media (min-width: 1000px) {
	html.gameMode::-webkit-scrollbar {
		width:40px !important;
	}
}

html.gameMode::-webkit-scrollbar-track {
	background:#9B948E;
}
 
html.gameMode::-webkit-scrollbar-thumb {
	background:#5B5248;
}

html.gameMode::-webkit-scrollbar-thumb:hover {
	background:#231F20; 
}

html.gameMode::-webkit-scrollbar-thumb:active {
	background:#1A1718; 
}

body {
	background:#3B352D;
	font-family:"Lexend Deca", sans-serif;
	color:#000000;
}

p {
	margin:15px auto;
}

a {
	color:#244BC5;
}

a:not([class]):hover, a.link:hover {
	text-shadow:0px 0px 5px currentColor;
}

.imageLink img:hover {
	filter:brightness(1.25);
}

h1 {
	font-family:"TF2C";
	font-size:32px;
	font-weight:700;
	text-shadow:1px 1px 2px rgba(0,0,0,0.25);
	position:relative;
	margin-bottom:24px;
}

h2 {
	font-family:"TF2C Secondary";
	font-size:26px;
	font-weight:700;
	text-shadow:1px 1px 2px rgba(0,0,0,0.25);
	position:relative;
	display:inline-block;
	width:100%;
	border-bottom:2px solid #857D75;
	margin-bottom:5px;
	padding-bottom:2px;
}

h2 + * {
	margin-top:0px !important;
}

h2 a {
	color:#B35221;
	text-decoration:none;
}

h1 a:hover, h2 a:hover {
	text-shadow:1px 1px 2px rgba(0,0,0,0.25), 0px 0px 5px currentColor !important;
}

h3 {
	font-size:19px;
	font-weight:700;
	margin-bottom:10px;
}

@media (max-width: 850px) {
	h1, h2 {
		font-weight:550 !important;
	}
}

.anchor {
	cursor:pointer;
	color:#000000;
}

.anchor:hover {
	cursor:pointer;
	color:#000000;
	text-shadow:unset !important;
}

.anchor:hover + .anchorButton {
	opacity:1 !important;
}

.anchorButton {
	width:24px;
	height:24px;
	margin-left:5px;
	bottom:5px;
	display:inline-block;
	position:absolute;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
	background-image:url("/images/icons/generic/link.png");
	background-repeat:no-repeat;
	background-size:24px 24px;
	transition:transform 0.2s, opacity 0.15s;
	opacity:0;
}

@media (max-width: 850px) {
	.anchorButton {
		display:none !important;
	}
}

ul {
	margin:10px 0;
}

li {
	margin-left:20px;
	margin-bottom:15px;
}

li:last-child {
	margin-bottom:0px !important;
}

code {
	font-family:"Source Code Pro";
	padding:0px 3px;
	border-radius:5px;
	background:rgba(0,0,0,0.15);
}

.hint {
	padding:10px;
	border:2px solid #857D75;
	border-radius:5px;
	background:#C6BBBC;

}

.hint.warning {
	border:2px solid #B35221;
	background:#D68E6B;
}

.button {
	font-family:"TF2C Build";
	font-size:20px;
	line-height:24px;
	background:#4D463F;
	color:#EAE5E1;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
	text-align:center;
	text-decoration:none;
	margin:auto;
	margin-bottom:15px;
	padding:10px;
	border:3px solid #EAE5E1;
	border-radius:10px;
	display:block;
	box-shadow:0px 5px 5px rgba(0,0,0,0.25);
	transition:transform 0.2s;
}

.button:hover {
	text-shadow:1px 1px 2px rgba(0,0,0,0.5), 0px 0px 4px currentColor;
	filter:brightness(1.15);
	transform:translate(0,-2px);
}

.button:active {
	transform:translate(0,0);
	transition:transform 0s;
}

.flexList {
	margin-top:-10px;
	margin-bottom:10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

#jumpContainer {
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:2;
	display:flex;
}

.gameMode #jumpContainer {
	right:50% !important;
	transform:translate(50%, 0);
}

@media (min-width: 1000px) {
	.gameMode #jumpContainer {
		transform:scale(2) !important;
		transform-origin:0 100% !important;
		bottom:40px !important;
	}
}

#jumpTop, #jumpBottom {
	float:right;
	margin:5px;
	width:50px;
	height:50px;
	padding:15px;
	text-align:center;
	border-radius:50%;
	opacity:1;
	background:#FF7C44;
	cursor:pointer;
	user-select:none;
	box-shadow:0px 5px 5px rgba(0,0,0,0.25);
	transition:transform 0.2s, opacity 0.1s, background 0.1s;
}

#jumpTop:hover, #jumpBottom:hover {
	background:#FFAA6E;
	transform:translate(0,-2px);
}

.jumpDisabled {
	background:#857D75 !important;
	opacity:0.5 !important;
	cursor:unset !important;
}

.jumpDisabled:hover {
	transform:translate(0,0) !important;
}

/* ====== */
/* HEADER */
/* ====== */

#header {
	position:relative;
	display:flex;
	flex-direction:column;
	z-index:1;
	overflow:hidden;
}

@media (max-width: 850px) {
	#header {
		flex-direction:column-reverse !important;
	}
}

.headerFull {
	padding-bottom:58px;
}

@media (max-width: 850px) {
	.headerFull {
		padding-bottom:0px !important;
	}
}

.headerFull:before {
	content:"";
	position:absolute;
	left:50%;
	bottom:24px;
	z-index:1;
	display:block;
	margin-left:-24px;
	width:0px;
	height:0px;
	border:24px solid transparent;
	border-top-color:#E8D9AB;
	animation:headerArrow 2s infinite ease-in-out;
}

@media (max-width: 850px) {
	.headerFull:before {
		animation:unset !important;
		display:none !important;
	}
}

@keyframes headerArrow {
	0% {
		transform:translateY(0px);
	}
	50% {
		transform:translateY(24px);
	}
	100% {
		transform:translateY(0px);
	}
}

#headerBackground {
	position:absolute;
	z-index:-1;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center center;
}

@media (max-width: 850px) {
	#headerBackground {
		margin-bottom:360px !important;
	}
}

#headerBackground:before {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent 25%) bottom;
}

@media (max-width: 850px) {
	#headerBackground:before {
		margin-bottom:300px !important;
	}
}

/* ========== */
/* HEADER NAV */
/* ========== */

#headerNav {
	position:sticky;
	z-index:1;
	margin:30px 30px 0px;
}

@media (max-width: 850px) {
	#headerNav {
		margin:0px !important;
	}
}

#headerNavContainer {
	max-width:1200px;
	height:70px;
	margin:auto;
	background:#231F20;
	border-radius:10px;
	box-shadow:0px 5px 10px rgba(0,0,0,0.5);
}

@media (max-width: 850px) {
	#headerNavContainer {
		max-width:100% !important;
		border-radius:0px !important;
		height:100% !important;
	}
}

#headerNavLinks a {
	height:70px;
	display:flex;
	justify-content:center;
	flex-direction:column;
	text-align:center;
	padding:0px 32px;
	border-radius:10px;
	text-decoration:none;
	float:left;
	color:#FF7C44;
	font-size:20px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
	font-family:"TF2C Secondary";
}

@media (max-width: 850px) {
	#headerNavLinks a {
		float:unset !important;
		padding:0px 20px !important;
		border-radius:0px !important;
		height:60px !important;
	}
}

#headerNavLinks a:hover {
	background:#1A1718;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5), 0px 0px 5px currentColor;
}

#headerNavLinks a.headerDownload {
	float:right;
	color:#231F20;
	background:#FF7C44;
}

@media (max-width: 850px) {
	#headerNavLinks a.headerDownload {
		float:left !important;
		color:#FF7C44 !important;
		background:#231F20 !important;
		width:100% !important;
	}
}

#headerNavLinks a.headerDownload:hover {
	color:#E8D9AB;
}

@media (max-width: 850px) {
	#headerNavLinks a.headerDownload:hover {
		background:#1A1718 !important;
	}
}

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

@media (max-width: 850px) {
	.headerDownloadGlow {
		animation:unset !important;
	}
}

@keyframes headerDownloadGlow {
	0% {
		box-shadow:0px 0px 20px 5px rgba(255, 124, 68, 0.5);
	}
	100% {
		box-shadow:0px 0px 20px 5px rgba(255, 124, 68, 1);
	}
}

.headerWishlist {
	background:#145285 !important;
	color:#EAE5E1 !important;
	float:right !important;
	animation:headerWishlistGlow 1s infinite ease-in-out alternate;
}

.headerWishlist:hover {
	background:#2F71A8 !important;
}

@media (max-width: 850px) {
	.headerWishlist {
		float:left !important;
		color:#FF7C44 !important;
		background:#231F20 !important;
		width:100% !important;
		animation:unset !important;
	}

	.headerWishlist img {
		display:none !important;
	}
}

@keyframes headerWishlistGlow {
	0% {
		box-shadow:0px 0px 10px 5px rgba(20, 82, 133, 0.5);
	}
	100% {
		box-shadow:0px 0px 10px 5px rgba(20, 82, 133, 1);
	}
}

.headerWishlist img {
	filter:brightness(0) invert(99%) sepia(97%) saturate(106%) hue-rotate(302deg) brightness(93%) contrast(97%) drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

.headerWishlist:hover img {
	filter:brightness(0) invert(99%) sepia(97%) saturate(106%) hue-rotate(302deg) brightness(93%) contrast(97%) drop-shadow(0px 2px 2px rgba(0,0,0,0.5)) drop-shadow(0px 0px 2px currentcolor);
}

.newVersion {
	font-size:75%;
	text-align:center;
	animation:rainbow 2s infinite linear;
	text-shadow:0px 0px 3px #000, 0px 0px 2px currentcolor;
	font-weight:700;
	margin-top:4px;
	font-family:"TF2C Build";
}

@media (max-width: 850px) {
	.newVersion {
		display:none !important;
	}
}

.rainbow {
	animation:rainbow 1.5s infinite linear;
	text-shadow:0px 0px 2px currentcolor;
}

@keyframes rainbow{
	0% {
		color:#FF542D;
	}
	14% {
		color:#FFAC00;
	}
	28% {
		color:#F7E600;
	}
	42% {
		color:#35FF53;
	}
	56% {
		color:#07E8F4;
	}
	70% {
		color:#569AFF;
	}
	84% {
		color:#F446EC;
	}
	100% {
		color:#FF542D;
	}
}

/* ============== */
/* HEADER CONTENT */
/* ============== */

#headerMain {
	height:100%;
	position:relative;
	margin:64px 32px;
}

#headerMainContainer {
	display:inline-flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	position:relative;
	width:100%;
	height:100%;
}

#headerLogo {
	position:relative;
	line-height:0px;
	display:inline-flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}

.halloween #headerLogo {
	filter:hue-rotate(270deg) grayscale(50%) !important;
}

.christmas #headerLogo {
	filter:hue-rotate(200deg) grayscale(75%) !important;
}

#headerLogo a {
	line-height:0px;
	display:inline-block;
	max-width:100%;
}

@media (max-width: 850px) {
	#headerLogo a {
		width:100% !important;
	}
}

#headerLogo img {
	width:100%;
	height:275px;
	max-height:40vh;
	filter:drop-shadow(0px 5px 5px rgba(0,0,0,0.5));
}

@media (max-width: 850px) {
	#headerLogo img {
		width:100% !important;
		height:unset !important;
		max-height:unset !important;
	}
}

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

#headerText {
	max-width:1200px;
	margin-top:32px;
	display:block;
	text-align:center;
	font-size:min(25px, 3vw);
	color:#E8D9AB;
	border-radius:10px;
	background:rgba(0,0,0,0.65);
	padding:16px;
	text-shadow:2px 2px 3px rgba(0,0,0,0.5);
}

#headerText a {
	max-width:fit-content;
	margin-top:16px;
	margin-bottom:0px !important;
	background:#145285 !important;
}

#headerText a:hover {
	background:#2F71A8 !important;
}

#headerText a img {
	filter:brightness(0) invert(99%) sepia(97%) saturate(106%) hue-rotate(302deg) brightness(93%) contrast(97%) drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

#headerText a:hover img {
	transform:translate(0,-1px);
	filter:brightness(0) invert(99%) sepia(97%) saturate(106%) hue-rotate(302deg) brightness(93%) contrast(97%) drop-shadow(0px 2px 2px rgba(0,0,0,0.5)) drop-shadow(0px 0px 2px currentcolor);
}

/* ============ */
/* PAGE CONTENT */
/* ============ */

#page {
	background-image:url("/images/brick.jpg");
	background-repeat:repeat;
	background-position:top center;
}

#page:before {
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	background-image:url("/images/bricktop.png");
	background-repeat:repeat-x;
	background-position:top center;
}

.halloween #page:before {
	background-image:url("/images/halloween/bricktoprust.png") !important;
}

.christmas #page:before {
	background-image:url("/images/christmas/bricktopsnow.png") !important;
}

.gameMode #page {
	background-image:unset !important;
}

@media (min-width: 1000px) {
	.gameMode #page {
		transform:scale(2) !important;
		transform-origin:0 0 !important;
		width:50% !important;
		height:50% !important;
	}
}

#pageContainer {
	display:flex;
	position:relative;
	margin:auto;
	overflow:auto;
	max-width:1200px;
	background:#D2CDC8;
	box-shadow:0px 0px 20px #000000;
}

@media (max-width: 850px) {
	#pageContainer {
		flex-direction:column;
	}
}

.gameMode #pageContainer {
	max-width:100% !important;
	min-height:100% !important;
}

#pageContent {
	padding:32px;
	width:100%;
	position:relative;
}

@media (max-width: 850px) {
	#pageContent {
		padding:24px !important;
	}
}

section {
	display:block;
	width:100%;
}

article section:last-of-type > *:last-child {
	margin-bottom:0px !important;
}

.errorImage {
	display:block;
	margin:0 auto;
	margin-top:24px;
}

.errorText {
	font-size:24px;
	font-family:"TF2C Secondary";
	text-align:center;
}

/* ======= */
/* SIDEBAR */
/* ======= */

#sidebar {
	position:relative;
	background:#B2ACA7;
	min-width:350px;
}

@media (max-width: 850px) {
	#sidebar {
		width:100% !important;
		min-width:unset !important;
	}
}

#sidebar > * {
	margin:0px 16px 16px;
}

#sidebar > *:first-child {
	margin:16px;
}

.sidebarSection {
	border-radius:5px;
	overflow:hidden;
}

.sidebarSectionTitle {
	background:#3B352D;
	color:#EAE5E1;
	text-align:center;
	font-size:20px;
	padding:10px;
	height:40px;
	text-shadow:1px 1px 2px rgba(0,0,0,1);
	font-family:"TF2C Secondary";
}

.sidebarSectionContent {
	background:#857D75;
	padding:15px;
}

.sidebarSectionContent>:first-child {
	margin-top:0px;
}

.sidebarSectionContent>:last-child {
	margin-bottom:0px;
}

#sidebarIcons {
	display:flex;
	justify-content:center;
	gap:15px;
}

.buttonIcon {
	width:100%;
	max-width:50px;
	height:auto;
	display:inline-block;
	transition:transform 0.2s;
	filter:brightness(0) invert(99%) sepia(97%) saturate(106%) hue-rotate(302deg) brightness(93%) contrast(97%) drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

.buttonIcon img {
	width:100%;
	height:100%;
}

.buttonIcon:hover {
	transform:translate(0,-1px);
	filter:drop-shadow(0px 2px 2px rgba(0,0,0,0.5)) drop-shadow(0px 0px 2px currentcolor);
}

.buttonIcon:active {
	transform:translate(0,0);
	transition:transform 0s;
}

.button.team {
	background:#528C5B;
}

.button.bugs {
	background:#B54646;
}

.buttonIcon.discord {
	color:#5865F2;
}

.buttonIcon.bluesky {
	color:#1185FE;
}

.buttonIcon.twitter {
	color:#1D9BF0;
}

.buttonIcon.youtube {
	color:#FF0033;
}

.buttonIcon.reddit {
	color:#FF4500;
}

.buttonIcon.steam {
	color:#145285;
}

#sidebarServers {
	width:calc(100% - 32px);
	border-radius:5px;
}

@media (max-width: 850px) {
	#sidebarServers {
		display:none !important;
	}
}

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

#footer {
	background:#231F20;
	color:#9B948E;
	position:relative;
	z-index:1;
	box-shadow:0px 0px 20px #000000;
}

#footerContainer {
	max-width:1200px;
	min-height:100px;
	position:relative;
	padding:16px;
	margin:auto;
	display:flex;
}

@media (max-width: 850px) {
	#footerContainer {
		flex-direction:column !important;
	}
}

#footerContainer > * {
	display:block;
	margin:16px;
}

#footerLogo {
	width:100%;
	height:100%;
	max-width:200px;
}

@media (max-width: 850px) {
	#footerLogo {
		margin:16px auto 0px !important;
	}
}

#footerLogo img {
	display:block;
	margin:auto;
	width:100%;
	max-width:100%;
	border-radius:3px;
}

#footerLogo img:hover {
	box-shadow:0px 0px 5px #F57234;
}

#footerContainer p {
	margin:0px;
	margin-bottom:15px;
}

#footerContainer p:last-child {
	margin-bottom:0px;
}

#footerContainer a {
	text-decoration:none;
	color:#FF7C44;
}

#footerLinks {
	display:inline-block;
	color:#FF7C44;
}

#footerLinks ul {
	margin:0px;
}

#footerLinks li {
	margin-bottom:5px;
}

#footerVersion {
	margin-top:15px !important;
	opacity:50%;
	font-size:80%;
}

/* ========== */
/* BLOG POSTS */
/* ========== */

.blogPost {
	margin-bottom:40px;
}

.blogPost:last-child {
	margin-bottom:0px;
}

.blogPostDate {
	font-size:18px;
	font-family:"TF2C Secondary";
	font-weight:700;
	margin-bottom:2px;
	color:#5B5248;
}

@media (max-width: 850px) {
	.blogPostDate {
		font-weight:550 !important;
	}
}

.blogPostContent {
	position:relative;
}

#blogTagNav {
	font-size:18px;
	font-family:"TF2C Secondary";
	border-radius:5px;
	background:#B2ACA7;
	padding:7px;
	margin-top:-12px;
	margin-bottom:12px;
	white-space:nowrap;
}

#blogTagNavText {
	display:inline-block;
	margin-left:3px;
}

#blogTagNavContainer {
	display:flex;
	flex-wrap:wrap;
}

.blogTagContainer {
	font-size:18px;
	font-family:"TF2C Secondary";
	margin-bottom:15px;
}

.blogTagText {
	display:inline-block;
	margin-right:3px;
}

.blogTag {
	display:inline-block;
	border-radius:5px;
	padding:2px 4px;
	margin:3px;
	background:#B2ACA7;
	color:#231F20;
	text-decoration:none;
	text-transform:capitalize;
	transition:transform 0.2s;
}

.blogNavTag {
	box-shadow:0px 2px 2px rgba(0,0,0,0.25);
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
	background:#FF7C44;
}

.blogNavTag:hover {
	background:#FFAA6E;
	transform:translate(0,-2px);
}

.blogNavTagActive {
	background:#E8D9AB;
}

.blogNavTagActive:hover {
	background:#FFF0BF;
}

#blogTools {
	border-top:2px solid #857D75;
	display:flex;
}

.gameMode #blogTools {
	margin-bottom:60px;
}

#blogPage, #blogPrev, #blogNext, #blogBack {
	display:flex;
	margin-top:10px;
	line-height:20px;
	font-size:16px;
	visibility:hidden;
	width:100%;
}

@media (max-width: 850px) {
	#blogPage, #blogPrev, #blogNext, #blogBack {
		margin-top:0px !important;
	}
}

.blogButton {
	display:inline-block;
}

@media (max-width: 850px) {
	.blogButton {
		margin-top:10px;
	}
}

.blogShow {
	visibility:visible !important;
}

#blogPage, #blogBack {
	justify-content:center;
}

@media (max-width: 850px) {
	#blogPage {
		margin-top:25px !important;
	}
}

#blogPrev {
	justify-content:flex-start;
}

@media (max-width: 850px) {
	#blogPrev {
		flex-direction:column-reverse !important;
		text-align:left !important;
		flex-shrink:3;
	}
}

#blogNext {
	justify-content:flex-end;
}

@media (max-width: 850px) {
	#blogNext {
		flex-direction:column !important;
		text-align:right !important;
		flex-shrink:3;
	}
}

#blogPrev a, #blogNext a, #blogBack a {
	text-decoration:none;
	color:#B35221;
	white-space:nowrap;
	text-shadow:1px 1px 2px rgba(0,0,0,0.25);
}

#blogPrev a:hover, #blogNext a:hover, #blogBack a:hover {
	text-shadow:1px 1px 2px rgba(0,0,0,0.25), 0px 0px 5px currentColor !important;
}

.blogArrowLeft,.blogArrowRight {
	vertical-align:bottom;
	margin:0px 5px;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
}

.blogButton:hover a img {
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.25)) drop-shadow(0px 0px 5px #B35221);
}

.blogArrowLeft {
	transform:scaleX(-1);
}

/* =============== */
/* BLOG POST LISTS */
/* =============== */

.blogPostContent ul {
	margin:0px;
}

.blogPostContent ul li {
	list-style-type:none;
	background:url("/images/icons/blog/blogArrowList.png") no-repeat;
	background-size:16px 16px;
	background-position:2px 2px;
	margin-left:0px !important;
	padding-left:20px;
	margin-bottom:10px;
}

.blogPostContent ul li:last-child {
	margin-bottom:0px !important;
}

.blogPostContent li ul {
	margin-top:10px;
	padding-left:20px;
}

/* ================ */
/* BLOG POST IMAGES */
/* ================ */

.blogPostContent img {
	margin:0px auto;
	max-width:100%;
	max-height:600px;
	border-radius:5px;
}

.gameMode .blogPostContent img {
	max-height:400px;
}

/* =============== */
/* BLOG POST LINKS */
/* =============== */

.gameMode .blogPostContent a {
	text-shadow:unset !important;
	color:#000000 !important;
	text-decoration:none !important;
}

.blogPostContent a img {
	transition:transform 0.2s, filter 0.2s;
}

.blogPostContent a img:hover {
	transform:translate(0,-2px);
	filter:drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}

.gameMode .blogPostContent a img {
	box-shadow:unset !important;
	transform:unset !important;
	pointer-events:none !important;
}

/* ================= */
/* BLOG POST IFRAMES */
/* ================= */

.bbMediaWrapper-inner {
	position:relative;
	display:block;
	margin:auto;
	padding-bottom:56.25%;
	width:100%;
	height:100%;
}

.blogPostContent iframe {
	position:absolute;
	left:0px;
	width:100%;
	height:100%;
	border-radius:5px;
}

.gameMode .blogPostContent iframe {
	pointer-events:none !important;
}

/* ========= */
/* TEAM PAGE */
/* ========= */

.teamMember {
	display:inline-block;
	border-radius:8px;
	background:#EAE5E1;
	border:2px solid #9B948E;
	position:relative;
	overflow:hidden;
	width:150px;
	height:350px;
	margin:3px;
	transform-origin:top;
	transition:transform 0.2s, box-shadow 0.2s;
}

@media (max-width: 850px) {
	.teamMember {
		width:100% !important;
		height:auto !important;
		min-height:102px !important;
		transform-origin:left !important;
	}
}

.teamMember:hover {
	z-index:1;
	transform:rotate(-2deg);
	box-shadow:0px 5px 5px rgba(0,0,0,0.25);
}

@media (max-width: 850px) {
	.teamMember:hover {
		transform:rotate(0.5deg) !important;
	}
}

.teamTop {
	background:#5B5248;
	padding:10px 0;
}

@media (max-width: 850px) {
	.teamTop {
		float:left !important;
		width:30px !important;
		padding:0 10px !important;
		height:100% !important;
	}
}

.teamTop:before {
	content:"";
	border-radius:8px;
	position:relative;
	display:block;
	border:2px solid #9B948E;
	background:#D2CDC8;
	width:25px;
	height:6px;
	margin:0 auto;
}

@media (max-width: 850px) {
	.teamTop:before {
		float:left !important;
		width:6px !important;
		height:25px !important;
		top:50% !important;
		transform:translate(0, -50%)!important;
	}
}

.teamPicture {
	border:2px solid #9B948E;
	border-radius:4px;
	position:relative;
	overflow:hidden;
	background:#36393F;
	margin:16px auto 8px;
	width:100px;
}

@media (max-width: 850px) {
	.teamPicture {
		width:70px !important;
		float:left !important;
		margin:auto 16px !important;
		top:50% !important;
		transform:translate(0, -50%)!important;
	}
}

.teamPicture img {
	display:block;
	width:100%;
	height:100%;
}

@media (max-width: 850px) {
	.teamContainer {
		width:calc(100% - 132px) !important;
		padding:10px 16px 10px 0 !important;
		float:left !important;
		position:relative !important;
		top:50% !important;
		transform:translate(0, -50%)!important;
	}
}

.teamName {
	padding:4px;
	position:relative;
	text-align:center;
	font-size:18px;
	font-family:"TF2C Secondary";
}

@media (max-width: 850px) {
	.teamName {
		padding-top:0px !important;
	}
}

.teamRoles {
	position:absolute;
	bottom:0px;
	font-size:0;
	width:100%;
	padding-bottom:6px;
}

@media (max-width: 850px) {
	.teamRoles {
		position:relative !important;
		padding-bottom:0px !important;
		text-align:center !important;
	}
}

.teamRole {
	float:right;
	background:#000;
	color:#FFFFFF;
	width:100%;
	text-align:right;
	padding:2px 6px;
	white-space:nowrap;
	font-size:14px;
	margin-bottom:4px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

@media (max-width: 850px) {
	.teamRole {
		float:unset !important;
		width:unset !important;
		display:inline-block !important;
		margin:2px !important;
		font-size:13px !important;
		border-radius:3px !important;
		text-align:center !important;
		white-space:unset !important;
	}
}

@media (max-width: 850px) {
	.teamRole:last-child {
		margin-bottom:0px !important;
	}
}

/* silly */
.teamMedal {
	margin:2px;
	margin-right:10px;
	vertical-align:bottom;
	user-select:none;
	cursor:pointer;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
	transition:transform 0.2s;
}

.teamMedal:hover {
	transform:translate(0,-1px);
}

.teamMedal:active {
	transform:translate(0,0);
	transition:transform 0s;
}

.teamMedalKeyboard {
	transform:translate(0,1px);
}

.teamMemberContrib {
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:3px;
	background:#9B948E;
	width:150px;
	height:auto;
	min-height:120px;
	font-size:14px;
	margin:3px;
	position:relative;
	text-align:center;
}

@media (max-width: 850px) {
	.teamMemberContrib {
		width:calc(50% - 6px) !important;
		min-height:80px !important;
	}
}

.teamNameContrib {
	font-family:"TF2C Secondary";
	color:#EAE5E1;
	font-size:18px;
	word-break:break-word;
}

.teamContainerContrib {
	width:100%;
	padding:10px;
}

#teamListBeta {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:10px;
}

.teamMemberBeta {
	display:inline-block;
	padding:2px 4px;
	font-size:18px;
	font-family:"TF2C Secondary";
	border-radius:3px;
	background:#9B948E;
	color:#EAE5E1;
	margin:3px;
}

/* ============ */
/* HISTORY PAGE */
/* ============ */

#historyTree {
	position:relative;
	z-index:1;
}

#historyTree:before {
	content:"";
	width:4px;
	top:0;
	bottom:0;
	background:linear-gradient(0deg, #3B352D calc(100% - 30px), transparent) bottom;
	display:block;
	position:absolute;
	border-radius:4px;
	left:50%;
	margin-left:-2px;
	z-index:-1;
}

@media (max-width: 850px) {
	#historyTree:before {
		left:unset !important;
		right:5% !important;
	}
}

.historyCheckered {
	position:relative;
}

.historyCheckered:before {
	content:"";
	width:4px;
	top:0;
	bottom:-50%;
	background:linear-gradient(transparent 50%, #3B352D 50%), #D2CDC8;
	background-size:8px 8px;
	display:block;
	position:absolute;
	left:50%;
	margin-left:-2px;
	z-index:-1;
}

@media (max-width: 850px) {
	.historyCheckered:before {
		left:unset !important;
		right:5% !important;
	}
}

.historyPatch {
	padding:20px 40px 20px 0px;
	position:relative;
	width:50%;
	text-shadow:1px 1px 2px rgba(0,0,0,0.25);
}

@media (max-width: 850px) {
	.historyPatch {
		padding:20px 40px 20px 5% !important;
		width:95% !important;
	}
}

.historyPatch:before {
	content:"";
	position:absolute;
	width:30px;
	height:4px;
	top:50%;
	margin-top:-2px;
	right:0;
	border-radius:4px;
	background:#3B352D;
}

@media (max-width: 850px) {
	.historyPatch:before {
		right:2px !important;
	}
}

.historyPatch:nth-of-type(even) {
	padding:20px 0px 20px 40px;
	left:50%;
}

@media (max-width: 850px) {
	.historyPatch:nth-of-type(even) {
		padding:20px 40px 20px 5% !important;
		left:unset !important;
	}
}

.historyPatch:nth-of-type(even):before {
	content:"";
	position:absolute;
	width:30px;
	height:4px;
	top:50%;
	margin-top:-2px;
	left:0;
	border-radius:4px;
	background:#3B352D;
}

@media (max-width: 850px) {
	.historyPatch:nth-of-type(even):before {
		left:unset !important;
		right:2px !important;
	}
}

.historyContent {
	border-radius:5px;
	background:#B2ACA7;
	padding:5px;
	font-size:25px;
	display:inline-block;
	width:100%;
	text-align:center;	
}

.historyTitle {
	display:inline-block;
	font-family:"TF2C Secondary";
}

.historyContent a {
	text-decoration:none;
	color:#B35221;
}

.historyContent a:hover {
	text-shadow:1px 1px 2px rgba(0,0,0,0.25), 0px 0px 5px currentColor;
}

.historyDate {
	font-size:15px;
	margin-bottom:5px;
}

.historyMajor img {
	width:100%;
	background:#5B5248;
	border:#5B5248 2px solid;
	border-radius:5px;
}

.historyMajor a:first-child {
	width:100%;
	height:100%;
	display:inline-block;
	font-size:0;
}

/* ============= */
/* ARTWORK PAGE */
/* ============= */

.artworkImageContainer {
	font-size:0px;
	width:150px;
	height:150px;
	margin:3px;
}

@media (max-width: 850px) {
	.artworkImageContainer {
		width:calc(33% - 6px) !important;
		height:auto !important;
	}
}

.artworkImage {
	width:100%;
	height:100%;
	cursor:pointer;
	transition:transform 0.2s, box-shadow 0.2s;
	border-radius:3px;
}

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

#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:80vw;
	max-height:80vh;
	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);
	}
}

#modalInfo {
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%, 0%);
	max-width:80vw;
	margin-bottom:20px;
	padding:10px;
	text-align:center;
	color:#FFFFFF;
	font-size:min(30px, 5vw);
	border-radius:5px;
	cursor:auto;
	background:rgba(0,0,0,0.5);
	width:max-content;
}

#modalAuthor {
	font-size:min(25px, 4vw);
	display:inline-block;
}

/* ============= */
/* DOWNLOAD PAGE */
/* ============= */

#downloadContainer {
	background:#B2ACA7;
	padding:24px 24px 14px;
	border-radius:5px;
}

#downloadPlatforms {
	display:flex;
	gap:16px;
}

@media (max-width: 850px) {
	#downloadPlatforms {
		flex-direction:column !important;
		gap:unset !important;
	}
}

.buttonDownload {
	width:80%;
}

@media (max-width: 850px) {
	.buttonDownload {
		width:100% !important;
	}
}

.platformIcon {
	vertical-align:text-bottom;
}

p .platformIcon {
	filter:brightness(0);
}

h1 .platformIcon {
	filter:brightness(0) drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
}

.button .platformIcon {
	filter:brightness(1) drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.button:hover .platformIcon {
	filter:brightness(1) drop-shadow(1px 1px 2px rgba(0,0,0,0.5)) drop-shadow(0px 0px 2px rgba(234,229,225,1));
}

/* ========= */
/* HALLOWEEN */
/* ========= */

#fog {
	position:absolute;
	bottom:0px;
	z-index:0;
	width:100%;
	height:300px;
	background-size:300px;
	background-image:url("/images/halloween/fog.png");
	animation:fog 15s linear infinite;
	transform:translate3d(0, 0, 0);
}

#fog2 {
	position:absolute;
	bottom:0px;
	z-index:0;
	width:100%;
	height:300px;
	background-size:300px;
	background-image:url("/images/halloween/fog2.png");
	animation:fog 30s linear infinite;
	transform:translate3d(0, 0, 0);
}

@media (max-width: 850px) {
	#fog {
		margin-bottom:360px !important;
	}
}

@keyframes fog {
	0% {
		background-position:0px 0px;
	}
	100% {
		background-position:-300px 0px;
	}
}

#pumpkinContainer {
	width:148px;
	height:120px;
	position:absolute;
	margin:0px !important;
	right:132px;
	bottom:0px;
	overflow:hidden;
}

@media (max-width: 850px) {
	#pumpkinContainer {
		display:none !important;
	}
}

#pumpkin {
	position:absolute;
	width:128px;
	height:100px;
	top:20px;
	left:10px;
	background-image:url("/images/halloween/pumpkin.png");
	background-size:128px;
	user-select:none;
	cursor:pointer;
	transition:transform 0.2s;
	animation:pumpkin 3s linear infinite;
}

#pumpkinLight {
	position:absolute;
	width:128px;
	height:100px;
	background-image:url("/images/halloween/pumpkinlight.png");
	background-size:128px;
	animation:pumpkinLight 4s ease-in-out infinite;
}

@keyframes pumpkinLight {
	0% {
		opacity:100%;
		filter:hue-rotate(0deg) brightness(1);
	}
	50% {
		opacity:50%;
		filter:hue-rotate(-40deg) brightness(0.5);
	}
	100% {
		opacity:100%;
		filter:hue-rotate(0deg) brightness(1);
	}
}

#pumpkin:hover {
	transform:scale(1);
}

#pumpkin:active {
	transform:scale(1.1);
	transition:transform 0s;
}

/* ========= */
/* CHRISTMAS */
/* ========= */

#snow {
	position:absolute;
	z-index:0;
	width:100%;
	height:100%;
	background-size:300px;
	background-image:url("/images/christmas/snow.svg");
	animation:snow 60s linear infinite;
	transform:translate3d(0, 0, 0);
}

#snow2 {
	position:absolute;
	z-index:0;
	width:100%;
	height:100%;
	background-size:300px;
	background-image:url("/images/christmas/snow2.svg");
	animation:snow 90s linear infinite;
	transform:translate3d(0, 0, 0);
}

@keyframes snow {
	0% {
		background-position:0px 0px;
	}
	100% {
		background-position:-300px 1200px;
	}
}

#penguinContainer {
	width:128px;
	height:128px;
	position:absolute;
	margin:0px !important;
	right:132px;
	bottom:0px;
	overflow:hidden;
}

@media (max-width: 850px) {
	#penguinContainer {
		display:none !important;
	}
}

#penguin {
	width:128px;
	height:128px;
	background-image:url("/images/christmas/penguin.png");
	background-size:128px;
	user-select:none;
	cursor:pointer;
	transition:transform 0.2s;
}

#penguin:hover {
	transform:translate(0,2px);
}

#penguin:active {
	transform:translate(0,0);
	transition:transform 0s;
}

#explosion {
	width:128px;
	height:128px;
	background-image:url("/images/christmas/explosion.gif");
	background-size:128px;
	user-select:none;
}

/* ======== */
/* 10 YEARS */
/* ======== */

#annivLetterContainer {
	width:100%;
	height:350px;
	left:0px;
	margin-top:-150px;
	position:absolute;
	overflow:hidden;
}

#annivLetterRotate {
	width:100%;
	position:absolute;
	bottom:200px;
}

#annivLetter {
	display:block;
	transition:transform 0.2s, filter 0.2s;
	transform:translate3d(0, 0, 0);
	filter:drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
	position:absolute;
	user-select:none;
	cursor:pointer;
	left:calc(50% - 128px);
}

#annivLetter.interactive:hover {
	transform:translate3d(0, 0, 0) scale(1.01);
	filter:drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
}

#annivLetter.interactive:active {
	transform:translate3d(0, 0, 0) scale(0.99);
}

@media (max-width: 850px) {
	#annivLetter.interactive {
		transform:translate3d(0, 0, 0) !important;
		filter:drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25)) !important;
	}
}

.annivLetterOut {
	margin-top:-105px;
	animation:annivLetterOut 0.3s ease-in-out forwards;
}

.annivLetterIn {
	animation:annivLetterIn 0.3s ease-in-out;
}

@keyframes annivLetterOut {
	0% {
		left:calc(50% - 128px);
	}
	100% {
		left:calc(0% - 304px);
	}
}

@keyframes annivLetterIn {
	0% {
		left:calc(100% + 48px);
	}
	100% {
		left:calc(50% - 128px);
	}
}

#annivContainer {
	background:#B2ACA7;
	padding:12px 24px;
	border-radius:5px;
	font-size:min(20px, 4.5vw);
	margin-top:185px;
	margin-bottom:10px;
	text-shadow:0px 1px 2px rgba(0,0,0,0.3);
	transition:margin-top 0.3s;
}

#annivContainer .rainbow {
	text-shadow:0px 1px 2px rgba(0,0,0,0.3), 0px 0px 2px currentcolor;
}

#annivAuthor {
	text-align:right;
	font-family:"TF2C Secondary";
	font-weight:700;
	font-size:min(25px, 4.5vw);
}

@media (max-width: 850px) {
	#annivAuthor {
		font-weight:550 !important;
	}
}

#annivImage {
	width:400px;
	max-width:100%;
	height:auto;
	margin:0 auto;
	display:block;
}

.annivInventoryContainer {
	font-size:0px;
	width:150px;
	height:150px;
	margin:3px;
	cursor:pointer;
	transition:transform 0.2s, box-shadow 0.2s;
	transform:translate3d(0, 0, 0);
	background:#BFA5A4;
	border-radius:3px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
}

#annivGold {
	background:linear-gradient(133deg, rgba(241,234,131,1) 0%, rgba(136,80,4,1) 60%, rgba(136,80,4,1) 80%, rgba(212,192,96,1) 100%);
	background-size:250% 250%;
	animation:annivGold 8s ease-in-out infinite;
	position:relative;
}

@keyframes annivGold {
	0% {
		background-position:0% 0%;
	}
	50% {
		background-position:50% 100%;
	}
	100% {
		background-position:0% 0%;
	}
}

.annivInventoryContainer:hover {
	transform:translate3d(0, 0, 0) translate(0,-2px);
	box-shadow:0px 5px 5px rgba(0,0,0,0.25);
}

@media (max-width: 850px) {
	.annivInventoryContainer {
		width:calc(33% - 6px) !important;
		height:auto !important;
		aspect-ratio: 1 / 1 !important;
	}
}

.annivInventoryItem {
	width:75%;
	height:auto;
	filter:drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
}

.annivInventoryText {
	position:absolute;
	bottom:3%;
	right:3%;
	font-family:"TF2C Secondary";
	font-size:16px;
	font-weight:700;
	color:#000000;
	text-shadow:0px 1px 2px rgba(0,0,0,0.3);
}

@media (max-width: 850px) {
	.annivInventoryText {
		font-size:3.25vw !important;
		font-weight:550 !important;
	}
}

annivParticle {
	position:absolute;
	left:0;
	top:0;
	border-radius:50%;
	pointer-events:none;
	opacity:0;
}