Saitama -- COMPLETE -- 8.14.18

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Frijole');
@import url('https://fonts.googleapis.com/css?family=Yesteryear');

:selection {color: grey; background-color:none;}
::-moz-selection {color: #ce938f; background-color:grey;}

::-webkit-scrollbar { width: 5px; height:0px; }
::-webkit-scrollbar-thumb:vertical {
background-color: #BDBDBD; border: none; }

body {
background: #cccccc;
background-image: url('https://i.imgur.com/NliM1km.png');
background-size: 100% 100%;
background-attatchment: fixed;
background-repeat: repeat;
overflow-x:hidden;
cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), progress !important;}

b, strong { color: #b28e40;}
i, strong { color: ;}

a:active, a:link, a:visited {
color: #4c3d1b;
text-decoration: none;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress; }

a:hover {
color: #8499A0;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
cursor: url('http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png'), progress; }

a.tab:active, a.tab:link, a.tab:visited {
background-color: #e5b752;
border: none;
border-radius: 0px;
display: inline-block;
height: 30px;
text-decoration: none;
margin-left: 15px;
width: 45px;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
z-index: 9999;}

a.tab:hover {
background-color: #b28e40;
border:none;
z-index: 9999; }

#main-bg {
position: fixed;
top: 125px;
left: 200px;
height: 400px;
width: 940px;
padding: 10px;
background-color: #ffcc5c;
background-image: url('http://i.picpar.com/Xb3c.png');
background-size: 40% 40%;
border: solid 4px #fff;
z-index: -1; }

#saitama {
position: fixed;
top: 104px;
left: 900px;
width: 350px;
height: 500px;
background-image: url('http://i.picpar.com/SDSc.png');
background-repeat: no-repeat;
background-position: fixed;
background-size: contain;
z-index: 1; }

#line-top {
position: fixed;
top: 145px;
left: 200px;
height: 45px;
width: 945px;
border: none;
padding: 10px;
background-color: #FFF;
overflow: auto;
z-index: -1; }

#triangle-topleft {
position: fixed;
top: 95px;
left: 170px;
width: 0;
height: 0;
border-top: 100px solid #bf0000;
border-right: 100px solid transparent;
z-index: 99;}

#triangle-bottomright {
position: fixed;
top: 480px;
left: 1095px;
width: 0;
height: 0;
border-bottom: 100px solid #bf0000;
border-left: 100px solid transparent;
z-index: 99; }

#line-bottom {
position: fixed;
top: 564px;
left: 180px;
height: 10px;
width: 924px;
border: none;
padding: 3px;
background-color: #bf0000;
overflow: auto;
z-index: -1; }

#line-side {
position: fixed;
top: 175px;
left: 170px;
height: 399px;
width: 10px;
border: none;
padding: 3px;
background-color: #bf0000;
overflow: auto;
z-index: -1; }

#title {
position: fixed;
left: 240px;
top: 146px;
background: transparent;
font-family: 'Frijole', cursive;
font-size: 55px;
background: url(https://media.giphy.com/media/5CaIjyS0X8ZBC/giphy.gif);
background-position: center center;
background-size: auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
text-align: center;
letter-spacing: 1px;
-webkit-transition: opacity 2s linear;
-webkit-transition: all 2s ease-in-out;
opacity: 1;
z-inde: 999; }

#dossier {
position: fixed;
left: 213px;
top: 220px;
border: none;
height: 225px;
width: 375px;
font-family:calibri;
text-transform:uppercase;
background-color: #bf0000;
overflow: hidden;
font-size: 12px;
color: #FFF;
text-align: left;
line-height: 12px;
padding:5px;
z-index: 5; }

#disclaimer {
position: fixed;
left: 610px;
top: 220px;
border: none;
height: 225px;
width: 345px;
font-family:calibri;
text-transform:uppercase;
background-color: #bf0000;
overflow: hidden;
font-size: 12px;
color: #FFF;
text-align: left;
line-height: 12px;
padding:5px;
z-index: 5; }

#icon {
position:fixed;
left: 213px;
top: 460px;
width: 110px;
height: 75px;
background-image: url('http://i.picpar.com/vESc.gif');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:white;
border:3px solid #bf0000;
border-radius: none; }

#icon2 {
position:fixed;
left: 350px;
top: 460px;
width: 75px;
height: 75px;
background-image: url('http://i.picpar.com/8ESc.png');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:white;
border:3px solid #bf0000;
border-radius: none; }

#icon3 {
position:fixed;
left: 453px;
top: 460px;
width: 110px;
height: 75px;
background-image: url('http://i.picpar.com/BESc.gif');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:white;
border:3px solid #bf0000;
border-radius: none; }

#icon4 {
position:fixed;
left: 590px;
top: 460px;
width:  75px;
height: 75px;
background-image: url('http://i.picpar.com/EESc.png');
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
background-attachment:absolute;
background-color:white;
border:3px solid #bf0000;
border-radius: none; }

#kanji-bg {
position: fixed;
top: 460px;
left: 695px;
height: 81px;
width: 270px;
border: none;
padding: 0px;
background-color: #bf0000;
overflow: auto;
z-index: -1; }

