GAYRUTO HEADASS [DONE]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Permanent+Marker|Rock+Salt|Ubuntu+Condensed|Rokkitt|Trade+Winds');

body {
background-color: #;
background-image: linear-gradient(to top left, #fcb904, #fc9c04, #fc6804, #fc5304);
background-position: center;
background-size: 100%;
background-repeat:no-repeat;
}

#profile {
background-color: transparent;
border:0px;
}

#whole {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

*{cursor: url('https://www.nicepng.com/png/full/73-736037_view-cursor-on-t-shirt-kunai-cursor.png'), default;
}

#container {
position: absolute;
z-index: 4;
bottom: 6vh;
left: 5vw;
height: 400px;
width: 780px;
border: 2px solid #fcb904;
background: #fcc404;
background-image: url('https://www.transparenttextures.com/patterns/az-subtle.png');
background-repeat: repeat;
background-size: 5%;
}

#image1 {
position: absolute;
z-index: 5;
left: 45.8vw;
bottom: 6.1vh;
height: 400px;
width: 250px;
background-color: transparent;
border-radius: 0%;
background-image: url('http://i.picpar.com/nwbf.png');
background-repeat: no-repeat;
background-size: 90%;
opacity: 0.95;
}

.overlay {
opacity: 0;
overflow: auto;
}

#image1:hover .overlay {
position: absolute;
bottom: 2vh;
left: 0vw;
height: 210px;
width: 200px;
background: #FFF;
border: 1px dashed #fc9c04;
font-family: 'Ubuntu Condensed';
color: #666;
font-size: 10px;
line-height: 11px;
text-align: left;
padding: 5px;
overflow-y: auto;
opacity: 2;
}

#stats {
position: absolute;
z-index: 5;
bottom: 15vh;
left: 5.8vw;
height: 130px;
width: 250px;
background: #FFF;
border: 1px dashed #fc9c04;
font-family: 'Ubuntu Condensed';
color: #666;
font-size: 10px;
line-height: 11px;
text-align: left;
padding: 5px;
overflow-y: auto;
}

#info {
position: absolute;
z-index: 5;
bottom: 38vh;
left: 13vw;
height: 160px;
width: 250px;
background: #FFF;
border: 1px dashed #fc9c04;
transform: skew(-25deg);
font-family: 'Ubuntu Condensed';
color: #666;
font-size: 10px;
line-height: 11px;
text-align: left;
padding: 5px;
overflow-y: auto;
}

#saying {
position: absolute;
z-index: 6;
bottom: 38vh;
left: 33vw;
height: 160px;
width: 140px;
background: #FFA445;
border: 1px dashed #fc9c04;
transform: skew(-25deg);
font-family: 'Kaushan Script';
background-image: url('');
background-repeat: repeat;
background-size: 8%;
color: #EF4800;
font-size: 26px;
line-height: 26px;
text-align: center;
padding: 5px;
overflow-y: auto;
}

#gifbox {
position: absolute;
z-index: 5;
bottom: 15vh;
left: 25.7vw;
background-color: transparent;
height: 200px;
width: 500px;
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7e37d55c-fda0-46cc-9f2e-76228177a8e4/d29iu9b-2f4ef16e-6526-4028-b09d-89f81444e887.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvN2UzN2Q1NWMtZmRhMC00NmNjLTlmMmUtNzYyMjgxNzdhOGU0XC9kMjlpdTliLTJmNGVmMTZlLTY1MjYtNDAyOC1iMDlkLTg5ZjgxNDQ0ZTg4Ny5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Ic9EgPljMQtPOTj0Ai-Sz3CYgmy9eJal7fJEi0Z2P3g');
background-repeat: no-repeat;
background-size: 100%;
}

/*name*/
#title {
position: absolute;
z-index: 6;
bottom: -6vh;
left: 7vw;
background-color: transparent;
border-radius: 0%;
background-image: url('http://i.picpar.com/pwbf.png');
background-size: 100%;
background-repeat: no-repeat;
height: 135px;
width: 510px;
opacity: 1;
}

/*Icons*/
#cornerpic {
position: absolute;
z-index: 5;
left: 1vw;
bottom: 54vh;
height: 100px;
width: 100px;
border-radius: 50%;
border: 8px solid #fcb904;
box-shadow:0px 0px 20px #DB5A00;
background-image: url('https://pbs.twimg.com/media/DnuEF39X4AIBncz.jpg');
background-size: 100%;
background-repeat: no-repeat;
}

#cornerpic:hover {
background-image: url('https://64.media.tumblr.com/fda6873ee7f259ca1eb29359d0721a20/tumblr_p5fn37bH961v07xajo3_r1_250.gif');
background-repeat: no-repeat;
background-size: 200%;
background-position: -50px, center;
}

/*Tabs*/
#tab1 {
position: absolute;
z-index: 5;
left: 5vw;
bottom: 48vh;
width: 40px;
height: 20px;
background: #DB5A00;
border-radius: 100px / 50px;
transform: rotate(90deg);
}

#tab2 {
position: absolute;
z-index: 5;
left: 8vw;
bottom: 51vh;
width: 40px;
height: 20px;
background: #DB5A00;
border-radius: 100px / 50px;
transform: rotate(48deg);
}

