Fish's Sidon profile

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

@font-face { font-family: "crest"; src: url('https://dl.dropboxusercontent.com/s/gkiczzkb3rz9fla/HylianSymbols.ttf?dl=0'); }
@font-face { font-family: "zel"; src: url('https://dl.dropboxusercontent.com/s/rg17eyks20dee5c/HyliaSerifBeta-Regular.otf?dl=0'); }


::-webkit-scrollbar-thumb:vertical{background-color:#ffc8c8;box-shadow: inset 0 0 0 0.22vh #b16a68;}
::-webkit-scrollbar{width:0.6vw;height:0.6vh;background-color:#b16a68;}
::selection {color:fdd88a;}


body {background-color: #ffe8b1;cursor: url(http://i.picpar.com/SHtc.png), default;}

.credit{position:absolute;right:0vw;top:0vh;height:5vh;width:5vh;overflow:hidden;}
.credit a{text-decoration:none;color:fff;font-size:3vh;cursor: url(http://i.picpar.com/SHtc.png), default;}
.credit a:hover{text-decoration:none;color:ae3f3e;filter:drop-shadow(0vh 0vh 0.3vh #ae3f3f);cursor: url(http://i.picpar.com/SHtc.png), default;}

#box{position:absolute;bottom:0vh;right:0vw;width:100vw;height:100vh;background-color:transparent;overflow:hidden;}


.bot{position:absolute;bottom:0vh;left:0vw;width:100vw;height:50vh;background:#ecf1f1;background: linear-gradient(to top, #ecf1f1, #8e9a9a);overflow:hidden;transition:all 1s ease-in-out; transition-delay: 500s;}
#box:hover .bot {height:0vh;transition:all 1s ease-in-out; transition-delay: 2.6s; }

.top{position:absolute;top:0vh;left:0vw;width:100vw;height:50vh;background:#ecf1f1;background: linear-gradient(to bottom, #ecf1f1, #8e9a9a);overflow:hidden;transition:all 1s ease-in-out; transition-delay: 500s;}
#box:hover .top {height:0vh;transition:all 1s ease-in-out; transition-delay: 2.6s; }

.cir{position:absolute;top:20vh;left:20vw;width:60vw;height:60vh;background:transparent;overflow:hidden;background-repeat: no-repeat;background-size: auto 100%;background-position: center center;background-image: url("http://i.picpar.com/B46c.png");transition:all 0.5s ease-in-out; transition-delay: 500s;}
#box:hover .cir {opacity:0;transition:all 0.5s ease-in-out; transition-delay: 1.6s; }

.swor1{position:absolute;top:10vh;left:10vw;width:70vw;height:70vh;background:transparent;overflow:hidden;background-repeat: no-repeat;background-size: auto 100%;background-position: center center;background-image: url("http://i.picpar.com/C46c.png");transition:all 0.5s ease-in-out; transition-delay: 500s;}
#box:hover .swor1 {top:-30vh;left:-30vw;width:40vw;height:40vh;transition:all 0.5s ease-in-out; transition-delay: 1.1s; }

.swor2{position:absolute;top:10vh;right:11.4vw;width:70vw;height:70vh;background:transparent;overflow:hidden;background-repeat: no-repeat;background-size: auto 100%;background-position: center center;background-image: url("http://i.picpar.com/D46c.png");transition:all 0.5s ease-in-out; transition-delay: 500s;}
#box:hover .swor2 {top:-30vh;right:-30vw;width:40vw;height:40vh;transition:all 0.5s ease-in-out; transition-delay: 0.5s; }

.qua{position:absolute;top:5vh;left:2.5vw;width:95vw;height:90vh;background:#fbfbfb;overflow:hidden;box-shadow: inset 0 0 0 1vh #af6765;}

.quaa{position:absolute;top:5vh;left:2.5vw;width:95vw;height:90vh;background:transparent;overflow:hidden;box-shadow: inset 0 0 0 1vh #af6765;}

.dad{position:absolute;bottom:5.8vh;left:3vw;width:95vw;height:94vh;background:transparent;overflow:hidden;
background-repeat: no-repeat;background-size: auto 100%;background-position: bottom left;background-image: url("http://i.picpar.com/c56c.png");}

.cre{position:fixed;left:40vw;top:10vh;height: 12vh;width: 55vw;background:transparent;overflow:display;text-align:center;}
.cre a{display: inline-block;height:10vh;width:10vh;background-color:transparent;margin-left: 2.5vw;margin-right: 2.5vw;transition:all 0.4s ease-in-out;font-size:17vh;font-family:'crest';color:af6765;text-align:center;text-decoration:none;cursor: url(http://i.picpar.com/SHtc.png), default;}
.cre a:hover{display: inline-block;transition:all .4s ease-in-out;text-decoration:none;color:e19799;cursor: url(http://i.picpar.com/SHtc.png), default;}

.bas{position:fixed;left:43vw;bottom:7vh;height: 65vh;width: 49vw;background:transparent;overflow:auto;padding: 1vh 1vw;font-size:3vh;font-family:'ABeeZee';color:af6765;text-align:center;}


.bass{position:fixed;left:43vw;bottom:7vh;height: 65vh;width: 49vw;background:#fbfbfb;overflow:auto;padding: 1vh 1vw;font-size:3vh;font-family:'ABeeZee';color:af6765;text-align:center;z-index:-100;opacity:0;}
.bass:target{z-index:10;opacity:1;}

.head{font-family:'zel';color: #e39c9d;font-size: 6vh;}

a{text-decoration:none;color:fdd88a;cursor: url(http://i.picpar.com/SHtc.png), default;}
a:hover{text-decoration:none;color:e2b66f;cursor: url(http://i.picpar.com/SHtc.png), default;}

b{text-shadow: 0vw 0vw 0.7vw #e39c9d;}



.icon{height:15vh; width:15vh;border: 0.4vh solid #fdd88a;margin-top: 1vh;margin-bottom: 1vh;transition:all .3s ease-in-out;}
.icon:hover{border: 0.4vh solid #e2b66f;border-radius:50%;transition:all .3s ease-in-out;}


.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: fixed; background:#fbfbfb;box-shadow:0.3vh 0.3vh 2vh 0vh rgba(0,0,0,0.3);max-width: 15vh;min-width: 15vh;min-height: 2vh;font-size:1.5vh;font-family: 'ABeeZee';color:#af6765;padding: 3px 3px;}
.dropdown:hover .dropdown-content {display: block;}



<div id="box">

<div class="qua"></div>
<div class="dad"></div>
<div class="quaa"></div>
<div class="cre"><a href="#1">i</a><a href="#2">i</a><a href="#3">i</a><a href="#4">i</a><a href="#">i</a></div>

<div class="bas">
<div class="head">Prince of the Zora</div>

<font style="float:left;">Name</font><font style="float:right;">Sidon</font></br>
<font style="float:left;">Title</font><font style="float:right;">Crown Prince of the Zora</font></br>
<font style="float:left;">Age</font><font style="float:right;">Over 100 years old</font></br>
<font style="float:left;">Gender</font><font style="float:right;">Male</font></br>
<font style="float:left;">Race</font><font style="float:right;">Zora</font></br>
<font style="float:left;">Height</font><font style="float:right;">11' (3,3 meters) tall</font></br>
<font style="float:left;">Weight</font><font style="float:right;">400kg</font></br>
<font style="float:left;">Build</font><font style="float:right;">Extremely Fit</font></br>
<font style="float:left;">Alignment</font><font style="float:right;">Lawful Good</font></br>
<font style="float:left;">Family</font><font style="float:right;"><a target="_blank" href="https://roleplay.chat/profile.php?user=Mipha">Mipha </a></font></br>
<font style="float:left;">Orientation</font><font style="float:right;">Heterosexual</font></br>
<font style="float:left;">Marital Status</font><font style="float:right;">Single</font></br>
<font style="float:left;">Weapon of Choice</font><font style="float:right;">Bow n' Arrow/Zoran Spear</font></br></br>
<center><a target="_blank" href="https://www.youtube.com/watch?v=R4ZkklcIfTo">"Stay Strong, I believe in you!"</a></center>
</div>

<div class="bass" id="1">
<div class="head">Log</div>

Behold! The sharkshark! Part shark, part shark!
</div>

<div class="bass" id="2">
<div class="head">Gallery</div>

Test 2<br>
<a target="_blank" href="http://i.picpar.com/d56c.png" target="_blank"><img class="icon" src="http://i.picpar.com/d56c.png"></a>
</div>

<div class="bass" id="3">
<div class="head">Relationships</div>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?" target="_blank"><div class="dropdown"><span><img class="icon" src="http://i.picpar.com/d56c.png"></span><div class="dropdown-content"><b>Nerd Name</b><br>quickly little tid-bit about this nerd</p></div></div></a>

<a target="_blank" href="https://roleplay.chat/profile.php?user=?" target="_blank"><div class="dropdown"><span><img class="icon" src="http://i.picpar.com/d56c.png"></span><div class="dropdown-content">nerd</p></div></div></a>

<a target="_blank" href="https://roleplay.chat/profile.php?user=?" target="_blank"><div class="dropdown"><span><img class="icon" src="http://i.picpar.com/d56c.png"></span><div class="dropdown-content">nerd</p></div></div></a>

</div>

<div class="bass" id="4">
<div class="head">Out Of Character</div>

Test 4<br>
<b>00</b> This profile was made by <a target="_blank" href="https://roleplay.chat/profile.php?user=Fish"> Fish </a> she is a great coder and you should definitely commission he for profiles! <br>
<b>01</b> I also code stuff, if you're interested just hit me up here or in my main coding profile <a href="">Hound of Tindalos</a><br>
<b>02</b> Breath of the wild canon, but you know how Zelda is, all twists and turns with the timeline so I am very flexible with Zelda-themed roleplay.
<b>03</b>
<b>bold</b> <i>italicized</i> <strike>strike</strike> regular <a href="#" target="_blank">link</a> <u>underline</u>

</div>


<div class="bot"></div>
<div class="top"></div>
<div class="swor1"></div>
<div class="swor2"></div>
<div class="cir"></div>



<div class="credit">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Fish" target="_blank">🐟</a>
</div>