@import url(https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap);

body {
	background: url(https://i.ibb.co/4gCqL5N/cultistbg.png);
	background-size: cover;
	background-attachment: fixed;
	text-align: justify;
	line-height: 1.4;
	margin: 0;
	font-size: 13px;
	overflow-y: scroll;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}

.banner {
  height: 40vh; /* kept only one height value for clarity */
  background-image: url(https://offtides-rpg.com/images/banners/cultist.png);
  width: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: 100% 80%;
  text-align: center;
  padding-top: 20vh;
}

/* fixed extra spacing, indent, and color issues */
#bannerTitle {
  font-family: 'Fleur De Leah', serif;
  font-size: 125px;
  letter-spacing: 10px;
  font-style: italic;
  /* text-indent: -1250px;  <-- This hides the text - check if intentional */
  color: #fff;
  text-shadow: 5px 5px 2px #000;
  transition: 2s;
  padding-bottom: 45vh !important;
}

.wrapper {
	width: 90%;
	min-width: 970px;
	max-width: 2000px;
	margin: auto;
	padding: 80px 40px 50px 40px;
}

/* Start foot */
#footer .upper {
  background: #111;
  box-shadow: 3px 0px 9px #000;
  color: #dedede;
  font-family: 'playfair display', serif;
  padding: 20px;
  font-size: 10px;
  overflow: hidden;
  text-transform: uppercase;
}

#footer {
	clear: both;
}

select {
	padding: 3px;
	outline: 0;
	font-family: 'EB Garamond', serif;
	font-size: 13px;
}

#footer .upper .theme {
	float: right;
	margin: -1px 0 0 15px;
}

/****** START STICKY NAV *******/

.log-out {
	letter-spacing: 3px;
	border-bottom: 0 solid #000;
	position: sticky;
	top: 0;
	z-index: 1000; /* added for layering */
}

/* Fix selector and grouping */
.log-out a:link,
.log-out a:visited,
.log-out a:active {
	font-weight: 900 !important;
	color: #987070 !important;
	font-size: 13px;
	position: sticky;
	top: 0;
}

.menulink-right a:link,
.menulink-right a:visited,
.menulink-right a:active {
	text-decoration: none;
	font-weight: 900 !important;
	color: #987070 !important;
	font-size: 13px;
	position: sticky;
	top: 0;
}

