?#profile-container {
display: block;
height: 100%;
width: 100%;
padding-bottom: 0px !important;
margin: auto;
overflow: hidden;
}
#profileContainer{
    font-size: 12px;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    position: relative;
    margin: 0 auto;
    height: 100% !important;
    overflow: hidden;
    color: #ccc;
    width: 100% !important;
}

#scroller {
    padding: .1px .1px;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden !important;
}
.contain {
position: relative;
width: 100%;
height: 100%;
background: url(https://www.transparenttextures.com/patterns/always-grey.png);

}

@font-face {
font-family: basic; 
src:url(https://dl.dropboxusercontent.com/u/62876172/basictitlefont.ttf);
}
@font-face {
font-family: at;
src: url(https://dl.dropbox.com/s/ps0akfxgnxt6ekw/Peinture%20Fraiche.ttf);
}
a:link, a:visited, a:active{
color: inherit;
text-decoration: none;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.links {
display: inline-block;
position: relative;
}
.links:after {
display: block;
content: "";
margin: auto;
margin-top: -6px;
width: 0;
background: transparent;
border-bottom: 1px solid transparent;
-moz-transition: 0.5s; 
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.links:hover:after {
width: 100%;
border-bottom: 1px solid #FE535A;
}
#profile-container {
width: 100%;
height: 100%;
background: #333;
overflow: hidden;
}

#bar {
position: absolute;
left: -1px;
top: 210px;
width: 101%;
height: 200px;
background-image: url(http://i.imgur.com/cnVfjf8.png);
}
#pic {
position: fixed;
right: -140px; top: 0;
height: 100%; width: 500px;
background: url(holder) bottom left no-repeat;
background-size: 75%;
z-index: 1;
}
#box {
position: absolute;
top: 140px; left: 0;
width: 450px; height: 300px;
background: url(http://i.imgur.com/cnVfjf8.png);
}
.box {
position: absolute;
top: 10px; left: 10px;
width: 430px; height: 280px;
background: rgba(255,255,255,.8);
}
.boxx {
position: absolute;
top: 10px; left: 10px;
width: 410px; height: 260px;
}
/*RULEZZZ*/
.rules {
position: relative;
top: 5px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
color: #000;
letter-spacing: -.5px;
line-height: 8px;
display: none;
}
.ybut {
position: relative;
top: 12px;
margin: 0 auto;
width: 100px; 
text-align: center;
border: 1px solid #000;
font-family: basic;
color: #000;
font-size: 30px;
padding-top: 13px;
padding-bottom: 5px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.ybut:hover {
color: #fff;
box-shadow: inset 100px 0 #000;
}
h1 {
font-family: basic;
font-weight: 100;
font-size: 50px;
text-align: center;
letter-spacing: -2px;
padding: 10px 0;
margin-top: 25px;
margin-bottom: 10px;
}
/*YES*/
.pic {
position: absolute;
top: 0; left: 0;
height: 258px; width: 100px;
background: url(https://i.imgur.com/qEp8Flu.png) 50% 30%;
background-size: 250%;
border: 1px solid #d40003;
}
.name {
position: absolute;
bottom: -11px; right: 15px;
font-family: at;
color: #d40003;
font-size: 70px;
letter-spacing: -2px;
}
.boxxx {
position: absolute;
top: 0; right: 0;
width: 296px; height: 200px;
border: 1px solid #d40003;
}
.stat {
position: absolute;
top: 8%; left: 1%;
height: 60%; width: 98%;
}

table {
width: 100%; height: 100px;
border-spacing: 9px;
}
td {
width: 25%;
font-family: calibri;
color: #000;
font-size: 12px;
text-align: center;
}
.bold {
font-family: courier;
font-size: 10px;
padding-top: 1px;
color: #720000;
text-transform: uppercase;
text-align: center;
}
.trivia, .bio, .bro {
position: absolute;
top: 5%; left: 5%;
width: 90%; height: 90%;
font-family: calibri;
color: #000;
font-size: 12px;
line-height: 12px;
text-align: justify;
overflow: auto;
display: none;
}
.buttbox {
position: absolute;
bottom: 0; right: 205px;
height: 50px; width: 93px;
}
.one, .two, .three, .four {
position: relative;
top: 0px; left: -1px;
float: left;
margin-right: 1px;
height: 48px; width: 17.0px;
border: 2px solid #d40003;
}
.one {
background: #720000;
}
.two {
background: #AC0000;
}
.three {
background: #FE5359;
}
.four {
background: #FEBDBB;
}
#char1 {
  position: absolute;
  top: 0px;
  left: 100px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/NhvwSVU.png);
  background-position: 9px -1px;
  background-size: 75%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}
#char2 {
  position: absolute;
  top: 0px;
  left: 192px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/zTBWSlI.gif);
  background-position: 8px 0px;
  background-size: 75%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}
#char3 {
  position: absolute;
  top: 0px;
  left: 284px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/hcS1y73.png?1);
  background-position: 9px 0px;
  background-size: 70%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}
#char4 {
  position: absolute;
  top: 100px;
  left: 100px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/fNCsTwA.png);
  background-position: -5px 0px;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}
#char5 {
  position: absolute;
  top: 100px;
  left: 192px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/YoxxPvc.gif);
  background-position: 4px 1px;
  background-size: 93%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}
#char6 {
  position: absolute;
  top: 100px;
  left: 284px;
  height: 80px;
  width: 80px;
  background: url(https://i.imgur.com/sT8t9lg.gif);
  background-position: 8px -1px;
  background-size: 70%;
  background-repeat: no-repeat;
  border-radius: 100px 100px 100px 100px;
  border: 2px solid #d40003;
  z-index: 20;
}