<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Merriweather:100,400italic);
@import url('https://fonts.googleapis.com/css?family=Karla:100,300,400i,600,700,800');
body, a:hover {cursor: url(http://i.picpar.com/9tXc.gif), progress !important;}
body{
background: #f9f7ee;
}
::-webkit-scrollbar-thumb:vertical { background: transparent; width: 0px; }
::-webkit-scrollbar { background:transparent; width: 0px; }
::selection { color: rgba(366,366,366,.3);}
::-moz-selection { color: rgba(366,366,366,.3); }
/* --- borders --- */
.linea{
position: fixed; margin: auto;
bottom: -650px; left: 0; right: -400; top: 0;
height: 5px; width: 0px;
opacity: 0;
background: #3d3029;
animation-duration: 1s;
animation-delay: 8.5s;
animation-name: movea;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.lineb{
position: fixed; margin: auto;
bottom: -350px; left: 0; right: -900; top: 0;
height: 300px; width: 5px;
opacity: 0;
background: #3d3029;
animation-duration: 1s;
animation-delay: 8.5s;
animation-name: moveb;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.line1{
position: fixed; margin: auto;
bottom: 0; left: 0; right: 0; top: -550px;
height: 5px;
width: 0px;
opacity: 0;
background: linear-gradient(to right,#3d3029,#841b19, #e11f2b,#e01a29,#faf7ef);
animation-duration: 1s;
animation-delay: 8.5s;
animation-name: moving1;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.line2{
position: fixed; margin: auto;
bottom: -50; left: -900; right: 0; top: 0px;
height: 0px;
width: 5px;
opacity: 0;
background: linear-gradient(to bottom,#3d3029,#841b19, #e11f2b,#e01a29,#faf7ef);
animation-duration: 1s;
animation-delay: 8.5s;
animation-name: moving2;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.framed{
position: fixed; margin: auto;
bottom: -675px; left: 0; right: -625px; top: 0;
height: 350px; width: 350px;
background-image: url('http://i.picpar.com/9pXc.png');
background-repeat: no-repeat;
background-size: 200px;
transform: rotate(90deg);
opacity: 0;
animation-duration: 1s;
animation-delay: 9s;
animation-name: movec;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
/*--- background ---*/
.background{
position: fixed; margin: auto;
bottom: 0; left: 0; right: 0; top: 0;
height: 100%; width: 100%;
background-color: #faf7ef;
animation-duration: 0.2s;
animation-delay: 10s;
animation-name: nya;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
/*--- main dude ---*/
.image1{
position: fixed; margin: auto;
bottom: 0; left: 0; right: -100; top: 20;
height: 780px; width: 800px;
background-image: url('http://i.picpar.com/5Nod.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 800px;
}
/*--- music player ---*/
.musicplayer{
position: fixed; margin: auto;
top: -455px; right: -860px; bottom: 0; left: 0;
height: 35px; width: 35px;
background-image: url('http://i.picpar.com/AtXc.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
overflow: hidden;
animation-duration: 1s;
animation-name: shaker;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.music{
float: left;
margin-top: -4px;
margin-left: -2px;
height: 35px;
width: 35px;
overflow: hidden;
opacity: 0;
}
/* --- floaty boi & ooc click ---*/
.hiddenfornow{
position: fixed; margin: auto;
bottom: 0; top: 0; left: 0; right: 0;
height: 100%; width: 100%;
overflow: hidden;
animation-duration: 3s;
animation-delay: 6s;
animation-name: change3;
animation-fill-mode:  forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
#bouncy{
position: fixed; margin: auto;
bottom: 0; left: -35; right: 0; top: -50;
height: 200px; width: 200px;
animation-duration: 3s;
animation-delay: 6s;
animation-name: change;
animation-fill-mode:  forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
#glow{
float: left;
height: 200px; width: 200px;
background: radial-gradient(circle,#712227,#c90a1b,transparent,transparent,transparent);
animation-duration: 2s, 2s;
animation-delay: 0s, 0s;
animation-name: glowing, hovering;
animation-fill-mode: forwards, forwards;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, alternate;
}
#floaty{
margin-top: -260px;
margin-left: 5px;
display: block;
float: left;
height: 250px; width: 250px;
background-image: url('http://i.picpar.com/PcXc.gif');
background-repeat: no-repeat;
background-position: center;
background-size: 250px;
animation-duration: 2s, 4s;
animation-delay: 0s, 5s;
animation-name: hovering;
animation-fill-mode:  forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.ooc{
}
.glowya{
position: fixed; margin: auto;
bottom: 0; left: -865; right: 0; top: -515;
height: 200px; width: 200px;
animation-duration: 3s;
animation-delay: 6s;
animation-name: change2;
animation-fill-mode:  forwards;
animation-iteration-count: 1;
animation-direction: normal;
background: radial-gradient(circle,#712227,#c90a1b,transparent,transparent,transparent);
transition: .9s linear;
opacity: 0;
}
.ooc:hover .glowya{
opacity: 1;
height: 250px; width: 250px;
animation-duration: 1s;
animation-delay: 0s;
animation-name: glowing2;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-direction: alternate;
transition: .9s linear;
}
.gray{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
height: 100%; width: 100%;
background-color: rgba(366,366,366,.7);
opacity: 0;
visibility: hidden;
transition: .9s linear;
}
.outta:target .gray{
opacity: 1;
visibility: visible;
transition: .9s linear;
}
.smol{
position: fixed; margin: auto;
top: -140; left: 0; right: -60; bottom: 0;
height: 100px; width: 100px;
background-image: url('http://i.picpar.com/QcXc.gif');
background-repeat: no-repeat;
background-size: contain;
}
.smoltext{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: -125px;
height: 200px; width: 335px;
border-radius: 2px;
border: 1px solid #999;
box-shadow: 2px 2px 1px rgba(0,0,0,.5);
background: #fff;
padding: 10px;
text-align: justify;
font-family: karla;
font-size: 12px;
text-transform: normal;
color: #333;
line-height: 10px;
overflow: auto;
}
.smoltext span{
display: block;
height: 13px; width: 100%;
line-height: 13px;
text-align: center;
background: transparent;
color: #3d3029;
border-bottom: 1px solid #841B19;
font-family: merriweather;
font-size: 10.5px;
font-weight: 600;
font-style: italic;
margin-top: 2px;
margin-bottom: 2px;
text-transform: normal;
}
.oocframe{
position: fixed; margin: auto;
bottom: -275px; left: 0; right: -275px; top: 0;
height: 150px; width: 150px;
background-image: url('http://i.picpar.com/9pXc.png');
background-repeat: no-repeat;
background-size: 150px;
transform: rotate(90deg);
opacity: .6;
}
.oocframe2{
position: fixed; margin: auto;
bottom: -275px; left: -275px; right: 0; top: 0;
height: 150px; width: 150px;
background-image: url('http://i.picpar.com/9pXc.png');
background-repeat: no-repeat;
background-size: 150px;
transform: rotate(180deg);
opacity: .6;
}
/*--- gifs ---*/
.gifborder1a{
position: fixed; margin: auto;
top: -450px; left: -395px; bottom: 0; right: 0;
height: 50px; width: 50px;
border-top: 1px solid #3d3029;
border-right: 1px solid #3d3029;
opacity: 0;
animation-duration: 1s;
animation-delay: 11s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gifborder1b{
position: fixed; margin: auto;
top: -396px; left: -580px; bottom: 0; right: 0;
height: 50px; width: 50px;
border-bottom: 1px solid #3d3029;
border-left: 1px solid #3d3029;
opacity: 0;
animation-duration: 1s;
animation-delay: 11s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gif1{
position: fixed; margin: auto;
top: -425px; left: -485px; bottom: 0; right: 0;
height: 60px; width: 125px;
background-image: url('http://i.picpar.com/Sgad.gif');
background-repeat: no-repeat;
background-size: 125px;
opacity: 0;
animation-duration: 1s;
animation-delay: 12s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gifborder2a{
position: fixed; margin: auto;
top: -450px; left: -70px; bottom: 0; right: 0;
height: 50px; width: 50px;
border-top: 1px solid #841b19;
border-right: 1px solid #841b19;
opacity: 0;
animation-duration: 1s;
animation-delay: 13s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gifborder2b{
position: fixed; margin: auto;
top: -395px; left: -260px; bottom: 0; right: 0;
height: 50px; width: 50px;
border-bottom: 1px solid #841b19;
border-left: 1px solid #841b19;
opacity: 0;
animation-duration: 1s;
animation-delay: 13s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gif2{
position: fixed; margin: auto;
top: -425px; left: -160px; bottom: 0; right: 0;
height: 60px; width: 125px;
background-image: url('http://i.picpar.com/Rgad.gif');
background-repeat: no-repeat;
background-size: 125px;
opacity: 0;
animation-duration: 1s;
animation-delay: 14s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gifborder3a{
position: fixed; margin: auto;
top: -450px; left: 0px; bottom: 0; right: -257;
height: 50px; width: 50px;
border-top: 1px solid #e11f2b;
border-right: 1px solid #e11f2b;
opacity: 0;
animation-duration: 1s;
animation-delay: 15s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gifborder3b{
position: fixed; margin: auto;
top: -395px; left: 0px; bottom: 0; right: -65;
height: 50px; width: 50px;
border-bottom: 1px solid #e11f2b;
border-left: 1px solid #e11f2b;
opacity: 0;
animation-duration: 1s;
animation-delay: 15s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.gif3{
position: fixed; margin: auto;
top: -425px; left: 0; bottom: 0; right: -165;
height: 60px; width: 125px;
background-image: url('http://i.picpar.com/Qgad.gif');
background-repeat: no-repeat;
background-size: 125px;
opacity: 0;
animation-duration: 1s;
animation-delay: 16s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
/*--- tab ---*/
.tabbed{
height: 60px; width: 125px;
background-color: rgba(366,366,366,0);
line-height: 60px;
text-align: center;
font-family: merriweather;
font-size: 15px;
font-style: italic;
color: #3d3029;
opacity: 0;
transition: .9s linear;
}
.tabbed:hover{
background-color: rgba(366,366,366,.5);
opacity: 1;
transition: .9s linear;
}
.tabbed a{
color: #3d3029;
text-decoration: none;
border-bottom: 1px double #841B19;
transition: .9s linear;
}
.tabbed a:hover{
color: #e11f2b;
transition: .9s linear;
}
/*--- deco 1 ---*/
.linedup{
position: fixed; margin: auto;
top: -300px; left: -160px; right: 0px; bottom: 0px;
height: 1px; width: 0px;
background: linear-gradient(to right, #3d3029, #841B19, #e11f2b);
opacity: 0;
animation-duration: 5.5s;
animation-delay: 10s;
animation-name: waiting;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: steps(3, end);
}
.load-bird{
position: fixed; margin: auto;
top: -310px; left: -600px; right: 0px; bottom: 0px;
height: 60px; width: 60px;
background-image: url('http://i.picpar.com/QcXc.gif');
background-repeat: no-repeat;
background-size: 60px;
transform: scaleX(-1);
opacity: 0;
animation-duration: 0s, 11s, 0s;
animation-delay: 12s, 10s, 16s;
animation-name: phase-in, loooading, phase-out;
animation-fill-mode: forwards, forwards, forwards;
animation-iteration-count: 1, 1, 1;
animation-direction: normal, normal, normal;
}
.load-bird2{
position: fixed; margin: auto;
top: -310px; left: -600px; right: 0px; bottom: 0px;
height: 60px; width: 60px;
background-image: url('http://i.picpar.com/QcXc.gif');
background-repeat: no-repeat;
background-size: 60px;
transform: scaleX(-1);
opacity: 0;
}
.mystical:target .load-bird2{
animation-duration: .5s, 5s, 1s;
animation-delay: .1s, .1s, 5s;
animation-name: phase-in, loooading, phase-out;
animation-fill-mode: forwards, forwards, forwards;
animation-iteration-count: 1, 1, 1;
animation-direction: normal, normal, normal;
}
/*--- stats ---*/
.stat-title{
position: fixed; margin: auto;
top: -250px; left: -675px; bottom: 0; right: 0;
width: 180px; height: 40px;
line-height: 40px;
font-family: merriweather;
font-size: 23px;
font-weight: 100;
font-style: italic;
text-align: center;
letter-spacing: 2px;
opacity: 0;
animation-duration: 1s;
animation-delay: 14s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.stats{
position: fixed; margin: auto;
top: 0; left: -675px; right: 0; bottom: -225px;
height: 425px; width: 180px;
border-top: 1px solid #3d3029;
border-bottom: 1px solid #841B19;
overflow: hidden;
opacity: 0;
animation-duration: 1s;
animation-delay: 14s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.stats1{
height: 405px; width: 160px;
margin: 10px;
background-color: rgba(366,366,366,.6);
overflow: hidden;
}
.stats-box{
height: 385px; width: 140px;
margin: 10px;
line-height: 105%;
font-family: karla;
font-size: 11px;
color: #841B19;
text-transform: normal;
font-weight: 100;
text-align: justify;
overflow: auto;
}
.stats-box span{
display: block;
height: 13px; width: 100%;
line-height: 13px;
text-align: center;
background: transparent;
color: #3d3029;
border-bottom: 1px solid #841B19;
font-family: merriweather;
font-size: 10.5px;
font-weight: 600;
font-style: italic;
margin-top: 2px;
margin-bottom: 2px;
text-transform: lowercase;
}
/*--- main content box ---*/
.hero{
}
.mystical{
}
.mainy{
position: fixed; margin: auto;
top: 0; left: -100px; right: 0; bottom: -40px;
height: 240px; width: 300px;
border-top: 1px solid #3d3029;
border-bottom: 1px solid #841B19;
overflow: hidden;
opacity: 0;
animation-duration: 1s;
animation-delay: 15s;
animation-name: magic;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
.mainy-1{
position: fixed; margin: auto;
top: 0; left: -100px; right: 0; bottom: -40px;
height: 240px; width: 300px;
border-top: 1px solid #3d3029;
border-bottom: 1px solid #841B19;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: .9s linear;
}
.mystical:target .mainy-1{
opacity: 1; 
visibility: visible;
transition: .9s linear;
transition-delay: 3s;
}
.maintextback{
margin: 10px;
height: 220px; width: 280px;
background: rgba(366,366,366,0.6);
overflow: hidden;
}
.maintext{
height: 200px; width: 260px;
margin: 10px;
overflow: auto;
line-height: 105%;
font-family: karla;
font-size: 11px;
color: #3d3029;
text-transform: normal;
font-weight: 100;
text-align: justify;
}
.title{
position: fixed; margin: auto;
top: -250px; left: -100px; bottom: 0; right: 0;
width: 300px; height: 40px;
line-height: 40px;
font-family: merriweather;
font-size: 23px;
font-weight: 100;
font-style: italic;
text-align: center;
letter-spacing: 2px;
opacity: 0;
visibility: hidden;
transition: .9s linear;
}
.mystical:target .title{
opacity: 1;
visibility: visible;
transition: .9s linear;
transition-delay: 3s;
}
.title-frame{
position: fixed; margin: auto;
top: 0px; left: -375px; bottom: -250px; right: 0;
width: 100px; height: 100px;
background-image: url('http://i.picpar.com/9pXc.png');
background-repeat: no-repeat;
background-size: 100px;
transform: rotate(180deg);
opacity: 0;
visibility: hidden;
transition: .9s linear;
}
.mystical:target .title-frame{
opacity: 0.6;
visibility: visible;
transition: .9s linear;
transition-delay: 3s;
}
/*--- titles/bold etc ---*/
h1{
border-bottom: 1px solid #333;
text-align: center;
font-family: merriweather;
font-size: 13px;
font-weight: 100;
font-style: italic;
text-align: center;
letter-spacing: 2px;
padding: 2px;
}
b{
color:#3d3029;
font-weight: 600;
font-family: karla;
font-size: 12px;
}
i{
color:#e11f2b;
font-weight: 200;
font-family: merriweather;
font-size: 10px;
text-transform: lowercase;
}
a{
text-transform: normal;
text-decoration: none;
font-size: 12px;
font-family: merriweather;
font-weight: 200;
color: #3d3029;
border-bottom: 3px double #3d3029;
text-transform: lowercase;
transition: .9s linear;
}
a:hover{
color: #e01a29;
transition: .9s linear;
}
/*--- animations ---*/
@keyframes shaker{
  0% {
transform: rotate(-20deg);
  }
100%{
transform: rotate(20deg);
  }}
@keyframes hovering {
  0% {
top: -175;
  }
100%{
top: -50;
  }}
@keyframes glowing{
  0% {
height: 225px; width: 225px;
 }
100%{
height: 250px; width: 250px;
}}
@keyframes glowing2{
  0% {
height: 250px; width: 250px;
 }
100%{
height: 275px; width: 275px;
}}
@keyframes change {
  0% {
position: fixed; margin: auto;
bottom: 0; left: 0; right: -10; top: -50;
  }
100%{
position: fixed; margin: auto;
bottom: 0; left: -865; right: 0; top: -515;
  }}
@keyframes change2 {
  0% {
visibility: hidden;
  }
100%{
visibility: visible;
  }}
@keyframes change3 {
  0% {
visibility: visible;
  }
100%{
visibility: hidden;
  }}
@keyframes movea {
  0% {
width: 0px; opacity: 0;
  }
100%{
width: 500px; opacity: 1;
  }
}
@keyframes moveb {
  0% {
height: 0px; opacity: 0;
  }
100%{
height: 300px; opacity: 1;
  }
}
@keyframes movec {
  0% {
 opacity: 0;
  }
100%{
opacity: .6;
  }
}
@keyframes moving1 {
  0% {
width: 0px; opacity: 0;
  }
100%{
width: 900px; opacity: 1;
  }
}
@keyframes moving2 {
  0% {
height: 0px; opacity: 0;
  }
100%{
height: 600px; opacity: 1;
  }
}
@keyframes nya {
  0% {
height: 100%; width: 100%; bottom: 0;
  }
100%{
height: 600px; width: 900px; bottom: -50px;
  }
}
@keyframes magic {
  0% {
 opacity: 0;
  }
100%{
opacity: 1;
  }
}
@keyframes waiting {
  0% {
position: fixed; margin: auto;
top: -300px; left: -600px; right: 0px; bottom: 0px;
width: 0px;
opacity: 1;
  }
100%{
position: fixed; margin: auto;
top: -300px; left: -160px; right: 0px; bottom: 0px;
width: 475px;
opacity: 1;
  }
}
@keyframes phase-in {
  0% {
opacity: 0;
}
100%{
opacity: 1;
 }
}
@keyframes loooading {
  0% {
position: fixed; margin: auto;
top: -300px; left: -500px; right: 0px; bottom: 0px;
  }
100%{
position: fixed; margin: auto;
top: -300px; left: 0px; right: -325px; bottom: 0px;
  }
}
@keyframes phase-out {
  0% {
opacity: 1;
}
100%{
opacity: 0;
 }
}
/* --- end of animations --- */
</style>
<div class="background"></div>
<div class="line1"></div><div class="line2"></div>
<div class="linedup"></div>
<div class="gifborder3a"></div>
<div class="mainy"></div>
<div class="image1"></div>
<div class="mystical" id="1">
<div class="load-bird2"></div>
<div class="title">Background</div>
<div class="mainy-1"><div class="maintextback">
<div class="maintext">
<h1>Red Mage Hero</h1>
<b>T</b>he Warrior of Light, once slow to accept and uncertain about his role, has proven himself Eorzea's greatest hero at every opportunity. Joining the Scions of the Seventh Dawn, rallying the Grand Companies, pulling Ishgard away from isolation into open relations with dragons and the other city-states, and even driving the Garlean Empire out of Doma and Ala Mhigo have allowed him to pick up allies and firm believers in his title. Friendly, determined, and often a bit melodramatic in physically expressing his reactions, C'hai Tia has a bright and inviting personality that sometimes makes it a little too easy for people to push their problems and requests off on him.
</div></div></div>
<a href="#">
<div class="title-frame"></div>
</a>
</div>
<div class="mystical" id="2">
<div class="load-bird2"></div>
<div class="title">Relationships</div>
<div class="mainy-1"><div class="maintextback">
<div class="maintext">
<h1>The Seventh Dawn</h1>
Seeking Scions to fill this out with.
</div></div></div>
<a href="#">
<div class="title-frame"></div>
</a>
</div>
<div class="mystical" id="3">
<div class="load-bird2"></div>
<div class="title">Combat</div>
<div class="mainy-1"><div class="maintextback">
<div class="maintext">
<h1>Juggling Black and White</h1>
C'hai started on a very different path than the one he walks now. In the beginning he was a white mage and sometimes scholar that buried his nose in tomes and studied the nature of aether. He relied on abilities to mitigate the destructive force of primals and monsters, but once he realized his lack of output turned to the study of black magic. Through another set of trials, he worked hard until he held a firm grasp on this second school of magic, then proceeded to the next and did this time and time again until meeting a red duelist that inspired him to join his learnings into a single discipline. Becoming a Red Mage, C'hai found a way to channel his energies of black and white into a single crystal and unload it with a sword into dazzling displays of blade and magic. 
</div></div></div>
<a href="#">
<div class="title-frame"></div>
</a>
</div>
<div class="linea"></div><div class="lineb"></div>
<div class="Framed"></div>
<div class="gifborder1a"></div>
<div class="gifborder1b"></div>
<div class="gif1">
<div class="tabbed">
<a href="#1">
Background.
</a></div>
</div>
<div class="gifborder2a"></div>
<div class="gifborder2b"></div>
<div class="gif2">
<div class="tabbed">
<a href="#2">
Relationships.
</a></div>
</div>
<div class="gifborder3b"></div>
<div class="gif3">
<div class="tabbed"><a href="#3">
Combat.
</a></div>
</div>
<a href="#character">
<div class="ooc">
<div class="glowya"></div>
<div id="bouncy">
<div id="glow"></div>
<div id="floaty"></div>
</div>
</div>
</a>
<div class="load-bird"></div>
<div class="stat-title">Stats</div>
<div class="stats"><div class="stats1">
<div class="stats-box">
<span>Name:</span>
C'hai Tia<br>
<span>Gender:</span>
Male<br>
<span>Race:</span>
Miqo'te<br>
<span>Clan:</span>
Seekers of the Sun<br>
<span>Height:</span>
5'10<br>
<span>Weight:</span>
163lbs<br>
<span>Class:</span>
Red Mage (Obviously)<br>
<span>Grand Company:</span>
Twin Adder<br>
<span>Orientation:</span>
Demisexual<br>
<span>Status:</span>
Single<br>
</div>
</div></div>
<div class="outta" id="character">
<div class="gray">
<div class="oocframe2"></div>
<div class="smoltext">
<span>rule 01</span>
PM friendly<br>
<span>rule 02</span>
Long-term/Short-term okay<br>
<span>rule 03</span>
FFXIV characters adored, but crossovers welcome.<br>
<span>rule 04</span>
<br>
<span>rule 05</span>
rule information here.<br>
<span>rule 06</span>
code by <a target="_blank" href="https://roleplay.chat/profile.php?user=Juice" target="_blank">juice.</a> donut steal.
<br>
</div>
<a href="#">
<div class="smol"></div>
</a>
<div class="oocframe"></div>
</div>
</div>
<div class="hiddenfornow"></div>
<div class="musicplayer" title="Hear. Feel. Think.">
<div class="music">
<audio controls>
<source src="https://files.catbox.moe/zvnpgi.mp3">
</audio>
</div>
</div>