@import url(https://fonts.cdnfonts.com/css/natural-precision);

#prof-wrap {
	display: flex;
	justify-content: stretch;
	gap: 1rem;
}
#prof-wrap > .prof-ava-hold > .prof-ava {
	background-image: var(--banner-image-no-subject);
	background-size: cover;
	background-position: var(--banner-image-position);
	color: var(--main-nav-txt-color);
	background-repeat: no-repeat;
}
#prof-wrap > .prof-ava-hold {
	display: flex;
	flex-direction: column;
	gap: 0;
}
#prof-wrap > .prof-ava-hold > .prof-ava a {
	color: var(--main-nav-lnk-color);
}
#prof-wrap > .prof-ava-hold > .prof-ava a:hover {
	color: var(--main-nav-lnk-hov-color);
}
#prof-wrap > .prof-ava-hold > .prof-ava a.active {
	font-weight: bold;
}
#prof-wrap > .prof-ava-hold > .prof-ava a.active::before {
	opacity: 0.5;
	padding-right: 0.5rem;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-regular);
	content: '\f06e';
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel {
	background-color: var(--main-nav-bg-color-faded);
	flex-grow: 1;
	backdrop-filter: blur(3px);
}


#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .ooc-stats {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.5rem;
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .ooc-stats > div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: stretch;
	align-items: center;
	gap: 0.25rem;
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .ooc-stats > div > .expander {
	flex-grow: 1;
	height: 1px;
	max-height: 1px;
	overflow: hidden;
	background-color: var(--base-txt-color-muted);
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .ooc-stats > div > span:first-child {
	font-weight: bold;
	text-transform: uppercase;
}

#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .links {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.5rem;
	text-transform: uppercase;
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .links > * {
	border-bottom: 1px solid var(--base-border-color);
	padding-bottom: 0.5rem;
}
#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .ooc-stats, #prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap > .links  {
	padding-top: 1rem;
}

#prof-wrap > .prof-contents > .stats-box {
	background-color: var(--base-bg-color-faded);
	border: 3px double var(--base-lnk-color);
}

#playerhealth {
	accent-color: var(--progress-bar-color);
}



@media (max-width: 699.98px) {
	#prof-wrap {
		flex-direction: column;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .accordion {
		background-color: var(--main-nav-bg-color-muted);
		font-weight: bold;
		text-transform: uppercase;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		gap: 1rem;
		color: var(--main-nav-lnk-color);
		padding: 1rem 2rem;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .accordion > span {
		flex-grow: 1;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap {
		padding: 1rem 2rem;
	}
	#prof-wrap > .page-jump {
		display: none;
	}
}
@media (min-width: 700px) {
	#prof-wrap { 
		flex-direction: row;
	}
	#prof-wrap > .prof-ava-hold {
		flex: 1 1;
		min-width: 300px;
		max-width: 300px;
	}
	#prof-wrap > .prof-contents {
		flex-grow: 1;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava {
		max-height: 100vh;	
		position: sticky;
		top: 0;
		flex-grow: 1;
		display: flex;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .accordion {
		display: none;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .panel {
		max-height: initial;
		overflow: unset;
		display: flex;
		flex-direction: column;
		gap: 0;
		flex-grow: 1;
	}
	#prof-wrap > .prof-ava-hold > .prof-ava > .panel > .pan-wrap {
		padding: 1rem;
        position: sticky;
        top: 55px;
	}
	#prof-wrap > .page-jump {
		order: 5;
	}
	#prof-wrap > .page-jump > div {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	#prof-wrap > .page-jump > div > a {
		padding: 0.5rem;
	}
}