@font-face {
      font-family: BEBAS NUE;
      src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/BebasNeue%20Regular.otf");
}

@font-face {
      font-family: SILKSCREEN;
      src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/slkscr.ttf");
}

@font-face {
      font-family: CENTURY;
      src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217361/CENTURY.TTF");
}

/**OVERRIDES**/

#searchheader > div.srchfield {display:none;}

::selection {
      background: transparent; /* WebKit/Blink Browsers */
}
::-moz-selection {
      background: transparent; /* Gecko Browsers */
}

/**SCROLLBARS**/

::-webkit-scrollbar {
      width: 2px;
      height: 2px;
}
::-webkit-scrollbar-button {
      width: 0px;
      height: 0px;
}
::-webkit-scrollbar-thumb {
      background: #50211d;
      border: 0px none #ffffff;
      border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
      background: #50211d;
}
::-webkit-scrollbar-thumb:active {
      background: #000000;
}
::-webkit-scrollbar-track {
      background: #201a19;
      border: 0px none #ffffff;
      border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
      background: #201a19;
}
::-webkit-scrollbar-track:active {
      background: #333333;
}
::-webkit-scrollbar-corner {
      background: transparent;
}

/**BODY**/

body,
a:hover {
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur826.cur), progress !important;

font-family: SILKSCREEN;
      font-size: 1.2vmin;
      text-transform: uppercase;
      color: #504447;

      overflow:hidden;
}

/**BASE**/

.bg {
      height: 100%;
      width: 100%;
      left: 0px;
      top: 0px;
      position: fixed;
      z-index: 1;

      font-family: SILKSCREEN;
      font-size: 1.2vmin;
      text-transform: uppercase;
      color: #504447;

      background-color: #201a19;
      background-image: URL(
            "background1.jpg"
      );
      background-size: cover;
      background-position: right;
}

.base-right {
      height: 100%;
      width: 54%;
      right: 0px;
      top: 0px;
      position: fixed;
      z-index: 2;
}

/**LINKS**/
links {
      height: 22vmin;
      width: 6vmin;
      left: 80.5vmin;
      top: 41.5vmin;
      margin: 0 auto;
      position: absolute;
      z-index: 999;

      background-color: transparent;
}

/* This thing below makes the boxes on the left for the links, it also allows for them to have pictures and change the overall gradient of those boxes*/
links a {
      height: 20%;
      width: 75%;
      margin-top: 1vmin;
      position: relative;

      display: inline-block;
      border: 1vmin solid #43201c;

      font-size: 1px;
      color: TRANSPARENT;

      position: relative;
      z-index: 2;

      display: inline-block;

      border: 0.7vmin solid #312a2c;

      background-color: #C94F3431;
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
}
/**CONTENT ARRANGEMENT**/

.content-top {
      height: 30%;
      width: 100%;
      left: 0px;
      top: 0px;
      margin-top: 2vmin;
      position: relative;
      z-index: 2;
}

.content-center {
      height: 40%;
      width: 100%;
      left: 0px;
      top: 0px;
      margin-top: 1vmin;
      position: relative;
      z-index: 2;
}

.content-bottom {
      height: 35%;
      width: 100%;
      left: 0px;
      top: 0px;
      margin-top: 1vmin;
      position: relative;
      z-index: 2;
}

/**SUB CONTENT ARRANGEMENT TOP**/

ALLY-DESCRIPTION {
      height: 18%;
      width: 32%;
      left: 0px;
      top: 0px;
      margin-top: 1vmin;
      position: relative;
      z-index: 2;

      padding: 2vmin;
      display: block;

      text-align: justify;
      text-transform: uppercase;
      line-height: 1.4vmin;

      background-color: #1a1514;
}

CHARACTER-IMAGES {
      height: 100%;
      width: 10%;
      left: 36.5%;
      top: 0%;
      margin: 0 auto;
      position: absolute;
      z-index: 2;

      float: right;

      background-color: TRANSPARENT;
}

CI {
      height: 26%;
      width: 84%;
      margin-bottom: 9%;
      z-index: 100;

      display: inline-block;
      border: 0.7vmin solid #312a2c;

      background-color: #321b19;
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
      background-repeat: no-repeat;
}
/* This gives a box for text*/
CHARACTER-BIO {
      height: 87%;
      width: 42%;
      right: 0px;
      top: 0px;
      position: absolute;
      z-index: 2;

      padding: 2vmin;
      display: block;

      text-align: justify;

      background-color: #1a1514;
}
/* This gives an orange title to the top of the History box if you set the text to H3*/
CHARACTER-BIO H3 {
      margin-top: -7.5%;
      margin-bottom: 5%;

      letter-spacing: 0.5vmin;
      font-family: BEBAS NUE;
      font-size: 2.46vmin;
      color: #7b2d28;
}
HEADER-A {
      height: 8vmin;
      width: 30vmin;
      right: 80%;
      top: 10.5vh;
      margin: 0 auto;
      position: absolute;
      z-index: 2;

      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      transform: rotate(90deg);
}

