html{
  height:100%;
}

body {
  background-color:#000;
  color:#ddd;
  font-family:'Ovo', serif;
  height:100%;
  margin:0;
  font-size:20px;
}

.header{
  border: 0px 0px 1px 0px #ccc solid;
  height:80px;
  display: flex;
  justify-content:space-between;
}

.main{
  margin: 0px auto;
  max-width:1000px;
  line-height:1.4em;
}


@media screen and (max-width: 1160px) {
  .main{
    margin:0px 80px;
  }
}

.title{
  margin-left:10px;
  font-size:30pt;
  font-weight:bold;
  line-height:0.8em;
}

@media only screen and (min-width: 690px) {
  .title{
    margin-left:10px;
    font-size:32pt;
    font-weight:bold;
    line-height:1.2em;
  }
}

@media only screen and (min-width: 880px) {
  .title{
    margin-left:10px;
    font-size:48pt;
    font-weight:bold;
    line-height:1.2em;
  }
}

@media only screen and (min-width: 1000px) {
  .title{
    margin-left:120px;
    font-size:48pt;
    font-weight:bold;
    line-height:1.2em;
  }
}

.mobs, .npcs{
  position:fixed;
  width:80px;
  transition: 0.5s ease;
}

.mobs{
  left:0px;
  top:80px;


}

.npcs{
  right:0px;
  top:80px;
}

.mobhead, .npchead{
  height:50px;
  font-size:42px;
  padding:10px;
  display:flex;
}

.mobhead{
  background-color:#ff2424;
  justify-content: flex-start;
  align-items:flex-start;
}

.npchead{
  background-color:rgb(0,0,202);
  justify-content:flex-end;
  align-items:flex-end;
}

.headicon, .headtext{
}

.headtext{
  max-width:0;
  overflow:hidden;
  transition: 0.5s ease;
}

.mobhead .headtext{
  padding-right:0px;
}

.mobbody, .npcbody{
  height:0;
  overflow: hidden;
  transition:ease 0.5s;
}

.mobbody{
  background-color:rgba(255,36,36,0.2);
}

.npcbody{
  background-color:rgba(0,0,202,0.2);

}

.desctop{
  display:flex;
  align-items:center;
}

.hp, .ap, .Race, .atk{
  flex:auto;
}

.statadjuster{
  background-color:#FFF;
  border-radius:12px;
}

.statadjuster a{
  background-color:#DDF;
  text-decoration:none;
  font-weight:bold;
  padding: 0 5px;
}

.npcdesc .statadjuster{
  color:#004;
  border: 2px solid #00B;
}

.npcdesc .statadjuster a{
  background-color:#DDF;
}

.mobdesc .statadjuster {
  border: 2px solid #B00;
  color:#400;
}

.mobdesc .statadjuster a{
  background-color:#FDD;
}

.statadjuster a:nth-child(1){
  border-radius: 12px 0px 0px 12px;
}

.statadjuster a:last-child{
  border-radius: 0px 12px 12px 0px;
}

.npcname, .mobname{
  padding:4px;

  font-family: 'Alegreya Sans SC', sans-serif;
}

.npcname{
  background-color:#117;
}

.mobname{
  background-color:#711;
}

.npcdesc{
  margin:0px 8px 0px 8px;
  background-color:#bbd;
  color:#003;
  max-height:0px;
  overflow:hidden;
  transition: ease 0.5s;
  font-size:18px;
}

.mobdesc{
  margin:0px 8px 0px 8px;
  background-color:#dbb;
  color:#300;
  max-height:0px;
  overflow:hidden;
  transition: ease 0.5s;
  font-size:18px;

}

b{
  font-weight:900;
}

.description b{
  font-family: 'Alegreya Sans SC', sans-serif;
}

.abilities a, .abilities a:visited{
  color:rgb(0,0,202);
  text-decoration:none;
}

.abilities a:hover{
  color:#000;
}

.abilityCard{
  background-color:#000;
  border: 4px solid #FFF;
  padding:4px;
  position:fixed;
  right:50%;
  top:25%;
  border-radius:15px;
  width:250px;
  touch-action:none;
}

.abilityName{
  width:100%;
  text-align:center;

  font-family: 'Alegreya Sans SC', sans-serif;
}
.abilityCardInner{
  background-color:#FFF;
  color:#000;
  border-radius:12px;
  padding:4px;
  overflow:hidden;
  font-size:14px;
}

.apBoxOuter{

}
.apBox{
  background-color:#000;
  color:#fff;
  height:17px;
  padding-left:5px;
  padding-right:3px;
  display:inline-block;
  float:left;
}
.apBoxPoint{
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #000;
  float:left;
  margin-right:8px;
}

.apCardControls{
  position:absolute;
  top:3px;
  right:8px;

}

