rebellious code

<style type="text/css">
#no {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;}

p {
margin: 5px;
text-align: center;}

b, bold {
text-transform: uppercase;
font-size: 12px;
color: #791735;
letter-spacing: 0px;}

h2 {
text-align: right;
font-family: veranda;
color: #791735;
font-size: 12px;
line-height: 15px;
letter-spacing: 4px;
border-bottom: 1px solid #791735;
margin-top: 0px;
text-transform: uppercase;}

::-webkit-scrollbar {
width: 3px;}

::-webkit-scrollbar-thumb {
background: #a9a6a2;}

body {
background-color: #211d30;
cursor: url('https://78.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_540.png'), default;}

#ev {
position: absolute;
left: 110px;
bottom: 310px;
height: 130px;
width: 145px;
background-image: url('https://i.imgur.com/gv8Z4Z5.jpg?1');
background-attachment: absolute;
background-size: 100% 100%;
border-right: 10px solid #40385e;}

#hold {
position: absolute;
left: 100px;
bottom: 200px;
height: 240px;
width: 400px;
background-color: #40385e;
padding: 5px;
overflow: none;}

#box {
position: absolute;
right: 10px;
top: 10px;
height: 120px;
width: 225px;
background-color: #6d609f;
padding: 5px;
overflow: auto;
font-family: veranda;
color: #f3f3f3;
font-size: 10px;
padding: 5px;
line-height: 14px;
text-align: left;
overflow: auto;}

#box2 {
position: absolute;
right: 10px;
bottom: 10px;
height: 80px;
width: 380px;
background-color: #6d609f;
font-family: veranda;
color: #f3f3f3;
font-size: 10px;
padding: 5px;
line-height: 14px;
text-align: left;
overflow: auto;}

.box {
position: fixed;
left: 110px;
bottom: -1000000px;
height: 80px;
width: 380px;
background-color: #6d609f;
font-family: veranda;
color: #f3f3f3;
font-size: 10px;
padding: 5px;
line-height: 14px;
text-align: left;
overflow: auto;
opacity: 0;
transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in;
-moz-transition: 0.8s ease-in;}

.box:target {
left: 110px;
bottom: 210px;
opacity: 1;
transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;}

#tit {
position: absolute;
left: 101px;
bottom: 453px;
font-family: veranda;
font-size: 46px;
width: 800px;
 background: url('https://i.imgur.com/hPGDhNa.gif');
 background-position: 60;
 background-size: auto;
 background-repeat: repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 display: block;
 text-align: center center
 text-transform: lowercase;
 letter-spacing: px;
 opacity: 0.6;
 z-index: 1000;
 }

#nexthold {
position: absolute;
left: 100px;
bottom: 45px;
height: 150px;
width: 410px;
background-color: transparent;
overflow: none;}

a {
color: #f3f3f3;
text-decoration: none;
display: inline-block;
width: 79px;
height: 10px;
margin: 5px;
background-color: #40385e;
font-size: 10px;
padding: 5px;
font-family: veranda;
text-align: center;
letter-spacing: 3px;}

#navi {
position: fixed;
left: 515px;
bottom: 195px;
background-color: transparent;}

a.nav:link, a.nav:active, a.nav:visited{
display: inline-block;
width: 3px;
height: 3px;
margin-top: 8px;
background-color: #40385e;
transition: 0.8s ease-out;
-webkit-transition: 0.8s ease-out;
-moz-transition: 0.8s ease-out;}

a.nav:hover{
background-color: #fff;}
</style>

<div id="no" oncontextmenu="return false;">

<div id="hold">
<div id="box">
<h2>Call me cute again.</h2>
<font style=float:left><b>name:</b></font> <font style=float:right>xayah</font><br>
<font style=float:left><b>alias:</b></font> <font style=float:right>the rebel, the violet raven</font><br>
<font style=float:left><b>species:</b></font> <font style=float:right>vastaya / lhotlan</font><br>
<font style=float:left><b>gender:</b></font> <font style=float:right>female.</font><br>
<font style=float:left><b>age:</b></font> <font style=float:right>young adult.</font><br>
<font style=float:left><b>interest:</b></font> <font style=float:right>demisexual.</font><br>
<font style=float:left><b>status:</b></font> <font style=float:right>guarded.</font>
</div>

<div id="box2">
<h2>Listening. Such a simple concept.</h2>
<font style=float:left><b>O1.</b> Code was edited and approved for use by nyx / charm.</font><br>
<font style=float:left><b>O2.</b> My name is Star, a few call me waifu, a rarity calls me Cap'n or Summer. I'm sure I'll collect a few other nicknames, good or bad, before I eventually quit role-playing. Ask for my Discord if you really want it. </font><br>
<font style=float:left><b>O3.</b> Whenever I am online.. I am here either to indulge in role-play, strike up conversation or play some group oriented PC game. I am uninterested in OOC bullshit, despite my love for Korean dramas. </font><br>
<font style=float:left><b>O4.</b> I love descriptive, literate role-play. I am not a spelling nazi, but please make some form of effort to use spellcheck now and then. Long-term or short-term is interchangeable, but long-term partners are generally top priority. Smut depends on my mood and comfort level at the moment. </font><br>
<font style=float:left><b>O5.</b> I do not auto-ship. I portray Xayah after a separation from Rakan. However, if you want to be included in my character development as a long-term Rakan, message me for details. </font><br>
<font style=float:left><b>O6.</b> Interested in a different champion? Just ask, I probably have a name for it.</font>
</div>
</div>

<div id="one" class="box">
<h2>I was born to ruffle feathers.</h2>
Edited history coming.


</div>

<div id="two" class="box">
<h2>Ever been stabbed by a feather?</h2>
Abilities here.

</div>

<div id="three" class="box">
<h2>Behold. I am depleted of cares.</h2>
Head canons here.
</div>

<div id="nexthold">
<a target="_blank" href="https://roleplay.chat/profile.php?user=charm">ahri</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>

<br>

<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=?">friend</a>
</div>

<div id="ev"></div>

<div id="tit">let's cut 'em to ribbons</div>

<div id="navi">
<a class="nav" href="#one"></a><br>
<a class="nav" href="#two"></a><br>
<a class="nav" href="#three"></a><br>
<a class="nav" href="#four"></a>
</div>