HEADER-B {
      height: 8vmin;
      width: 30vmin;
      right: 76%;
      top: 10vmin;
      margin: 0 auto;
      position: absolute;
      z-index: 2;

      display: block;
      white-space: nowrap;
      overflow: hidden;

      letter-spacing: -0.1vmin;

      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
}
/**SUB CONTENT ARRANGEMENT MIDDLE**/

URL {
      height: auto;
      width: 100%;
      left: 0px;
      top: 0px;
      position: relative;
      z-index: 2;

      display: inline-block;

      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1.1vmin;
      font-family: BEBAS NUE;
      font-size: 4.5vmin;
      color: #7b2d28;

      background-color: #1a1514;
}

CENTER-IMAGE {
      height: 75.4%;
      width: 28%;
      left: 0px;
      top: 4%;
      position: relative;
      z-index: 2;

      display: inline-block;
      border: 0.7vmin solid #312a2c;

      text-align: right;
      text-transform: uppercase;

      background-color: #321b19;
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
}

CENTER-IMAGE-RIGHT {
      height: 31.7%;
      width: 27%;
      left: 36%;
      top: -33%;
      margin: 0 auto;
      position: relative;
      z-index: 2;

      display: inline-block;
      border: 0.7vmin solid #312a2c;

      text-align: right;
      text-transform: uppercase;

      background-color: #321b19;
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
}

WEAPON-INFO {
      height: 30.7%;
      width: 9.5%;
      left: 3%;
      margin-left: 3vmin;
      top: -36%;
      position: relative;
      z-index: 2;

      padding: 2vmin;
      display: inline-block;

      text-align: left;
      text-transform: uppercase;
      color: #504447;

      background-color: #1a1514;
}

WEAPON-IMAGE {
      height: 100%;
      width: 30%;
      left: 70%;
      margin-left: 30%;
      top: -0%;
      position: absolute;
      z-index: 2;

      display: inline-block;
}

LORE {
      height: 26%;
      width: 30%;
      left: 36%;
      top: -34%;
      position: relative;
      z-index: 2;

      padding: 2vmin;
      display: inline-block;

      text-align: justify;
      color: #504447;

      background-color: #1a1514;
}

HEADER-C {
      height: 8vmin;
      width: 32vmin;
      left: 60%;
      top: 10.5vh;
      margin: 0 auto;
      position: absolute;
      z-index: 2;

      display: block;
      white-space: nowrap;
      overflow: hidden;

      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
}

HEADER-D {
      height: 8vmin;
      width: 32vmin;
      left: 67%;
      top: 10.5vh;
      margin: 0 auto;
      position: absolute;
      z-index: 2;

      display: block;
      white-space: nowrap;
      overflow: hidden;

      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
}

dot {
      display: inline-block;
      background-color: #43201c;
      height: 0.5vmin;
      width: 3vmin;
      position: relative;
      top: 0px;
      left: 0px;
      margin-bottom: 0.2vmin;
      margin-left: 1vmin;
      margin-right: 1vmin;
}

/**SUB CONTENT ARRANGEMENT BOTTOM**/

TRIVIA-BLOCK {
      height: 30%;
      width: 33%;
      left: 2140px;
      top: 0px;
      position: absolute;
      z-index: 3;

      padding: 2vmin;
      display: inherit;

      text-align: justify;
      text-transform: uppercase;
      color: #504447;

      background-color: #1a1514;
}

ICON-BOTTOM {
      height: 20%;
      width: 6.5%;
      top: 46%;
      left: -8%;
      margin-right: -9.3%;
      margin-left: 10%;
      position: relative;
      z-index: 2;

      display: inline-block;

      border: 0.7vmin solid #312a2c;

      background-color: #321b19;
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
}

/**FONT AND HEADER STYLES**/

b {
      font-weight: 100;
      color: #9f9490;
      word-spacing: 0vmin;
}

ALLY-DESCRIPTION p,
CHARACTER-BIO p,
WEAPON-INFO p,
LORE p {
      height: 100%;
      margin-top: 0px;

      font-family: SILKSCREEN;
      font-size: 1.2vmin;
      text-transform: uppercase;
      color: #504447;

      line-height: 1.3vmin;
      padding: 0%;
      overflow-y: auto;
      overflow-x: hidden;

      word-spacing: 0vmin;
}

