html, body
{
    max-width: 100%;
    overflow-x: hidden;
}

body
{
  background-color: black;
  background-repeat: no-repeat;
  font-family: 'Montserrat', sans-serif;
}

nav
{
  color: #eaf0f1;
  height: 70px;
  background-color: rgb(38, 52, 54);
  box-shadow: 0px 0px 8px 8px rgb(38, 52, 54);
}

#scrollingText
{
  white-space: nowrap;
  overflow: hidden;
  color: #eaf0f1;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  width: 98%;
  height: 100%;
  margin: 0;
  text-align: center;
  transform:translateX(100%);
  animation: scrolling 20s linear infinite;
}

#locationText
{
  position: relative;
  right: 10px;
  border-left: 10px solid rgb(38, 52, 54);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  position: relative;
  margin-top: -5px;
}

#gameTitle
{
  text-align: right;
  margin-top: -40px;
}


#coverContainer
{
  padding-top: 5px;
  position: relative;
  margin-top: -25px;
  border-top: 5px solid #eaf0f1;
  border-left: 30px solid #eaf0f1;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 25px;
}

/*Wrapper styleing and positioning*/
#contentWrapper
{
  display: inline-flex;
}

/*leftItemList styling*/
#boxBorder
{
  z-index: 3;
  padding: 0;
  margin: 0;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
  top: 0px;
  left: 18px;
}

#leftItemList
{
  opacity: 90%;
  color: #eaf0f1;
  z-index: 2;
  height: 500px;
  width: 280px;
  border: 4px solid #97a6a8;
  margin-top: 5px;
  border-radius: 10px;
  border-top-left-radius: 35px;
  box-shadow: 0px 0px 5px 2px #505a5d, inset 0px 0px 8px #505a5d;
  background-image: linear-gradient(to bottom right, rgb(58, 150, 119), rgb(12, 12, 33));
}

ul.menuList
{
  font-size: 24px;
  list-style: none;
  margin-top: 8px;
  margin-left: 20px;
}

ul.menuList li
{
  padding-bottom: 20px;
  text-shadow: 1px 2px 2px black;
}

ul.menuList li:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
}

ul.menuList img
{
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  margin-left: -45px;
  margin-bottom: -23px;
  padding-right: 10px;

}

/*mainItemContent styling */
#mainContentWrapper
{
  position: relative;
  top: -18px;
  margin: auto;
  display: block;
}

#boxBorderSmall
{
  z-index: 1;
  padding: 0;
  margin: 0;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 8px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
  top: 12px;
  left: -2px;
}

#boxBorderSmall1
{
  z-index: 1;
  padding: 0;
  position: relative;
  margin-bottom: -14px;
  width: 18px;
  height: 18px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
  top: 0px;
  left: -2px;
}

#boxBorderSmall2
{
  z-index: 1;
  padding: 0;
  margin: 0;
  position: relative;
  margin-bottom: -14px;
  width: 18px;
  height: 18px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
  top: 0px;
  left: -2px;
}

#mainItemContent
{
  z-index: 0;
  position: relative;
  left: -5px;
  margin: 0px;
  height: 155px;
  width: 900px;
  border: 4px solid #97a6a8;
  border-radius: 10px;
  border-top-left-radius: 35px;
  box-shadow: 0px 0px 5px 2px #505a5d, inset 0px 0px 8px #505a5d;
  background-image: linear-gradient(to bottom right, rgb(58, 150, 119),rgb(12, 12, 33));
}

/* Character Sheets styling*/
#characterSheet
{
  position: relative;
  display: inline-flex;
  width: 95%;
  height: 90%;
  margin-left: 30px;
  margin-top: 5px;
  opacity: 1;
}

div.charPic
{
  margin-right: 5px;
  width: 140px;
  height: 99%;
}

img.charImg
{
  position: relative;
  width: 100%;
  height: 100%;
}

div.nameLvl
{
  position: relative;
  width: 40%;
  height: 99%;
}

ul.nameItems
{
  margin: auto;
  margin-left: -43px;
  width: 100%;
  height: 100%;
}

ul.nameItems li
{
  position: relative;
  list-style: none;
  height: 30%;
  width: 100%;
}

ul.nameItems p
{
  font-weight: bold;
}

li.name
{
  color: #eaf0f1;
  font-size: 24px;
  padding-left: 2px;
  text-shadow: 1px 2px 2px black;
}

li.lvl
{
  color: rgb(192, 154, 207);
  font-size: 28px;
  padding-left: 2px;
  text-shadow: 1px 2px 2px black;
}

div.next
{
  display: inline-flex;
  height: 10px;
  width: 60%;
  margin-left: 10px;
  transform: skew(120deg);
  background-image: linear-gradient(to right, rgb(23, 232, 28), rgb(233, 241, 16));
}

div.hp
{
  display: inline-flex;
  height: 10px;
  width: 78%;
  margin-left: 10px;
  transform: skew(120deg);
  background-image: linear-gradient(to right, rgb(232, 83, 23), rgb(240, 249, 10));
}

div.mp
{
  display: inline-flex;
  height: 10px;
  width: 78%;
  margin-left: 10px;
  transform: skew(120deg);
  background-image: linear-gradient(to right, rgb(23, 126, 232), rgb(216, 241, 16));
}

