SAILOR CHUU

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Bungee|Lilita+One|Spicy+Rice|Satisfy|Emilys+Candy|Overlock|Sail);

body{
background-color: #fff;
background-image: linear-gradient(to top left, #eee, #97BFF2, #13ACF0, #fffa93);
background-position: center;
background-size: 100%;
background-repeat:no-repeat;
}

#overlay {
background: url('https://thumbs.gfycat.com/DearTightAchillestang-size_restricted.gif');
z-index: -1;
position: fixed;
background-size: 90%;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

::-webkit-scrollbar-track {background-color:;}
::-webkit-scrollbar-thumb {background-color:;}
::-webkit-scrollbar {width:2px;height:5px;}

#render {
position: absolute;
height: 704px;
width: 451px;
background-color: transparent;
border-radius: 0%;
left: 1250px;
bottom: 0px;
background-repeat: no-repeat;
background-image: url('https://www.uokpl.rs/fpng/f/387-3871832_yuqi-i-dle.png');
z-index: 5;
}

#box {
position: fixed;
left: 400px;
bottom: 100px;
height: 600px;
width: 900px;
z-index: 4;
border: 4px solid #fffa93;
background-color: #fffcb8;
background-image: url('https://www.transparenttextures.com/patterns/diamond-eyes.png');
opacity: 0.9;
}

#title1 {
position: absolute;
z-index:5;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
bottom: 625px;
left: 813px;
font-family: 'Spicy Rice';
background-position: bottom, center;
background-image: url(https://data.whicdn.com/images/276273272/original.gif);
letter-spacing: 4px;
font-size: 70px;
background-size: 102%;
background-repeat: repeat;
text-align: center;
text-transform: uppercase;
-webkit-text-stroke: 2px #13ACF0;
line-height: 63px;
}

#title2 {
position: absolute;
z-index:5;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
bottom: 119px;
left: 650px;
font-family: 'Spicy Rice';
background-position: bottom, center;
background-image: url(https://data.whicdn.com/images/276273272/original.gif);
letter-spacing: 4px;
font-size: 70px;
background-size: 102%;
background-repeat: repeat;
text-align: center;
text-transform: uppercase;
-webkit-text-stroke: 2px #13ACF0;
line-height: 63px;
}

#ooc {
position: fixed;
left: 1070px;
bottom: 120px;
width: 200px;
height: 300px;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y: auto;
}

#friends {
position: fixed;
left: 420px;
bottom: 120px;
width: 200px;
height: 300px;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y:auto;
}

#dossier {
position: fixed;
left: 650px;
bottom: 185px;
width: 390px;
height: 420px;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y: auto;
}


#pic {
position: absolute;
left: 420px;
width: 213px;
height: 233px;
bottom: 450px;
border: 2px solid #fffa93;
z-index: 4;
opacity: 1;
background-image: url('https://66.media.tumblr.com/c27075690fa192aae3c771f425f62e38/90752405d6592a32-f7/s500x750/87c0b8436dcccdf1708a2bd5e32baa6092ce1780.gifv');
background-repeat: no-repeat;
background-size: 150%;
background-position: center, center;
}

#pic2 {
position: absolute;
left: 1070px;
width: 213px;
height: 233px;
bottom: 450px;
border: 2px solid #fffa93;
z-index: 4;
opacity: 1;
background-image: url('https://66.media.tumblr.com/7a343657ed21156ba51f24ca2d6d67be/9498a2cd9edfdc8a-49/s250x400/42d8cb3c1e5e8c5e28de84b18b69eaf67092633a.gifv');
background-repeat: no-repeat;
background-size: 100%;
background-position: center, center;
}

h1{
font-family: 'Spicy Rice';
font-size: 16px;
color: #fff;
text-transform: ;
letter-spacing: 2px;
border-bottom: 0px solid #;
background-image: url('https://i.pinimg.com/originals/ec/ff/05/ecff051d839e550ce440876c5d989070.gif');
background-color: #fff;
text-align: center;
margin-right: 1px;
margin-left: 1px;
line-height: 20px;
margin-top: 0px;
margin-bottom: 3px;
}

