/*------------------[ Cutom CSS ]--------------------------*/
.add-story{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 600px;
  width: 500px;
  justify-content: space-around;
  
}
.add-story textarea{
  width: 500px;
  height: 300px;
  text-align: left;
}
.herarchyContainer{
  background-image: url(img/herarchy-landscape-bg.png);
  border: 2px solid;
  margin-top: 50px;
  border-radius: 5px;
  height: 400px;
  width: 900px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.herarchyContainer img{
  border:none;
  max-height: 165px;
  margin-top:0px;
}
.sign{
  border-bottom:2px solid var(--chiss);
  width:480px;
}
.sign img{
  opacity: 0.0;
  border:none;
}
div.signLine{
  height:3px;
  width:480px;
  margin:auto;
  background-color:#00c7f8;
  border-radius:10px;
  margin-bottom:30px;
}
.sign img:hover{
  opacity:1;
  cursor:text;
}

.story, .story p{
  color: goldenrod;
}
.stories{
  margin-top:30px;
}
.add-story input#submit{
    height: 60px;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid #33e233;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    color: #33e233;
    transition: color 200ms ease, background-color 200ms ease;
}
.add-story input#submit:hover{
  background-color: #33e233;
  color:rgba(0,0,0,0.75);
  cursor: pointer;
}
.o-r-u{
  margin-top:30px;
}
#sawbones{
  width:165px;
}
#sawbones img{
  width: 100%;
  min-width:165px;
  max-width:480px;

}
h2.join{
  margin-top:40px;
}
h2.join + div + strong + p{
  margin-top:20px;
}
article.rules {
  border: 3px solid;
  padding: 60px 20px 20px 20px;
  border-radius: 10px;
  margin-top: 30px;
  background-color: rgb(0 67 255 / 10%);
}
article.rules h3, article.rules .subtitle{
  text-align: center;
  width: 100%;
}
article.rules ol{
  list-style-type: upper-roman;
}

article.rules ol ul li{
  color:var(--title-scar);
  margin-top:10px;
}
article.rules ol ul li strong{
  color:goldenrod;
}

.submenue-skills .sub-menu {
    border-radius: 5px;
    display: none;
    position: fixed;
    z-index: 4;
    flex-flow: column;
    background-color: black;
    height: 180px;
    justify-content: space-around;
    border: 3px solid;
    box-shadow: 2px 2px 8px 7px #00000078;
}
.submenue-equipment .sub-menu {
    border-radius: 5px;
    display: none;
    position: fixed;
    z-index: 4;
    flex-flow: column;
    background-color: black;
    height: 130px;
    justify-content: space-around;
    border: 3px solid;
    box-shadow: 2px 2px 8px 7px #00000078;
}
.submenue-equipment .sub-menu li, .submenue-skills .sub-menu li{
    border-top: 1px solid;
    border-bottom: 1px solid;
    line-height: 32px;
    padding: 5px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
em, strong{
	color:#ff4b4b;
}

img#ranged, img#armor{
	margin-bottom:20px;
	margin-top: 40px;
}

@media screen and (max-width:600px){
	img{
		max-width:400px;
	}
	.wrapper{
		margin-top:150px;
	}
}