img {
  max-width: 100%;
  height: auto;
}
body {
background-image: url("/wyrmfolk/assets/tilebg.png");
font-family: "courier new";
color: white;
margin: 0;
}

.userbox{
  background-color: #701091;
  position: fixed;
  top: 20px;
  border-style: none;
  border-radius: 0px 15px 15px 0px ;
}

.tinyimg {
  max-width: 100%;
  height: auto;
}

.logbar
{
  background-color: #701091;
  text-align: center;
  border-style: none;
  border-radius: 15px;
  width: 80%;
  margin: auto;
  list-style-type: none;
}
 .loginbar
 {
   background-color: #701091;
   text-align: center;
   border-style: none;
   border-radius: 15px;
   width: 80%;
   margin: auto;
   list-style-type: none;
 }
 .loglink{
   width: 50%;
   float: left;
   margin: auto;
   height: auto;
   position: relative;
   background-color: inherit;
 }
.navbg{
  background-color: #701091;
  text-align: center;
  border-style: none;
  border-radius: 15px;
  width: 80%;
  margin: auto;
  position: relative;
}

.dropnav  {
  list-style-type: none;
  padding-left: 0;
  background-color: #701091;
  text-align: center;
  border-style: none;
  border-radius: 15px;
  position: relative;
}


li a {
  text-align: center;
  text-decoration: none;
  font-family: wyrmfolkregular;
  font-size: 200%;
}

.dropdown {
  margin:auto;
  width: 20%;
  float: left;
  height: auto;
  position: relative;
}

.dropdownLogin {
  margin:auto;
  width: 50%;
  float: left;
  height: auto;
  position: relative;
}

.dropdownStaff {
  margin:auto;
  width: 16%;
  float: left;
  height: auto;
  position: relative;
}

.dropdown .dropbtn .dropdownStaff {
  font-size: 16px;
  color: #701091;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  visibility: hidden;
  display: block;
  position: absolute;
  top: auto;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #701091;
  border-style: none;
  border-radius: 15px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  text-decoration: none;
  text-align: center;
  margin: 0;
  display: block;
}

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

.dropdownStaff:hover .dropdown-content {
  visibility: visible;
  display: block;
}

@font-face {
  font-family: "wyrmfolkregular";
  src: url("/wyrmfolk/assets/wyrmfolkreg.ttf") format("truetype"),
  url("/wyrmfolk/assets/wyrmfolkreg.otf") format("opentype"),
  url("/wyrmfolk/assets/wyrmfolkreg.woff") format("woff");
}
.footer{
  text-align: center;
  width: 60%;
  height: auto;
  margin: 2% auto;
  background-color: #701091;
  border-style: none;
  border-radius: 15px;
}
a:link{
  color: white;
}
a:visited{
  color: lavender;
  opacity: 0.5;
}
a:hover{
  color: #CF7C00;
}
.navheader{
  width: 100%;
  height: auto;
  text-align: center;
}

.logo{
  max-width: 50%;
  height: auto;
  text-align: center;
}
/*headers*/
h1 {
  font-family: wyrmfolkregular;
  color: #CF7C00;
  font-size: 400%;
  max-width: 100%;
  font-weight: normal;
}
h2{
    font-size: 250%;
    font-family: wyrmfolkregular;
  color: #CF7C00;
  font-weight: normal;
}
h3{
  color: white;
  font-weight: bold;
}
h4{
  font-family: wyrmfolkregular;
 color: transparent;
}
p {
  color: white;
  padding: 10px;
}
.nopadding {
    padding: 0px
}
.centerdiv {
text-align: center;
width: 80%;
height: auto;
margin: auto;
margin-top: 2%;
background-color: #400044;
border-style: double;
border-width: thick;
border-color: #CF7C00;
border-radius: 15px;
}
/*Traits*/
.Trait {
    margin: auto;
    margin-top: 10px;
    width: 90%;
    border-style: solid;
    border-width: thick;
    border-radius: 18px;
}


.TraitCommon {
    border-color: white;
}

.TraitCommon th, .TraitCommon td {
    border-color: white;
}


.TraitUncommon, .TraitUncommon th, .TraitUncommon td, .TraitUncommon h3 {
    border-color: Aquamarine;
    color: Aquamarine;
}

.TraitRare, .TraitRare th, .TraitRare td, .TraitRare h3 {
    border-color: Chartreuse;
    color: Chartreuse;
}

.TraitSuperRare, .TraitSuperRare th, .TraitSuperRare td, .TraitSuperRare h3 {
    border-color: Crimson;
    color: Crimson;
}


/*tables*/
table {
    border-collapse: collapse;
}
table, th, td {
  border: 1px solid #CF7C00;
}

/*Rarity span*/
.rarity-Common {
    padding: 5px;
    border-radius: 18px;
    border: 2px solid darkgreen;
    background-color: green;
}

.rarity-Uncommon {
    padding: 5px;
    border-radius: 18px;
    border: 2px solid darkblue;
    background-color: blue;
}

.rarity-Rare {
    padding: 5px;
    border-radius: 18px;
    border: 2px solid darkred;
    background-color: red;
}

.rarity-SuperRare {
    padding: 5px;
    border-radius: 18px;
    border: 2px solid gold;
    background-color: yellow;
    color: Black;
}

.rarity-Special {
    padding: 5px;
    border-radius: 18px;
    border: 2px solid darkblue;
    background-color: purple;
}