#kanji {
position: fixed;
left: 720px;
top: 465px;
background: transparent;
font-family: 'Frijole', cursive;
font-size: 55px;
background: url(https://media.giphy.com/media/5CaIjyS0X8ZBC/giphy.gif);
background-position: center center;
background-size: auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
text-align: center;
letter-spacing: 1px;
-webkit-transition: opacity 2s linear;
-webkit-transition: all 2s ease-in-out;
opacity: 1;
z-inde: 9999; }

#quote-1 {
position: fixed;
left: 375px;
top: 195px;
background: transparent;
font-family: 'Yesteryear', cursive;
font-size: 18px;
background: url(https://thumbs.gfycat.com/BetterEnchantingCrane-max-1mb.gif);
background-position: center center;
background-size: auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
text-align: center;
letter-spacing: 1px;
-webkit-transition: opacity 2s linear;
-webkit-transition: all 2s ease-in-out;
opacity: 1;
z-index: 999999; }

#thetabs {
background-color: transparent;
border: none;
height: 20px;
left: 620px;
position: fixed;
text-align: left;
top: 160px;
width: 350px;
z-index: 9999;}

h2 {
background-color: #;
margin-top: 4;
line-height: 20px;
margin-bottom: 5px;
padding: 4px 10px;
font-family:calibri;
font-size: 20px;
text-transform: uppercase;
text-align: center;
margin-height: 30px;
color: #ffcc5c; }

.onepunch {
background-color: #bf0000;
border: none;
color: #FFF;
font-family:calibri;
text-transform:uppercase;
letter-spacing:0px;
font-size: 13px;
height: 225px;
left: 610px;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
line-height: 12px;
text-align: left;
width: 345px;
top: -300px;
z-index: 95; }

.onepunch:target {
background-color: #bf0000;
border: none;
height: 225px;
left: 610px;
opacity: 1;
overflow: auto;
padding: 5px;
position: fixed;
top: 220px;
width: 345px;
z-index: 99; }

#music-bg{
position:fixed;
left: 140px;
top: 550px;
width: 35px;
height: 35px;
background-color: #000;
border: solid 3px #bf0000;
border-radius: 50%;
z-index: 99;}

.sheetmusic {
position: fixed;
top: 560px;
left: 155px;
opacity:1;
-webkit-transition: all .7s ease-out;
transition: all .5s ease-out;
transition-delay: 0.4s;
color: #c0c9d0;
overflow: hidden;
z-index: 1000000; }

.sheetmusic:hover {color: #656565;}

.song {
margin-top: -20px;
margin-left: 0px;
height: 20px;
width: 20px;
overflow: hidden;
opacity: 0; }

img.grayscale{
 filter: grayscale(100%);
border: 1px solid #333333;
 -webkit-filter: grayscale(100%);
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;}

img.grayscale:hover{
 filter: grayscale(0%);
 -webkit-filter: grayscale(0%);
 filter: none;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;}

.circle {
border: solid 3px #fff;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out; }

.circle:hover{
border: solid 3px #b28477;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out; }



</style>

<div id="main-bg"></div>
<div id="saitama"></div>
<div id="line-top"></div>
<div id="triangle-topleft"></div>
<div id="triangle-bottomright"></div>
<div id="line-bottom"></div>
<div id="line-side"></div>
<div id="title">Saitama</div>

<div id="dossier">
<h2>▬ DOSSIER ▬</h2>
Stats box here.
</div>

<div id="disclaimer">
<h2>▬ DISCLAIMER ▬</h2>
OOC box here. <br><br>

This code was made by <a target="_blank" href="http://roleplay.chat/profile.php?user=R3N" target="_blank" a title="Send her RPC mail! ">R3N.</a> and was made specifically for me. Do not take, alter and claim any piece of this as your own. </span>

</div>

<div id="icon"></div>
<div id="icon2"></div>
<div id="icon3"></div>
<div id="icon4"></div>
<div id="kanji-bg"></div>
<div id="kanji">サイタマ</div>
<div id="quote-1">Human beings are strong because we have the ability to change ourselves.  ▬Saitama</div>

<div id="thetabs">
<a href="#01" class="tab"> </a>
<a href="#02" class="tab"> </a>
<a href="#03" class="tab"> </a>
<a href="#04" class="tab"> </a>
<a href="#reset" class="tab"> </a>
</div></div>

<div id="01" class="onepunch">
<h2>▬ TITLE ▬</h2>
Words, box 1.
</div>

<div id="02" class="onepunch">
<h2>▬ TITLE ▬</h2>
Words, box 2.
</div>

<div id="03" class="onepunch">
<h2>▬ TITLE ▬</h2>
Words, box 3.
</div>

<div id="04" class="onepunch">
<h2>▬ TITLE ▬</h2>
Words, box 4.
</div>


<div id="music-bg"></div>

<div class="sheetmusic"><font size="4">▶</font>
<div class="song">
<audio controls>
<source src="http://k003.kiwi6.com/hotlink/fcz31di5pb/One_Punch_Man_FULL_ENGLISH_OPENING_Cover_by_Jonathan_Young_with_animated_video.mp3"></audio>
</div></div></div>