b {
font-family: 'Lilita One';
color: #BA2D4A;
}

i {font-weight: italic;
color: #97BFF2;
font-family: 'Satisfy';
}

a {color: #E98999;
text-decoration: none;
}
a:hover {color: #A53C59;
text-decoration: underline;
}

#tab1 {
position: absolute;
left: 680px;
bottom: 635px;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #13ACF0;
}

#tab2 {
position: absolute;
left: 750px;
bottom: 635px;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #fffa93;
}

#tab3 {
position: absolute;
left: 910px;
bottom: 133px;
z-index: 4;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #fffa93;
}

#tab4 {
position: absolute;
left: 980px;
bottom: 133px;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #13acf0;
}
</style>


<div id="overlay"></div>
<div id="render"></div>
<div id="title1">Sailor</div>
<div id="title2">Mouse</div>
<div id="box"></div>
<div id="pic"></div>
<div id="pic2"></div>
<a href="#1"><div id="tab1"></div></a>
<a href="#2"><div id="tab2"></div></a>
<a href="#3"><div id="tab3"></div></a>
<a href="#4"><div id="tab4"></div></a>

<div id="ooc">
<h1>Out of Character</h1>
<B>00.</B> Code is a constant work-in-progress, and it is only thanks to some wonderful people that I even started trying to do things on my own. Shoutout to <a href="" target="_blank">White Dove</a> and <a href="" target="_blank">Titanite</a> for giving me pointers and letting me use their base codes to learn.<br>
<B>01.</B> Faceclaim is Song YuQi of (G)I-DLE. Isn't she precious? You probably thought by my name I was going to use Chuu from LOONA. Well, tbh with you, I thought about it. I decided YuQi suited Sailor Iron Mouse better. ♥<br>
<B>02.</B> Not the admin, but I am in charge of helping organize the Pink Moon faction, i.e. Sailor Neo-Moon's court. This includes the Inner and Outer Asteroid Scouts. DM me if you're interested!
</div>
<div id="friends">
<h1>Connections</h1>
</div>

<div id="dossier">
<div style="height:420px;overflow-y:hidden;">
<a name="1"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Statistics</h1>
<b>Name:</B> <font style=float:right>Jiang Yin Yue.</font><br>
<B>Hanzi:</B> <font style=float:right>江映月.</font><br>
<B>Meaning:</B> <font style=float:right>River Moon Reflection.</font><br>
<B>Gender:</B> <font style=float:right>Female (♀️).</font><br>
<B>D.o.B.:</B> <font style=float:right>October 12, 1999.</font><br>
<B>Age:</B> <font style=float:right>20.</font><br>
<B>Greek Zodiac:</B> <font style=float:right>Libra.</font><br>
<B>Species:</B> <font style=float:right>Musian Humanoid.</font><br>
<B>Star System:</B> <font style=float:right>Tankei System.</font><br>
<B>Queen:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=Flores" target="_blank">Queen Kakyuu</a>.</font><br>
<B>P.o.B.:</B> <font style=float:right>Toronto, ON, Canada.</font><br>
<B>Nationality:</B> <font style=float:right>Canadian.</font><br>
<B>Ethnicity:</B> <font style=float:right>Chinese.</font><br>
<B>Sexuality:</b> <font style=float:right>Demisexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Occupation:</b> <font style=float:right>Film/TV Producer.</font><br>
<B>Residence:</B> <font style=float:right>Crystaia City, CA, U.S.A.</font><br>
<h1>Appearance</h1>
<B>Hair Color:</B> <font style=float:right>Black (Dyes).</font><br>
<B>Eye Color:</b> <font style=float:right>Dark Brown.</font><br>
<B>Skin Tone:</B> <font style=float:right>Sunkissed.</font><br>
<B>Hair Style:</B> <font style=float:right>Varies (bangs often).</font><br>
<B>Height:</B> <font style=float:right>5'0".</font><br>
<B>Weight:</b> <font style=float:right>103 lbs.</font><br>
<B>Build:</b> <font style=float:right>Petite.</font><br>
<B>Blood Type:</B> <font style=float:right>B.</font><br>
<B>Scent:</B> <font style=float:right>Honey & Sweet Cream.</font>
</div></div>