.apCardShrink{
  color:#FFF;
  cursor:pointer;
  float:right;
  display:inline-block;
  padding:0px 2px;
}

.apCardClose{
  color:#FFF;
  cursor:pointer;
  float:right;
  display:inline-block;
  padding: 0px 2px;
}

code {
  background-color:#000;
  padding:2px;
  color:#fff;
}

blockquote {
  font-size:24px;
}

h1, h2, h3, h4, h5, h6, h7, h8, h9{
  font-family: 'Alegreya Sans SC', sans-serif;

}

.language-secret, .language-trial{
  background-color:#0b0b0b;
  border-top: 9px double #ec2027;
  border-bottom: 9px double #ec2027;
  display:inline-block;
  padding:20px 10px;
  font-family: Ovo, serif;
  position:relative;
  white-space: pre-wrap;
}

.language-secret:before, .language-trial:before{
  background-color:#0b0b0b;
  padding: 0px 10px;
  font-family: 'Alegreya Sans SC', sans-serif;
  color:#ec2027;
  font-weight:500;
  letter-spacing:.1em;
  top:-12px;
  left:40px;
  position:absolute;
  text-transform:lowercase;
}

.language-secret:before{
  content: "Secret Context:";
}

.language-trial:before{
  content: "Trial:";
}

.language-context{
    background-color:#0a000d;
  border-top: 3px solid #f01fff;
  border-bottom: 3px solid #f01fff;
  display:inline-block;
  padding:20px 10px;
  font-family: Ovo, serif;
  position:relative;
  white-space: pre-wrap;
}

.language-context:before{
  background-color:#0a000d;
  padding: 0px 10px;
  font-family: 'Alegreya Sans SC', sans-serif;
  color:#f01fff;
  font-weight:500;
  letter-spacing:.1em;
  top:-12px;
  left:40px;
  position:absolute;
  text-transform:lowercase;
}

.language-context:before{
  content: "Context:";
}

.language-descriptive{
  border-top: 2px dotted #fff;
  border-bottom: 2px dotted #fff;
  padding:20px 10px;
  font-size:1.1em;
  line-height:1.4em;
  font-weight:bold;
  position:relative;
  display:inline-block;
  font-family: Ovo, serif;
}

.language-descriptive:before{
  background-color:#000;
  padding: 0px 10px;
  font-family: 'Alegreya Sans SC', sans-serif;
  color:#fff;
  font-weight:500;
  letter-spacing:.1em;
  top:-12px;
  left:40px;
  position:absolute;
  text-transform:lowercase;
}

.language-descriptive:before{
  content: "Descriptive:";
}

blockquote blockquote{
  font-family: 'Alegreya Sans SC', sans-serif;
  padding:0px;
  border:none;
  font-size:0.8em;
}

.contentWrapper{
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  flex-direction:column;
}

.Race, .atk{
  flex:1;
}

.mobList, .npcList, .campList{
  width:60%
}
b{
  font-weight:900;
}

.mobListHead{
  background-color:#ec2027;
  padding: 8px 16px;
  font-size:1.3em;
  font-family: 'Alegreya Sans SC', sans-serif;
  position:relative;
}

.mobList a, .campList a, .npcList a{
  color:#fff;
  text-decoration:none;
}

.mobList a:hover{
  color:  #ec2027;
}

.campList a:hover{
  color:  #999;
}

.npcList a:hover{
  color:  #00f;
}

.campListHead{
  background-color:#0b0b0b;
  padding: 8px 16px;
  font-size:1.3em;
  font-family: 'Alegreya Sans SC', sans-serif;

  position:relative;
}

.npcListHead{
  background-color:#00f;
  padding: 8px 16px;
  font-size:1.3em;
  font-family: 'Alegreya Sans SC', sans-serif;

  position:relative;
}

.npcListHead .addBtn, .mobListHead .addBtn, .campListHead .addBtn{
  position: absolute;
  right: 10px;
  top: -18px;
  float:none;
  font-size:23px;
}

.fauxbutton{
  display:inline-block;
  float:right;
  background-color:#555;
  color:#fff;
}

.fauxbutton:hover{
  background-color:#888;
}

.statsHolder{
  display:flex;
  align-items:flex-start;
  align-content:center;
  justify-content:space-between;
}

.stat{
}

.smallInput{
  width:5em;
}

.largeInput{
  width:100%;
  height:10em;
}

.success{
  border:1px solid darkgreen;
  background-color: lightgreen;
  color: darkgreen;
  padding:20px;
  font-family: 'Alegreya Sans SC', sans-serif;
  margin:10px auto;
}

.failure{
  border:1px solid darkred;
  background-color: lightred;
  color: darkred;
  padding:20px;
  font-family: 'Alegreya Sans SC', sans-serif;
  margin:10px auto;
}