TRIVIA-BLOCK p {
      height: 100%;
      margin-top: 0px;

      font-family: SILKSCREEN;
      font-size: 1.2vmin;
      text-transform: uppercase;
      color: #504447;

      padding: 0%;
      overflow: auto;
}

HEADER-A H1 {
      white-space: nowrap;

      letter-spacing: -0.2vmin;
      font-family: BEBAS NUE;
      font-size: 4vmin;
      color: #7b2d28;
}

HEADER-C H1 {
      white-space: nowrap;

      font-family: BEBAS NUE;
      font-size: 4.06vmin;
      color: #7b2d28;
}

HEADER-B H2 {
      font-family: BEBAS NUE;
      font-size: 2.7vmin;
      color: #7b2d28;
}

HEADER-D H2 {
      font-family: BEBAS NUE;
      font-size: 2.88vmin;
      color: #7b2d28;
}

WEAPON-INFO H1 {
      margin-top: -3.8vmin;
      position: absolute;

      text-align: center;
      letter-spacing: 0.5vmin;
      line-height: 1.7vmin;
      font-family: BEBAS NUE;
      font-size: 2vmin;
      color: #7b2d28;
}

LORE H1 {
      margin-top: -3vmin;
      position: absolute;

      line-height: 1.5vmin;
      letter-spacing: 0.5vmin;
      font-family: BEBAS NUE;
      font-size: 2.4vmin;
      word-spacing: -1vmin;
      color: #7b2d28;
}

TRIVIA-BLOCK H1 {
      left: -1%;
      width: 29vmin;
      margin-top: -4vmin;
      position: absolute;

      text-align: right;
      letter-spacing: 0.5vmin;
      font-family: BEBAS NUE;
      font-size: 3.5vmin;
      color: #7b2d28;
}

ALLY-DESCRIPTION H3 {
      margin-top: -7.5%;
      margin-bottom: 5%;

      letter-spacing: 0.5vmin;
      font-family: BEBAS NUE;
      font-size: 2.46vmin;
      color: #7b2d28;
}

WEAPON-IMAGE IMG {
      width: 100%;
      height: 100%;
      position: absolute;
}

/**TYPOGRAPHY**/

DECORATION-CONTAINER {
      height: 40%;
      width: 80%;
      left: 1%;
      top: -2vmin;
      margin: 0 auto;
      position: absolute;
      z-index: 2;
}

SQUARE {
      height: 80%;
      width: 68%;
      margin-left: -10%;
      margin-top: -25.5vmin;
      margin-bottom: 33vmin;
      position: relative;
      z-index: 2;

      display: inline-block;

      background-color: #1a1514;
}

DECORATION-CONTAINER H1 {
      top: 1.1vmin;
      margin-top: 0px;
      margin-bottom: 0px;
      left: 10vmin;
      position: relative;
      z-index: 3;

      display: block;

      letter-spacing: 1vmin;
      font-family: BEBAS NUE;
      font-size: 2.4vmin;
      font-weight: 0;
      color: #41201c;
}

DECORATION-CONTAINER H2 {
      top: 0.4vmin;
      margin-bottom: 0px;
      margin-top: 0px;
      left: 30vmin;
      position: relative;
      z-index: 3;

      display: block;

      letter-spacing: 0.5vmin;
      font-family: BEBAS NUE;
      font-size: 2.4vmin;
      font-weight: 100;
      color: #9f9490;
}

DECORATION-CONTAINER H3 {
      top: -1.6vmin;
      margin-bottom: 0px;
      margin-top: 0px;
      left: 0vmin;
      position: relative;
      z-index: 3;

      display: block;

      letter-spacing: 0.1vmin;
      font-family: BEBAS NUE;
      font-size: 7vmin;
      font-weight: 100;
      color: #7b2d28;
}

DECORATION-CONTAINER H4 {
      top: -9vmin;
      margin-bottom: 0px;
      margin-top: 0px;
      left: 33vmin;
      position: relative;
      z-index: 3;

      display: block;

      letter-spacing: 1vmin;
      font-family: BEBAS NUE;
      font-size: 12vmin;
      font-weight: 100;
      font-style: italic;
      color: #9f9490;
}

QUOTE-ONE {
      left: 1vmin;
      top: -34vmin;
      position: relative;
      z-index: 20;

      display: inline-block;

      font-family: Trebuchet MS;
      font-size: 15vmin;
      color: #9f9490;
}

QUOTE-TWO {
      left: 56vmin;
      top: -33vmin;
      position: relative;
      z-index: 20;

      display: inline-block;

      font-family: Trebuchet MS;
      font-size: 15vmin;
      color: #7b2d28;
}