<a name="2"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Alter Ego</h1>
 <b>Sailor Name:</b> <font style="float:right;">Sailor Chuu.</font><br>
 <b>Faction:</b> <font style="float:right;">Tankei System.</font><br>
 <b>Animal:</b> <font style="float:right;">Mouse.</font><br>
 <b>Designation:</b> <font style="float:right;">Animamate.</font><br>
<b>Domain:</b> <font style="float:right;">Stealth & Wealth.</font><br>
<b>Element:</b> <font style="float:right;">Earth.</font><br>
 <b>Title:</b> <font style="float:right;">Neo-Queen.</font><br>
<B>Species:</B> <font style=float:right>Chuu Humanoid.</font><br>
 <b>Forms:</b> <font style="float:right;">One.</font><br>
 <b>Primary Weapon:</b> <font style="float:right;">TBD.</font><br>
<B>Secondary Weapon:</B> <font style=float:right>TBD.</font><br>
<b>Colors:</b> <font style="float:right;">Gold, Pink, White.</font><br>
 <b>Ruling Planet:</b> <font style="float:right;">Chuu.</font><br>
<B>Opposite:</B> <font style=float:right>Sailor Mau.</font><br>
<B>Transform. Item:</B> <font style=float:right>Chuu Pendant.</font><br>
<h1>Inventory</h1>
<B>Chuu Pendant:</B> .
</div></div>

<a name="3"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Attacks</h1>

</div></div>

<a name="4"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Personality</h1>
<br><br>
<h1>Headcanons</h1>
</div></div></div></div>

______________________________________________________________________________________________________CODE VH/VW

<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Bungee|Lilita+One|Spicy+Rice|Satisfy|Emilys+Candy|Overlock|Sail);

body{
background-color: #fff;
background-image: linear-gradient(to top left, #eee, #97BFF2, #13ACF0, #fffa93);
background-position: center;
background-size: 100%;
background-repeat:no-repeat;
}

#overlay {
background: url('https://thumbs.gfycat.com/DearTightAchillestang-size_restricted.gif');
z-index: -1;
position: fixed;
background-size: 90%;
left: 0px; top: 0px; right: 0px; bottom: 0px;
}

::-webkit-scrollbar-track {background-color:;}
::-webkit-scrollbar-thumb {background-color:;}
::-webkit-scrollbar {width:2px;height:5px;}

#render {
position: fixed;
height: 115.2vh;
width: 33.1vw;
background-color: transparent;
border-radius: 0%;
left: 73.7vw;
bottom: -29vh;
background-repeat: no-repeat;
background-image: url('https://www.uokpl.rs/fpng/f/387-3871832_yuqi-i-dle.png');
z-index: 5;
}

#box {
position: fixed;
left: 23.5vw;
bottom: 11.2vh;
height: 75.32vh;
width: 52.6vw;
z-index: 4;
border: 4px solid #fffa93;
background-color: #fffcb8;
background-image: url('https://www.transparenttextures.com/patterns/diamond-eyes.png');
opacity: 0.9;
}

#title1 {
position: absolute;
z-index:5;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
bottom: 77.2vh;
left: 47.9vw;
font-family: 'Spicy Rice';
background-position: bottom, center;
background-image: url(https://data.whicdn.com/images/276273272/original.gif);
letter-spacing: 4px;
font-size: 70px;
background-size: 102%;
background-repeat: repeat;
text-align: center;
text-transform: uppercase;
-webkit-text-stroke: 2px #13ACF0;
line-height: 63px;
}

#title2 {
position: fixed;
z-index:5;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
bottom: 13.6vh;
left: 38vw;
font-family: 'Spicy Rice';
background-position: bottom, center;
background-image: url(https://data.whicdn.com/images/276273272/original.gif);
letter-spacing: 0.23vw;
font-size: 70px;
background-size: 102%;
background-repeat: repeat;
text-align: center;
text-transform: uppercase;
-webkit-text-stroke: 2px #13ACF0;
line-height: 63px;
}