div.HPMP
{
  position: relative;
  width: 50%;
  height: 99%;
}

p.hpText
{
  position: relative;
  bottom: 65px;
  left: 30%;
  z-index: 4;
  color: #eaf0f1;
}

p.mpText
{
  position: relative;
  z-index: 4;
  bottom: 65px;
  left: 30%;
  color: #eaf0f1;
}

p.numLvl
{
  position: relative;
  z-index: 4;
  bottom: 65px;
  left: 94%;
  color: #eaf0f1;
}

p.numNext
{
  position: relative;
  z-index: 4;
  bottom: 65px;
  left: 94%;
  color: #eaf0f1;
}

p.hpTextLast
{
  position: relative;
  bottom: 128px;
  left: 80%;
  z-index: 4;
  color: #eaf0f1;
}

p.mpTextLast
{
  position: relative;
  bottom: 128px;
  left: 80%;
  z-index: 4;
  color: #eaf0f1;
}

#boxBorderSmall3
{
  z-index: 1;
  padding: 0;
  margin: 0;
  position: relative;
  margin-bottom: -14px;
  width: 18px;
  height: 18px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
  top: 0px;
  left: 25px;
}

#createNewCharacter
{
  display: none;
  position: absolute;
  top: 15%;
  left: 35%;
  width: 350px;
  height: 550px;
  border: 4px solid #97a6a8;
  border-radius: 10px;
  border-top-left-radius: 35px;
  box-shadow: 0px 0px 5px 2px #505a5d, inset 0px 0px 8px #505a5d;
  background-image: linear-gradient(to bottom right, rgb(58, 150, 119),rgb(12, 12, 33));
}

/*Decoration element that need to appear and dissapear with the form divs*/
#boxBorderSmall4
{
  display: none;
  z-index: 3;
  position: absolute;
  top: 15%;
  left: 35%;

  width: 18px;
  height: 18px;
  background-color: #97a6a8;
  box-shadow: 0px 0px 5px 2px #505a5d;
  border-radius: 2px;
}

/*Form styling for editing or creating characters*/
form.inputStyles
{
  padding-left: 20px;
}

form.inputStyles input
{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  padding-left: 15px;
  background-color: transparent;
  border: none;
  border-bottom-left-radius: 50px;
  border-left: 2px solid #eaf0f1;
  border-bottom: 2px solid #eaf0f1;
}

form.inputStyles h4
{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  color: #eaf0f1;
  text-shadow: 1px 2px 2px black;
}

#buttonA
{
  color: #eaf0f1;
  position: relative;
  top: 20px;
  left: 20px;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #eaf0f1;
  border-radius: 50px;
}

#buttonA:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 2px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#buttonB
{
  color: #eaf0f1;
  position: relative;
  top: 20px;
  left: 60px;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #eaf0f1;
  border-radius: 50px;
}

#buttonB:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 2px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#buttonC
{
  color: #eaf0f1;
  position: relative;
  top: 20px;
  left: 20px;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #eaf0f1;
  border-radius: 50px;
}

#buttonC:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 2px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#buttonD
{
  color: #eaf0f1;
  position: relative;
  top: 20px;
  left: 60px;
  padding-left: 15px;
  padding-right: 15px;
  border: 2px solid #eaf0f1;
  border-radius: 50px;
}

#buttonD:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 2px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#editCharacter
{
  display: none;
  position: absolute;
  top: 15%;
  left: 35%;
  width: 350px;
  height: 550px;
  border: 4px solid #97a6a8;
  border-radius: 10px;
  border-top-left-radius: 35px;
  box-shadow: 0px 0px 5px 2px #505a5d, inset 0px 0px 8px #505a5d;
  background-image: linear-gradient(to bottom right, rgb(58, 150, 119),rgb(12, 12, 33));
}

/* Bottom contents bar items*/
#bottomContentBar
{
  display: inline-flex;
  z-index: 0;
  margin-left: 20px;
  height: 100px;
  width: 1200px;
  border: 4px solid #97a6a8;
  border-radius: 10px;
  border-top-left-radius: 50px;
  box-shadow: 0px 0px 5px 2px #505a5d, inset 0px 0px 8px #505a5d;
  background-image: linear-gradient(to bottom right, rgb(58, 150, 119), rgb(12, 12, 33));
}

#charNewImg
{
  position: relative;
  padding-left: 20px;
  width: 75px;
  height: 75px;

}

#titleEditMenu
{
  padding-left: 20px;
  font-size: 25px;
  color: #eaf0f1;
  text-shadow: 1px 2px 2px black;
}

#newCharButton
{
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: #eaf0f1;
  border: 3px solid #eaf0f1;
  border-radius: 50px;
  height: 40px;
}

#newCharButton:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 3px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#editCharButton
{
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  padding-left: 20px;
  padding-right: 20px;
  color: #eaf0f1;
  border: 3px solid #eaf0f1;
  border-radius: 50px;
  height: 40px;
}

#editCharButton:hover
{
  color: rgb(231, 223, 47);
  text-decoration: underline;
  cursor: pointer;
  border: 3px solid rgb(231, 223, 47);
  border-radius: 50px;
}

#buttonTitle
{
  position: relative;
  margin-top: 10px;
}

/*Animation*/
@keyframes scrolling
{
 0%   {
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);
 }
 100% {
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%);
 }
}