Tsushi Tosho

<style>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Arizonia|Calligraffitti|Ma+Shan+Zheng&display=swap');
 @import url('https://www.themonster.xyz/styles/fancy-fonts.css');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


body{
background: linear-gradient(-65deg, #7ca0c4, #d1e8ff, #7ca0c4);
}


@keyframes sushi1{
0%{transform:rotate(-25deg);}
50%{transform:rotate(25deg);}
100%{transform:rotate(-25deg);}
}


@keyframes sushi2{
0%{transform:rotate(25deg);}
50%{transform:rotate(-25deg);}
100%{transform:rotate(25deg);}
}

.appear{opacity: 0; z-index: 3; transition: 2s;}
.appear:target{opacity: 1; z-index: 5; transition: 2s;}

#image{
position: fixed;
z-index: 5;
bottom: 12.5vh;
right: 15vw;
box-shadow: 0 0 .5vh #000;
}

#image img{
height: 75vh;
}

#box{
position: fixed;
height: 85vh;
bottom: 7.5vh;
width: 75vw;
left: 12.5vw;
background: #d1a9b2;
box-shadow: 0 0 1.5vh #000;
}

#info{
position: fixed;
background: #5a8894;
height: 53vh;
bottom: 23vh;
left: 16vw;
width: 38vw;
box-shadow: 0 0 .5vh #000;
}

#info1, #info2, #info3, #info4{
position: fixed;
bottom: 25vh;
left: 17vw;
height: 50vh;
width: 35vw;
color: #fff;
text-shadow: 0 0 .25vh #000;
font-family: 'Whitney';
font-size: 2.5vh;
}

h1{
font-family: 'Alex Brush';
font-size: 6vh;
font-weight: lighter;
}

#nav1, #nav2, #nav3, #nav4{
position: fixed;
left: 9vw;
transition: 0.2s;
}

#nav1, #nav3{
animation: sushi1 3.5s infinite ease-in-out;
animation-fill-mode: both;
}

#nav2, #nav4{
animation: sushi2 3.5s infinite ease-in-out;
animation-fill-mode: both;
}

#nav1{top: 25vh;}
#nav1 img{height: 12vh;}
#nav1:hover{filter:drop-shadow(0 0 1vh #fff);transition: 0.2s;}
#nav2{top: 38vh;}
#nav2 img{height: 12vh;}
#nav2:hover{filter:drop-shadow(0 0 1vh #fff);transition: 0.2s;}
#nav3{top: 51vh;}
#nav3 img{height: 12vh;}
#nav3:hover{filter:drop-shadow(0 0 1vh #fff);transition: 0.2s;}
#nav4{top: 64vh;}
#nav4 img{height: 12vh;}
#nav4:hover{filter:drop-shadow(0 0 1vh #fff);transition: 0.2s;}

#title{
position: fixed;
z-index: 5;
text-align: center;
color: #fff;
font-family: 'Arizonia';
font-size: 15vh;
text-shadow: 0 0 .5vh #000;
height: 15vh;
width: 38vw;
left: 16vw;
top: 10vh;
}

a{
font-family: 'Calligraffitti';
color: #fff;
font-size: 2vh;
transition: 0.4s;
text-decoration: none;
}

a:hover{
color: #ffd4dc;
transition: 0.4s;
text-shadow: 0 0 1vh #ffd4dc;
}

.r{float:right}


</style>

<div id="image"><img src="https://i.imgur.com/yetwuzp.png"></div>
<div id="box"></div>
<a href="#info1"><div id="nav1"><img src="https://i.imgur.com/I8jFE06.png?1"></div></a>
<a href="#info2"><div id="nav2"><img src="https://i.imgur.com/I8jFE06.png?1"></div></a>
<a href="#info3"><div id="nav3"><img src="https://i.imgur.com/I8jFE06.png?1"></div></a>
<a href="#info4"><div id="nav4"><img src="https://i.imgur.com/I8jFE06.png?1"></div></a>


<div id="title">Tsushi Tosho</div>
<div id="info"></div>



<div id="info1" class="appear">
<h1>The Story</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="info2" class="appear">
<h1>Dossier</h1>
Name:<div class="r">Tsushi Tosho</div><br>
Age:<div class="r">18</div><br>
Gender:<div class="r">Female</div><br>
Race:<div class="r">Au'ra, Raen</div><br>
Height:<div class="r">5'0"</div><br>
Weight:<div class="r">98 lbs.</div><br>
Job:<div class="r"> Complicated. Is trained under the Dark Knight discipline.</div><br>
Orientation:<div class="r">Homoflexible</div><br>
Status:<div class="r">Wandering</div><br>
</div>

<div id="info3" class="appear">
<h1>Notes</h1>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>

<div id="info4" class="appear">
<h1>Out of Character!</h1>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>This layout was made by <a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Tsushi's use. Please do not steal or use without permission!</li>
</div>