#ooc {
position: fixed;
left: 62.6vw;
bottom: 14vh;
width: 11.6vw;
height: 37vh;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y: auto;
}

#friends {
position: fixed;
left: 24.6vw;
bottom: 14vh;
width: 11.6vw;
height: 37vh;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y:auto;
}

#dossier {
position: fixed;
left: 38vw;
bottom: 22vh;
width: 22.9vw;
height: 52.4vh;
z-index: 4;
border: 2px solid #fffa93;
background-color: #fff;
opacity: 1;
text-align: left;
font-size: 14px;
font-family: 'Overlock';
color: #777;
padding: 7px;
overflow-y: auto;
}

#pic {
position: absolute;
left: 24.6vw;
width: 12.5vw;
height: 29.8vh;
bottom: 54.4vh;
border: 2px solid #fffa93;
z-index: 4;
opacity: 1;
background-image: url('https://66.media.tumblr.com/c27075690fa192aae3c771f425f62e38/90752405d6592a32-f7/s500x750/87c0b8436dcccdf1708a2bd5e32baa6092ce1780.gifv');
background-repeat: no-repeat;
background-size: 150%;
background-position: center, center;
}

#pic2 {
position: absolute;
left: 62.6vw;
width: 12.5vw;
height: 29.8vh;
bottom: 54.5vh;
border: 2px solid #fffa93;
z-index: 4;
opacity: 1;
background-image: url('https://66.media.tumblr.com/7a343657ed21156ba51f24ca2d6d67be/9498a2cd9edfdc8a-49/s250x400/42d8cb3c1e5e8c5e28de84b18b69eaf67092633a.gifv');
background-repeat: no-repeat;
background-size: 100%;
background-position: center, center;
}

h1{
font-family: 'Spicy Rice';
font-size: 16px;
color: #fff;
text-transform: ;
letter-spacing: 2px;
border-bottom: 0px solid #;
background-image: url('https://i.pinimg.com/originals/ec/ff/05/ecff051d839e550ce440876c5d989070.gif');
background-color: #fff;
text-align: center;
margin-right: 1px;
margin-left: 1px;
line-height: 20px;
margin-top: 0px;
margin-bottom: 3px;
}

b {
font-family: 'Lilita One';
color: #BA2D4A;
}

i {font-weight: italic;
color: #97BFF2;
font-family: 'Satisfy';
}

a {color: #E98999;
text-decoration: none;
}
a:hover {color: #A53C59;
text-decoration: underline;
}

#tab1 {
position: absolute;
left: 40vw;
bottom: 78vh;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #13ACF0;
}

#tab2 {
position: absolute;
left: 44vw;
bottom: 78vh;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 40px solid #fffa93;
}

#tab3 {
position: absolute;
left: 53.2vw;
bottom: 15.2vh;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #fffa93;
}

#tab4 {
position: absolute;
left: 57.5vw;
bottom: 15.2vh;
z-index: 5;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #13acf0;
}
</style>


<div id="overlay"></div>
<div id="render"></div>
<div id="title1">Sailor</div>
<div id="title2">Mouse</div>
<div id="box"></div>
<div id="pic"></div>
<div id="pic2"></div>
<a href="#1"><div id="tab1"></div></a>
<a href="#2"><div id="tab2"></div></a>
<a href="#3"><div id="tab3"></div></a>
<a href="#4"><div id="tab4"></div></a>

<div id="ooc">
<h1>Out of Character</h1>
<B>00.</B> Code is a constant work-in-progress, and it is only thanks to some wonderful people that I even started trying to do things on my own. Shoutout to <a href="" target="_blank">White Dove</a> and <a href="" target="_blank">Titanite</a> for giving me pointers and letting me use their base codes to learn.<br>
<B>01.</B> Faceclaim is Song YuQi of (G)I-DLE. Isn't she precious? You probably thought by my name I was going to use Chuu from LOONA. Well, tbh with you, I thought about it. I decided YuQi suited Sailor Iron Mouse better. ♥<br>
<B>02.</B> Not the admin, but I am in charge of helping organize the Pink Moon faction, i.e. Sailor Neo-Moon's court. This includes the Inner and Outer Asteroid Scouts. DM me if you're interested!
</div>
<div id="friends">
<h1>Connections</h1>
</div>