#tab3 {
position: absolute;
z-index: 5;
left: 9.8vw;
bottom: 57vh;
width: 40px;
height: 20px;
background: #DB5A00;
border-radius: 100px / 50px;
transform: rotate(20deg);
}

#reset {
position: absolute;
z-index: 5;
left: 10.2vw;
bottom: 64vh;
width: 40px;
height: 20px;
background: #DB5A00;
border-radius: 100px / 50px;
transform: rotate(0deg);
}

#image2 {
position: absolute;
z-index: 4;
bottom: 3vh;
left: 65.5vw;
width: 700px;
height: 560px;
background-image: url('https://i.pinimg.com/originals/ee/67/db/ee67db26c352e37bd87ab5ce3e3f455f.png');
background-size: 55%;
background-repeat: no-repeat;
}

#image2:hover .overlay {
position: absolute;
bottom: 3vh;
left: 0vw;
height: 370px;
width: 200px;
background: #FFF;
border: 1px dashed #fc9c04;
font-family: 'Ubuntu Condensed';
color: #666;
font-size: 10px;
line-height: 11px;
text-align: left;
padding: 5px;
overflow-y: auto;
opacity: 2;
}

/*Text Stuff*/
hr {
 border:0;
 margin-top:5px;
 margin-bottom:5px;
 width:90%;
 height:1px;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 background-color:#BC4E00;
}

h1 {
font-family: 'Trade Winds';
text-align: center;
font-size: 13px;
background-color: #fcb904;
line-height: 13px;
margin-top: 0px;
margin-bottom: 3px;
color: #fc5304;
}

b {
color: #9A5C14;
font-size: 10px;
font-family: 'Rokkitt';
text-transform: uppercase;
}

i {
color: orange;
}

a {
text-decoration: none;
font-family: 'Rock Salt';
color: #4DBDC6;
font-size: 9px;
}

a:hover {
text-decoration: underline;
color: #0C0B61;
}

</style>

<div id="whole" oncontextmenu="return false;">
<div id="title"></div>
<div id="cornerpic"></div>
<div id="container"></div>
<div id="gifbox"></div>
<div id="saying">That’s why we endure. <br>We are ninja. <br>I will never forget.<br>Believe it!</div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#1"><div id="reset"></div></a>
<div id="image2"><div class="overlay"><h1>Gallery</h1>
You could also use it to keep track of events. I dunno. Put something here though!</div></div>
<div id="stats"><h1>Statistics</h1>
<B>Given Name:</B> <font style=float:right>Uzumaki Naruto.</font><br>
<B>Kanji:</B> <font style=float:right>うずまきナルト.</font><br>
<B>Nickname(s):</B> <font style=float:right>Hero of Konoha; Idiot.</font><br>
<B>Age:</B> <font style=float:right>18-22.</font><br>
<B>D.o.B.:</B> <font style=float:right>October 10th (♎︎).</font><br>
<B>P.o.B.:</B> <font style=float:right>Konohagakure, Ho no Kuni.</font><br>
<B>Gender:</B> <font style=float:right>Male (♂).</font><br>
<B>Species:</B> <font style=float:right>Humanoid.</font><br>
<B>Classification:</B> <font style=float:right>Sage.</font><br>
<B>Orientation:</B> <font style=float:right>(Homo)sexual.</font><br>
<B>Marital:</B> <font style=float:right>---.</font><br>
<B>Alignment:</B> <font style=float:right>Good.</font><br>
<B>Affiliation:</b> <font style=float:right>Konohagakure ; ASF.</font><br>
<B>Former:</b> <font style=float:right>Team 7.</font><br>
<B>Occupation:</B> <font style=float:right>Hokage-Apprentice.</font><br>
<h1> Appearance </h1>
<B>Hair Color:</B> <font style=float:right>Blond.</font><br>
<B>Hair Style:</B> <font style=float:right>Short ; Spiky.</font><br>
<B>Eye Color:</B> <font style=float:right>Emerald Green.</font><br>
<B>Skin Tone:</B> <font style=float:right>Milky White.</font><br>
<B>Complexion:</B> <font style=float:right>Normal.</font><br>
<B>Height:</B> <font style=float:right>180 cm / 5'9".</font><br>
<B>Blood Type:</b> <font style=float:right>B.</font><br>
<B>Scent:</B> <font style=float:right>Pretty Boy Swag.</font></div>
<div id="image1"><div class="overlay"><h1>OOC</h1>
<b>00.</B> This was coded for Gayruto by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a>. Do not touch! Looks best at 100% zoom and was coded on a laptop with the dimensions of 1368 x 768.<br><br>
<B>01.</B> Text here.<br><br>
<B>02.</B> OOC text here.
</div></div>
<div id="info">
<div style="height: 160px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 160px; overflow: auto;">
<div style="margin: 0 auto; width: 24.5em;">
<h1>Connections</h1>

</div></div>

<a name="2"></a>
<div style="height: 160px; overflow: auto;">
<div style="margin: 0 auto; width: 24.5em;">
<h1>Bingo Book</h1>

</div></div>

<a name="3"></a>
<div style="height: 160px; overflow: auto;">
<div style="margin: 0 auto; width: 24.5em;">
<h1>Headcanons</h1>

</div></div>

<a name="4"></a>
<div style="height: 160px; overflow: auto;">
<div style="margin: 0 auto; width: 24.5em;">
<h1>Personality</h1>

</div></div></div></div>