@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:210px;
  background-image:url(https://offtides-rpg.com/images/banners/cultist.png);
width: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-position: 100% 80%;
	height: 40vh;
	text-align: center;
	padding-top: 20vh;
}

#bannerTitle {
    font-family: 'Fleur De Leah', serif;
    font-size: 125px;
    letter-spacing: 10px;
    font-style: italic;
    text-indent: -1250px;
  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 auto;
	padding: 80px 40px 50px 40px;
}

/* Start foot */
#footer .upper {
    background: #111;
  box-shadow: 3px 0px 9px #000;
    color: #dedede;
      font-family: 'playfair display';
}

#footer .upper {
    padding: 20px;
    font-size: 10px;
    overflow: hidden;
    text-transform: uppercase;
}

#footer {
    clear: both;
}

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

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



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

.log-out {
  
  letter-spacing:3px;
  border-bottom:0px solid #000;  
  position: sticky;
}
.log-out a:link, active, visited { 
  font-weight:900 !important;
  color:#987070 !important;
  font-size:13px;
  position: sticky;
  top: 0;
}

.menulink-right a:link, active, visited {
  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;
    overflow: hidden;
    border: 5px solid #181815;
    border-radius: 150px;
    overflow: hidden;
     margin-top:-50px;
     margin-left:10px;
     z-index:999;
  position: sticky;
  top: 0;
 
}

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

.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 {  
  text-align:absolute;
  word-spacing:5px;
  font-size:15px;
  position: sticky;
  top: 0;
}
.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%, .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%, .8);
}

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

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

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

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

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

#character > img {
  max-height: 550px;
  float: right;
  padding-right: auto;
}


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

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

.prof1 {
  text-align:center;
  background-color:hsl(300, 8%, 7%, .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%, .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;
	position: center;
}

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


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

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


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