.menuav {
	width: 125px;
	height: 125px;
	float: left;
	background-image: url(https://images.pexels.com/photos/27067812/pexels-photo-27067812/free-photo-of-howling-wolf-in-winter.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
	background-size: 150%;
	background-position: center;
	border: 5px solid #181815;
	border-radius: 150px;
	margin-top: -50px;
	margin-left: 10px;
	z-index: 999;
	position: sticky;
	top: 0;
	overflow: hidden;
}

.WelcomeUserAv {
	width: 125px;
	height: 125px;
	float: left;
	background-size: 150%;
	background-position: center;
	border: 5px solid #181815;
	border-radius: 150px;
	margin-top: -50px;
	margin-left: 10px;
	z-index: 999;
	position: sticky;
	top: 0;
	overflow: hidden;
}

.user-menubar {
	width: 100%;
	padding-left: 200px;
	background-image: url(https://i.imgur.com/pUoSWQx.png);
	background-color: #fff;
	box-shadow: 0px 0px 10px #000;
	font-size: 10px;
	font-family: 'Playfair Display', serif;
	letter-spacing: 2px;
	color: #f1f1f1;
	text-transform: uppercase;
	z-index: 999;
	position: sticky;
	top: 0;
}

.menulink {
	word-spacing: 5px;
	font-size: 15px;
	position: sticky;
	top: 0;
	text-align: left; /* changed from absolute (invalid) */
}

.menulink-right {
	float: right;
	padding: 10px;
	border-bottom: 1px solid #987070;
	text-align: center;
	border-radius: 10px;
	margin: 5px;
	position: sticky;
	top: 0;
}

.menulink-admin {
	float: right;
	padding: 20px;
	border-bottom: 1px solid #987070;
	text-align: center;
	border-radius: 10px;
	margin: 10px;
	position: sticky;
	top: 0;
}

/***** END USER NAV *****/

/**** START FORUM NAVIGATION *****/

@import url(https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap);

.navigation {
	background-color: hsl(300deg 9.09% 6.47%);
	font-size: 10px;
	padding: 10px 10px 10px 20px;
	letter-spacing: 1px;
	font-style: italic;
	font-family: 'Bodoni Moda', serif;
}

.navigation a {
	text-decoration: none;
	text-transform: uppercase;
	color: #222;
	font-style: normal;
}

/* Start Profile */

.proheader {
	font-style: italic;
	background-color: hsl(280, 13%, 5%, 0.8);
	padding: 20px;
	color: #888;
	font-family: 'Crimson Text', serif;
	letter-spacing: 2px;
	text-align: center;
}

.profilename {
	text-transform: uppercase;
	font-size: 40px;
}

.characterbanner {
	position: relative;
	text-align: center;
	color: white;
}

.prostats {
	width: 100%;
	border-spacing: 25px;
}

.prostats td {
	color: #888;
	font-family: 'Crimson Text', serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 40px;
	background-color: hsl(280, 13%, 5%, 0.8);
}

.profinner {
	background-color: hsl(280, 13%, 5%, 0.7);
	min-height: 200px;
}

.news {
	background: rgba(0, 0, 0, 0.3);
	padding: 10px;
	transition: 0.5s ease;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.ref {
	height: 400px;
	text-align: center;
	background-size: cover;
}

.pro-charhead {
	width: 150px;
	font-family: 'playfair display', serif;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
	font-size: 15px;
	color: #987070;
	padding: 10px 10px 0 10px;
	background-color: hsl(280, 13%, 5%, 0.8);
}

.pro-charinf {
	width: 150px;
	text-align: center;
	letter-spacing: 3px;
	margin-top: 0;
	margin-right: 10px;
	padding: 10px;
	font-style: italic;
	background-color: hsl(300, 8%, 7%, 0.8);
}

.clear {
	clear: both;
}

#character > img {
	max-height: 550px;
	float: right;
	padding-right: auto; /* 'auto' invalid for padding-right, but kept as requested */
}

.pro-header {
	font-family: 'playfair display', serif;
	letter-spacing: 3px;
	text-align: center;
	text-transform: uppercase;
	font-size: 15px;
	color: #987070;
	padding: 0;
	margin-top: 0;
	background-color: hsl(280, 13%, 5%, 0.8);
}

.pro-info {
	text-align: center;
	letter-spacing: 3px;
	padding: 0;
	font-style: italic;
	background-color: hsl(300, 8%, 7%, 0.8);
}

.prof1 {
	text-align: center;
	background-color: hsl(300, 8%, 7%, 0.8);
	padding: 10px;
	font-family: 'Gilda Display', serif;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 10px;
}

.prof2 {
	text-align: center;
	background-color: hsl(300, 8%, 7%, 0.8);
	padding: 8px;
	font-family: 'Gilda Display', serif;
	font-size: 16px;
}

.profileDetailsHealth {
	width: 40%;
}

.profileDetailsHealthbarOuter {
	width: 100%;
	height: 25px;
	border: 1px solid var(--main-text-color);
	background-color: var(--content-box-bg-alt);
	position: relative;
}

.profileDetailsHealthbarInner {
	height: 22px;
	margin-top: 1px;
	text-align: center;
}

.profileDetailsHealthbarText {
	width: 100%;
	color: #000;
	text-align: center; /* replaced 'position: center;' (invalid) */
}

.profileColumnLeftOuter > :first-child {
	border-radius: 10px 10px 0 0;
}

.profileColumnRightOuter {
	flex-grow: 1;
	padding: 20px;
	background-color: var(--content-box-bg);
	border-radius: 10px;
}

.profileAppearanceContainer {
	display: flex;
	width: 100%;
	gap: 0 20px;
}

.profileColumnRightOuterText {
	flex-grow: 2;
	padding-left: 370px;
	background-color: var(--content-box-bg);
	border-radius: 10px;
	height: 500px;
	overflow-y: scroll;
	overflow-x: hidden;
}