/* ================================ */
/* ANCHORS                          */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

.anchor {
	cursor:pointer;
	color:#191716;
	text-decoration:none;
}

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

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

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

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

/* ================================ */
/* ABOUT                            */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

#aboutSlideshow {
	position:relative;
	margin:0px auto 16px;
	border-radius:5px;
	width:800px;
	overflow:hidden;
}

@media (max-width: 1000px) {
	#aboutSlideshow {
		width:100% !important;
	}
}

.cycle-slideshow {
	z-index:0;
	overflow:hidden;
}

.cycle-slideshow, .cycle-slideshow img {
	display:block;
	width:100%;
}

.cycle-slideshow img:not(:first-child) {
	display:none;
}

.controls {
	position:absolute;
	top:calc(50% - 25px);
	opacity:0.5;
	cursor:pointer;
	width:50px;
	height:50px;
}

.controls:hover	{
	opacity:1;
}

.controls.prev {
	left:15px;
	background:url("/images/icons/previous.png");
}

.controls.next {
	right:15px;
	background:url("/images/icons/next.png");
}

/* ================================ */
/* ERROR                            */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

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

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

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

.blogPost {
	margin-bottom:8px;
}

.blogPost a {
	display:flex;
	align-items:center;
	gap:8px;
	box-shadow:0px 2px 5px rgba(0,0,0,0.1);
	border-radius:5px;
	background:#A69A92;
	padding:8px;
	color:#000000;
	text-decoration:none;
}

@media (max-width: 1000px) {
	.blogPost a {
		flex-direction:column !important;
		align-items:unset !important;
	}
}

.blogPost a:hover {
	background:#B3A9A2;
}

.blogPost img {
	border-radius:3px;
	width:225px;
}

@media (max-width: 1000px) {
	.blogPost img {
		width:100% !important;
	}
}

.blogPostContent {
	display:flex;
	flex-direction:column;
	gap:4px;
	font-size:14px;
}

.blogPostTitle {
	color:#191716;
	font-weight:bold;
	font-size:18px;
}

.blogPostDate {
	color:#4D3C43;
	font-weight:bold;
	font-size:11px;
}

/* ================================ */
/* BLOG NAV                         */
/* ================================ */

#blogNav {
	display:flex;
	margin-top:12px;
	border-top:2px solid #8A7D78;
	padding-top:8px;
	font-weight:bold;
	font-size:14px;
}

.blogNavHidden {
	visibility:hidden;
}

#blogNav>* {
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
}

@media (max-width: 1000px) {
	#blogNav>* {
		flex-direction:column !important;
	}
}

#blogNav>* a {
	display:flex;
	align-items:center;
	gap:8px;
	color:#B35221;
	text-decoration:none;
	white-space:nowrap;
}

#blogNav>* a:hover {
	text-decoration:underline;
}

#blogNavPage, #blogNavBack {
	justify-content:center;
}

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

@media (max-width: 1000px) {
	#blogNavPrev {
		flex-direction:column-reverse !important;
		align-items:start !important;
	}
}

@media (max-width: 1000px) {
	#blogNavNext {
		flex-direction:column !important;
		align-items:end !important;
	}
}

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

/* ================================ */
/* HISTORY                          */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

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

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

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

#historyTree:after {
	display:block;
	position:absolute;
	top:100%;
	bottom:-32px;
	left:50%;
	z-index:-1;
	margin-left:-2px;
	background:linear-gradient(transparent 50%, #3B352D 50%), #C4B9AE;
	background-size:8px 8px;
	width:4px;
	content:"";
}

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

.historyCheckered {
	position:relative;
}

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

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

.historyPatch {
	position:relative;
	padding:20px 40px 20px 0px;
	width:50%;
}

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

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

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

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

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

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

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

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

.historyTitle {
	display:inline-block;
	font-weight:bold;
}

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

.historyContent a:hover {
	text-decoration:underline;
}

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

.historyMajor img {
	background:#5B5248;
	width:100%;
}

.historyMajor .imageLink {
	position:relative;
	border-radius:5px;
	overflow:hidden;
}

.historyMajor .imageLink:hover:before {
	position:absolute;
	inset:0;
	background:rgba(255,255,255,0.15);
	content:"";
}

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

/* ================================ */
/* ARCHIVE                          */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

.archiveCluster {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:8px;
}

.archiveCluster * {
	flex:1 1 30%;
}

@media (max-width: 850px) {
	.archiveCluster * {
		flex:1 1 100% !important;
	}
}

/* ================================ */
/* CREDITS                          */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

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

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

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

.teamMember:hover {
	transform:rotate(-2deg);
	z-index:1;
	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;
		padding:0 10px !important;
		width:30px !important;
		height:100% !important;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

h1 .teamMedal {
	margin-top:unset !important;
	margin-right:unset !important;
}

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

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

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

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

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

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

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

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

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

/* ================================ */
/* MEDIA                            */
/* ================================ */
/* TODO CLEANUP                     */
/* ================================ */

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

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

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

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

#modal {
	position:fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	z-index:10;
	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;
	background:rgba(0,0,0,0.5);
}

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

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

@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%);
	cursor:auto;
	margin-bottom:20px;
	border-radius:5px;
	background:rgba(0,0,0,0.5);
	padding:10px;
	width:max-content;
	max-width:80vw;
	color:#FFFFFF;
	font-size:min(30px, 5vw);
	text-align:center;
}

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