<div id="dossier">
<div style="height:420px;overflow-y:hidden;">
<a name="1"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Statistics</h1>
<b>Name:</B> <font style=float:right>Jiang Yin Yue.</font><br>
<B>Hanzi:</B> <font style=float:right>江映月.</font><br>
<B>Meaning:</B> <font style=float:right>River Moon Reflection.</font><br>
<B>Gender:</B> <font style=float:right>Female (♀️).</font><br>
<B>D.o.B.:</B> <font style=float:right>October 12, 1999.</font><br>
<B>Age:</B> <font style=float:right>20.</font><br>
<B>Greek Zodiac:</B> <font style=float:right>Libra.</font><br>
<B>Species:</B> <font style=float:right>Musian Humanoid.</font><br>
<B>Star System:</B> <font style=float:right>Tankei System.</font><br>
<B>Queen:</B> <font style=float:right><a target="_blank" href="https://roleplay.chat/profile.php?user=Flores" target="_blank">Queen Kakyuu</a>.</font><br>
<B>P.o.B.:</B> <font style=float:right>Toronto, ON, Canada.</font><br>
<B>Nationality:</B> <font style=float:right>Canadian.</font><br>
<B>Ethnicity:</B> <font style=float:right>Chinese.</font><br>
<B>Sexuality:</b> <font style=float:right>Demisexual.</font><br>
<B>Marital:</B> <font style=float:right>Single.</font><br>
<B>Occupation:</b> <font style=float:right>Film/TV Producer.</font><br>
<B>Residence:</B> <font style=float:right>Crystaia City, CA, U.S.A.</font><br>
<h1>Appearance</h1>
<B>Hair Color:</B> <font style=float:right>Black (Dyes).</font><br>
<B>Eye Color:</b> <font style=float:right>Dark Brown.</font><br>
<B>Skin Tone:</B> <font style=float:right>Sunkissed.</font><br>
<B>Hair Style:</B> <font style=float:right>Varies (bangs often).</font><br>
<B>Height:</B> <font style=float:right>5'0".</font><br>
<B>Weight:</b> <font style=float:right>103 lbs.</font><br>
<B>Build:</b> <font style=float:right>Petite.</font><br>
<B>Blood Type:</B> <font style=float:right>B.</font><br>
<B>Scent:</B> <font style=float:right>Honey & Sweet Cream.</font>
</div></div>

<a name="2"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Alter Ego</h1>
 <b>Sailor Name:</b> <font style="float:right;">Sailor Chuu.</font><br>
 <b>Faction:</b> <font style="float:right;">Tankei System.</font><br>
 <b>Animal:</b> <font style="float:right;">Mouse.</font><br>
 <b>Designation:</b> <font style="float:right;">Animamate.</font><br>
<b>Domain:</b> <font style="float:right;">Stealth & Wealth.</font><br>
<b>Element:</b> <font style="float:right;">Earth.</font><br>
 <b>Title:</b> <font style="float:right;">Neo-Queen.</font><br>
<B>Species:</B> <font style=float:right>Chuu Humanoid.</font><br>
 <b>Forms:</b> <font style="float:right;">One.</font><br>
 <b>Primary Weapon:</b> <font style="float:right;">TBD.</font><br>
<B>Secondary Weapon:</B> <font style=float:right>TBD.</font><br>
<b>Colors:</b> <font style="float:right;">Gold, Pink, White.</font><br>
 <b>Ruling Planet:</b> <font style="float:right;">Chuu.</font><br>
<B>Opposite:</B> <font style=float:right>Sailor Mau.</font><br>
<B>Transform. Item:</B> <font style=float:right>Chuu Pendant.</font><br>
<h1>Inventory</h1>
<B>Chuu Pendant:</B> .<br>
</div></div>

<a name="3"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Attacks</h1>

</div></div>

<a name="4"></a>
<div style="height:420px;overflow:auto;">
<div style="margin: 0 auto; width:28em;">
<h1>Personality</h1>
<br><br>
<h1>Headcanons</h1>
</div></div></div></div>