label{
  font-family: 'Alegreya Sans SC', sans-serif;

}

.chip {
  background-color:#444;
  border-radius:15px;
  padding:2px 4px;
}

.chip a{
  background-color:#222;
  border-radius:12px;
  padding: 0px 5px;
  text-decoration:none;
  color:#fff;
  font-family: 'Alegreya Sans SC', sans-serif;
}

input[type=text]{
  border:0;
  border-bottom:2px solid #aaa;
  background-color:transparent;
  color:#fff;
  margin-bottom:6px;
  padding:2px;
}

input[type="text"]:focus {
    border-bottom: 2px solid white;
}

.fullWidth{
  flex:2;
}

.fullWidthLabel{
  margin-top:2px;
}

textarea{
  border: 2px solid white;
  border-radius:8px;
  background-color:transparent;
  color:#fff;
  padding: 4px;
}

#chipholder{
  display:flex;
}

.scenetext{
  width:100%;

}

.scenetop{
  display:flex;
  justify-content:space-between;
}

.editBtn, .addBtn{
  display: block;
    font-size: 1.05em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background-color: green;
    padding: 4px 8px;
    border-radius: 4px;
}

.editBtn:hover, .addBtn:hover{
  background-image: linear-gradient(lightgreen,green);
  color:#fff !important;
}

.addBtn{
  float:right;
}

.delBtn{
  display: block;
    font-size: 1.05em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    background-color: red;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left:8px;
    border:none;
    color:#fff;
}

.delBtn:hover{
  background-image: linear-gradient(pink,red);
  color:#fff !important;
}

.delBtn{
  float:right;
}

.contextBtns{
  display:flex;
}

.dropbtn {

}

.dropdown {
  position: relative;
  display: inline-block;
  font-size:16px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000;
  min-width: 160px;
  border: rgba(255,255,255,0.5) 1px solid;
  box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #eee;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.avatar{
  width:60px;
  height:60px;
  border-radius:30px;
  margin-right:120px;
}

.dropdown-content a:hover {background-color: #222;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn { }

.accountLinked{
  color: green;
  background-color:darkgreen;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.loginContainer{
  height:70%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.login{
  background-color: #333;
  padding: 10px 20px;
  font-size:1.5em;
}

.login a{
  color: #eee;
  text-decoration: none;
}

.login:hover{
  background-color:#555;
}

.loginholder{
  box-shadow:0px 0px 5px rgba(80,80,80,0.7);
}

.breadcrumbs{
  display:flex;
  justify-content:flex-start;
  padding-left:115px;
}

.breadcrumb a{
  color:#ddd;
  text-decoration:none;
  padding-left:10px;
  padding-right:10px;
}

.breadcrumb a:hover{
  color:#fff;
}

.separator{
  color:#666;
}

.cookieNotice{
  background-color:#211;
  padding:10px 20px;
  width:80%;
  margin:0 auto;
}
.discord:hover{
  background-color:#7289da !important;
}

.facebook:hover{
  background-color:#4267b2 !important;
}

.google:hover{
  background-color:#1a73e8 !important;
}

.float-right{
  display:flex;
  align-items: center;
}

.menu a{
  text-decoration:none;
}

.menuItem{
  color:#ccc;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-right:16px;
}

.menuItem:hover{
  color:#fff;
}

.menuIcon{
  font-size:2em;
}

.menuText{

}

.pageReference{
  font-family: Alegreya Sans SC;
  text-align: center;
  display: block;
}

.statBlock{
  padding: 25px;
  border: #2e2e2e solid 5px;
  width: 60%;
  margin: 0 auto;
  max-width: 400px;
}

.statBlockHeader{
  font-family: Alegreya Sans SC;
  color: #ec2027;
  text-transform: lowercase;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  font-size: 20px;
  text-align: center;
}

.sceneHeading{
  display: inline-block;
  background-color: #fff;
  text-align: center;
  padding: 5px 15px;
  font-family: Alegreya Sans SC;
  text-transform: lowercase;
  word-spacing: .2em;
  font-weight: 700;
  font-size: 20px;
  color: #000;
}

.deleteItem{
  background-color:transparent;
  border:none;
  color:#ec2027;
}

.errorNum{
    margin: 20% auto 20px auto;
    font-family: Alegreya Sans SC;
    font-weight: 700;
    font-size: 48pt;
    width: 100px;
}

.errorText{
  width: 400px;
  margin: 0 auto;
}
.editLink i{
  color:green;
  font-size:0.8em;
}

.editLink i:hover{
  color:palegreen;
}

.deleteMe{
  padding:8px;

}

.deleteMe:hover{
  background-color:darkred;
}

li{
  padding: 6px 0;
}