Kuma Akuma

#profile-container {
  background: none;
}

body {
background: #f8f7f6;
background-image:url(https://pbs.twimg.com/media/Cu6PWF4WAAA_mFk.jpg);
background-position:fixed;
background-size: 100% 100%;
background-repeat:no-repeat;
}

body,
a:hover {
  cursor: url(http://i.imgur.com/cd7ZHDh.png), progress !important;
}

@font-face {
  font-family: title;
  src: url(https://dl.dropbox.com/s/491im1d1zt0k0ab/ALincolnFont.ttf?dl=0);
}

@font-face {
  font-family: text;
  src: url(https://dl.dropbox.com/s/9tvr20v9if5rdg4/Laila-Medium.ttf?dl=0);
}

.circle {
  z-index: 10;
  position: absolute;
  height: 15px;
  width: 15px;
  background: #f3eef2;
  border: 3px solid #2c1a22;
  border-radius: 100px;
  left: 715px;
  top: 375px;
}

.title1 {
  z-index: 1;
  position: absolute;
  left: 40px;
  font-family: title;
  color: #3170D3;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
  font-size: 50px;
  top: -40px;
}

.title2 {
  z-index: 1;
  position: absolute;
  left: 1100px;
  top: 320px;
  font-family: title;
  color: #690000;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
  font-size: 50px;
  width: 300px;
}

.Pic {
  z-index: 20;
  position: absolute;
  background: url(http://data.whicdn.com/images/44760738/large.jpg) top;
  background-size: 100%;
  width: 205px;
  height: 206px;
  border: 5px solid #3170D3;
  padding: 2px;
  top: 60px;
  left: 40px;
}
.Pic1 {
  z-index: 20;
  position: absolute;
  background: url(https://s-media-cache-ak0.pinimg.com/originals/f5/e1/db/f5e1db5ef8140670cfa6f6468b9f85c7.png) top;
  background-size: 100%;
  width: 205px;
  height: 206px;
  border: 5px solid #2c1a22;
  padding: 2px;
  top: 420px;
  left: 1050px;
}
.stats {
  z-index: 20;
  position: absolute;
  background: #f3eef2;
  width: 205px;
  height: 206px;
  border: 5px solid #3170D3;
  padding: 2px;
  top: 60px;
  left: 40px;
  opacity: 0;
  font-size: 2px;
  -webkit-transition: all .5s ease;
}

.stats:hover {
  opacity: 1;
  -webkit-transition: all .5s ease;
}
.stats1 {
  z-index: 20;
  position: absolute;
  background: #f3eef2;
  width: 205px;
  height: 206px;
  border: 5px solid #690000;
  padding: 2px;
   top: 420px;
  left: 1050px;
  opacity: 0;
  font-size: 2px;
  -webkit-transition: all .5s ease;
}

.stats1:hover {
  opacity: 1;
  -webkit-transition: all .5s ease;
}
.backer {
  z-index: 10;
  position: absolute;
  width: 426px;
  height: 206px;
  border: 5px solid #3170D3;
  background: #2c1a22;
  padding: 2px;
  top: 60px;
  left: 265px;
}
.backer1 {
  z-index: 10;
  position: absolute;
  width: 426px;
  height: 206px;
  border: 5px solid #690000;
  background: #2c1a22;
  padding: 2px;
  top: 420px;
  left: 605px;
}

.square1 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-left: 1px solid #3170D3;
  border-top: 1px solid #3170D3;
  top: 50px;
  left: 30px;
}

.square2 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-right: 1px solid #3170D3;
  border-bottom: 1px solid #3170D3;
  top: 185px;
  left: 610px;
}

.square3 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-left: 1px solid #690000;
  border-top: 1px solid #690000;
  top: 410px;
  left: 600px;
}

.square4 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  border-right: 1px solid #690000;
  border-bottom: 1px solid #690000;
  top: 550px;
  left: 1180px;
}

.tabs {
  position: absolute;
}

.tab label {
  height: 15px;
  background: #3170D3;
  width: 13px;
  position: absolute;
  z-index: 400;
  border: 3px solid #690000;
  -webkit-transition: all .5s ease;
}

.tab label:hover {
  -webkit-transition: all .5s ease;
  background: #ff0000;
}
.tabs1 {
  position: absolute;
  top:-50px;
  left:250px;
}

.tab label1 {
  height: 15px;
  background: #86738b;
  width: 13px;
  position: absolute;
  z-index: 400;
  border: 3px solid #2c1a22;
  -webkit-transition: all .5s ease;
}

.tab label1:hover {
  -webkit-transition: all .5s ease;
  background: #513b43;
}
.content {
  position: absolute;
  top: 65px;
  left: 270px;
  width: 420px;
  height: 200px;
  border: 3px solid #f3eef2;
  background: #f3eef2;
  padding: 2px;
  color: #86738b;
  font-family: text;
  font-size: 14px;
  overflow: auto;
  z-index: 20;
}

.content1 {
  position: absolute;
  top: 425px;
  left: 610px;
  width: 420px;
  height: 200px;
  border: 3px solid #f3eef2;
  background: #f3eef2;
  padding: 2px;
  color: #86738b;
  font-family: text;
  font-size: 14px;
  overflow: auto;
  z-index: 20;
}

[type=radio]:checked ~ label {
  -webkit-transition: all .5s ease;
  background: #0720A5;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 30;
}

.tab [type=radio] {
  display: none;
}

table,
th,
td {
  font-family: text;
  font-size: 12px;
}

td:nth-child(odd) {
  color: #2c1a22;
}

td:nth-child(even) {
  color: #86738b;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #2c1a22;
  -webkit-transition: all .5s ease;
}

a:hover {
  color: #86738b;
  -webkit-transition: all .5s ease;
}

::-webkit-scrollbar {
  width: 2.5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #2c1a22;
}

::-webkit-scrollbar-track {
  background: #f3eef2;
}

hr.style1 {
  padding: 0px;
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(right, #2c1a22, #f3eef2);
  text-align: right;
  width: 400px;
  float: right;
  top: 10px;
  margin: 10px;
}

hr.style1:after {
  content: "About";
  display: inline-block;
  position: relative;
  font-family: title;
  top: -13px;
  right: 30px;
  font-size: 22px;
  padding: 1px;
  background: #f3eef2;
}

hr.style2 {
  padding: 0px;
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(right, #2c1a22, #f3eef2);
  text-align: right;
  width: 400px;
  float: right;
  top: 10px;
  margin: 10px;
}

hr.style2:after {
  content: "The Past";
  display: inline-block;
  position: relative;
  font-family: title;
  top: -13px;
  right: 30px;
  font-size: 22px;
  padding: 1px;
  background: #f3eef2;
}

hr.style3 {
  padding: 0px;
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(right, #2c1a22, #f3eef2);
  text-align: right;
  width: 400px;
  float: right;
  top: 10px;
  margin: 10px;
}

hr.style3:after {
  content: "Relations";
  display: inline-block;
  position: relative;
  font-family: title;
  top: -13px;
  right: 30px;
  font-size: 22px;
  padding: 1px;
  background: #f3eef2;
}

hr.style4 {
  padding: 0px;
  height: 1px;
  border: none;
  background: -webkit-linear-gradient(right, #2c1a22, #f3eef2);
  text-align: right;
  width: 400px;
  float: right;
  top: 10px;
  margin: 10px;
}

hr.style4:after {
  content: "OOC";
  display: inline-block;
  position: relative;
  font-family: title;
  top: -13px;
  right: 30px;
  font-size: 22px;
  padding: 1px;
  background: #f3eef2;
}

img {
  border: 3px solid #2c1a22;
  width: 80px;
  height: 80px;
  float: left;
  margin-right: 5px;
  -webkit-transition: all .5s ease;
}

img:hover {
  border-color: #86738b;
  -webkit-transition: all .5s ease;
}

.Credit {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border-color: #fff;
  border-style: dotted;
  border-width: 2px;
  background: #000;
  -webkit-transition: all 1s ease;
}

.Credit:hover {
  background: #fff;
  border-color: #000;
}
<div class="title1">
 <p>Akuma</p>
</div>
<div class="title2">
 <p>Kuma</p>
</div>

<div class="circle">
 <p> </p>
</div>
<div class="square1">
 <p> </p>
</div>
<div class="square2">
 <p> </p>
</div>
<div class="square3">
 <p> </p>
</div>
<div class="square4">
 <p> </p>
</div>
<div class="Pic">
 <p> </p>
</div>
<div class="Pic1">
 <p> </p>
</div>
<div class="stats">
 <p> </p>
 <p> </p>
 <table border="0" cellspacing="0" width="200">
 <tbody>
 <tr>
 <td style="text-align: right;">Name</td>
 <td style="padding-left: 30px;">Akuma</td>
 </tr>
 <tr>
 <td style="text-align: right;">Age</td>
 <td style="padding-left: 30px;">17</td>
 </tr>
 <tr>
 <td style="text-align: right;">Gender</td>
 <td style="padding-left: 30px;">female</td>
 </tr>
 <tr>
 <td style="text-align: right;">Height</td>
 <td style="padding-left: 30px;">5'7</td>
 </tr>
 <tr>
 <td style="text-align: right;">Weight</td>
 <td style="padding-left: 30px;">150lbs</td>
 </tr>
 <tr>
 <td style="text-align: right;">Sexuality</td>
 <td style="padding-left: 30px;">Straight</td>
 </tr>
 <tr>
 <td style="text-align: right;">Status</td>
 <td style="padding-left: 30px;">Single</td>
 </tr>
 </tbody>
 </table>
</div>
<div class="stats1">
 <p> </p>
 <p> </p>
 <table border="0" cellspacing="0" width="200">
 <tbody>
 <tr>
 <td style="text-align: right;">Name</td>
 <td style="padding-left: 30px;">Kuma</td>
 </tr>
 <tr>
 <td style="text-align: right;">Age</td>
 <td style="padding-left: 30px;">17</td>
 </tr>
 <tr>
 <td style="text-align: right;">Gender</td>
 <td style="padding-left: 30px;">Male</td>
 </tr>
 <tr>
 <td style="text-align: right;">Height</td>
 <td style="padding-left: 30px;">5'7</td>
 </tr>
 <tr>
 <td style="text-align: right;">Weight</td>
 <td style="padding-left: 30px;">150lbs</td>
 </tr>
 <tr>
 <td style="text-align: right;">Sexuality</td>
 <td style="padding-left: 30px;">Here</td>
 </tr>
 <tr>
 <td style="text-align: right;">Status</td>
 <td style="padding-left: 30px;">Here</td>
 </tr>
 <tr>
 <td style="text-align: right;">Theme</td>
 <td style="padding-left: 30px;">Here</td>
 </tr>
 </tbody>
 </table>
</div>
<div class="backer">
 <p> </p>
</div>
<div class="backer1">
 <p> </p>
</div>
<div class="tabs">
 <div class="tab">
 <div class="tab">
 <input id="tab-4" name="tab-group-2" type="radio" />
 <label style="left: 715px; top: 313px;" for="tab-4"> </label>
 <div class="content">
 <hr class="style4" />
 <p>Lorem ipsum dolor sit amet, at hinc exerci usu. Fugit erant adversarium ne mea, ne probo minimum sensibus est, facilis nusquam ius at. Duo fugit saepe sensibus eu. Diam commodo assentior est at, duo epicuri electram democritum at, sit te dicat
 inermis. Ea mei prima novum, te nominavi maluisset ius. Qui iusto dictas laoreet et, meliore fabellas nam ne.</p>
 <p> </p>
 <p>No tale tincidunt expetendis sea, mei ad alterum adversarium conclusionemque, vim et debet mollis apeirian. Omnium commune albucius no per, eos ex sumo salutatus suscipiantur. At vix graeco praesent, duo an stet soleat. Scriptorem consectetuer
 definitionem ut vim, alii tollit qualisque quo cu, pri nulla delectus ad. At ignota nostrud copiosae qui, ne eam modus explicari evertitur. Eum porro commune cotidieque in, sit ex omnis aliquip vivendo, graecis commune referrentur est in. Homero
 laoreet torquatos an sit.</p>
 <p> </p>
 <p>Et aeterno appetere suscipiantur ius, te eum integre argumentum comprehensam, vix laudem melius officiis id. Pri elit qualisque ullamcorper et. Dicat movet detraxit pri te, sea mutat homero vituperatoribus cu. Cu vis meis option tamquam, ei habeo
 accusam mea. Scriptorem theophrastus id nec.</p>
 <p> </p>
 <p>Mei et offendit luptatum, quem graecis duo at, zril labitur sed te. Has te choro impedit, in indoctum sadipscing pri, ex mel repudiare mnesarchum. Te quod luptatum sententiae eos, ius no partem ponderum hendrerit, habeo illud splendide at mei.
 Eam ut quis justo causae. Cu epicuri definitionem eos, cum graece tractatos ut.</p>
 <p> </p>
 <p>Commodo albucius iudicabit an per. Per ne prodesset vulputate. Eam graece expetendis voluptatum an, ne purto conceptam voluptaria per. Summo electram eam te, prima epicuri torquatos eu eam. In tale munere aeterno mel. Te indoctum qualisque vel.</p>
 </div>
 </div>
 <div class="tab">
 <input id="tab-3" name="tab-group-2" type="radio" />
 <label style="left: 715px; top: 343px;" for="tab-3"> </label>
 <div class="content">
 <hr class="style3" />
 <p><img src="http://i.imgur.com/1Ma3sOg.png" alt="" width="200" height="200" /></p>
 <p>Stuff</p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p><img src="http://i.imgur.com/1Ma3sOg.png" alt="" width="200" height="200" /></p>
 <p>Stuff</p>
 </div>
 </div>
 <div class="tab">
 <input id="tab-2" name="tab-group-2" type="radio" />
 <label style="left: 682px; top: 375px;" for="tab-2"> </label>
 <div class="content">
 <hr class="style2" />
 <p>Lorem ipsum dolor sit amet, at hinc exerci usu. Fugit erant adversarium ne mea, ne probo minimum sensibus est, facilis nusquam ius at. Duo fugit saepe sensibus eu. Diam commodo assentior est at, duo epicuri electram democritum at, sit te dicat
 inermis. Ea mei prima novum, te nominavi maluisset ius. Qui iusto dictas laoreet et, meliore fabellas nam ne.</p>
 <p> </p>
 <p>No tale tincidunt expetendis sea, mei ad alterum adversarium conclusionemque, vim et debet mollis apeirian. Omnium commune albucius no per, eos ex sumo salutatus suscipiantur. At vix graeco praesent, duo an stet soleat. Scriptorem consectetuer
 definitionem ut vim, alii tollit qualisque quo cu, pri nulla delectus ad. At ignota nostrud copiosae qui, ne eam modus explicari evertitur. Eum porro commune cotidieque in, sit ex omnis aliquip vivendo, graecis commune referrentur est in. Homero
 laoreet torquatos an sit.</p>
 <p> </p>
 <p>Et aeterno appetere suscipiantur ius, te eum integre argumentum comprehensam, vix laudem melius officiis id. Pri elit qualisque ullamcorper et. Dicat movet detraxit pri te, sea mutat homero vituperatoribus cu. Cu vis meis option tamquam, ei habeo
 accusam mea. Scriptorem theophrastus id nec.</p>
 <p> </p>
 <p>Mei et offendit luptatum, quem graecis duo at, zril labitur sed te. Has te choro impedit, in indoctum sadipscing pri, ex mel repudiare mnesarchum. Te quod luptatum sententiae eos, ius no partem ponderum hendrerit, habeo illud splendide at mei.
 Eam ut quis justo causae. Cu epicuri definitionem eos, cum graece tractatos ut.</p>
 <p> </p>
 <p>Commodo albucius iudicabit an per. Per ne prodesset vulputate. Eam graece expetendis voluptatum an, ne purto conceptam voluptaria per. Summo electram eam te, prima epicuri torquatos eu eam. In tale munere aeterno mel. Te indoctum qualisque vel.</p>
 </div>
 </div>
 <div class="tab">
 <input id="tab-1" checked="checked" name="tab-group-2" type="radio" />
 <label style="left: 652px; top: 375px;" for="tab-1"> </label>
 </div>
 <div class="content">
 <hr class="style1" />
 <p>Lorem ipsum dolor sit amet, at hinc exerci usu. Fugit erant adversarium ne mea, ne probo minimum sensibus est, facilis nusquam ius at. Duo fugit saepe sensibus eu. Diam commodo assentior est at, duo epicuri electram democritum at, sit te dicat inermis.
 Ea mei prima novum, te nominavi maluisset ius. Qui iusto dictas laoreet et, meliore fabellas nam ne.</p>
 <p> </p>
 <p>No tale tincidunt expetendis sea, mei ad alterum adversarium conclusionemque, vim et debet mollis apeirian. Omnium commune albucius no per, eos ex sumo salutatus suscipiantur. At vix graeco praesent, duo an stet soleat. Scriptorem consectetuer definitionem
 ut vim, alii tollit qualisque quo cu, pri nulla delectus ad. At ignota nostrud copiosae qui, ne eam modus explicari evertitur. Eum porro commune cotidieque in, sit ex omnis aliquip vivendo, graecis commune referrentur est in. Homero laoreet torquatos
 an sit.</p>
 <p> </p>
 <p>Et aeterno appetere suscipiantur ius, te eum integre argumentum comprehensam, vix laudem melius officiis id. Pri elit qualisque ullamcorper et. Dicat movet detraxit pri te, sea mutat homero vituperatoribus cu. Cu vis meis option tamquam, ei habeo
 accusam mea. Scriptorem theophrastus id nec.</p>
 <p> </p>
 <p>Mei et offendit luptatum, quem graecis duo at, zril labitur sed te. Has te choro impedit, in indoctum sadipscing pri, ex mel repudiare mnesarchum. Te quod luptatum sententiae eos, ius no partem ponderum hendrerit, habeo illud splendide at mei. Eam
 ut quis justo causae. Cu epicuri definitionem eos, cum graece tractatos ut.</p>
 <p> </p>
 <p>Commodo albucius iudicabit an per. Per ne prodesset vulputate. Eam graece expetendis voluptatum an, ne purto conceptam voluptaria per. Summo electram eam te, prima epicuri torquatos eu eam. In tale munere aeterno mel. Te indoctum qualisque vel.</p>
 </div>
 </div>
 <div class="tab">
 <input id="tab-2" name="tab-group-2" type="radio" />
 <label style="left: 682px; top: 375px;" for="tab-2"> </label>
 <div class="content1">
 <hr class="style1" />
Lets see
</div>

<div class="Credit">
 <p style="text-align: center;"><a target="_blank" href="https://[FILTERED].tumblr.com/" target="_blank">♠</a></p>
</div>