Rhaul

<style>
    @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: #523A2E;
    }

    .bar{
        position: fixed;
        height: 80vh;
        width: 100vw;
        bottom: 10vh;
        left: 0vw;
        background: #221816;
    }


    .image{
        position: fixed;
        bottom: 0vh;
        right: 2.5vw;
        filter: drop-shadow(0 0 1vh #000);
        z-index: 3;
    }

    .image img{
        height: 90vh;
    }

    #title{
        position: fixed;
        color: #F7EEB9;
        height: 20vh;
        width: 70vw;
        top: 15vh;
        left: 2.5vw;
        font-family: 'Brilliantte';
        font-size: 18vh;
        text-shadow: 0 0 1vh #000;
        text-align: center;
        z-index: 2;
    }


    #box1, #box2, #box3, #box4, #box5{
        position: fixed;
        padding: .5%;
        background: #C18D5D;
        box-shadow: 0 0 1vh #000;
        z-index: 1;
        font-family: 'Whitney';
        font-size: 2vh;
        color:#221816;
        overflow: auto;
    }

    #box1, #box2{
        height: 25vh;
        width: 25.75vw;
        bottom: 39vh;
    }

    #box1{left: 10.5vw;}
    #box2{left: 38.25vw;}

    #box3, #box4, #box5{
        height: 22.4vh;
        width: 16.5vw;
        bottom: 12.5vh;
    }
    #box3{left: 10.5vw;}
    #box4{left: 29vw;}
    #box5{left: 47.5vw;}


    h1{
        font-size: 4.5vh;
        font-weight: lighter;
        border-bottom: .25vh #221816 solid;
    }

    h2{
        font-size: 3vh;
        font-weight: lighter;
        border-bottom: .15vh #221816 solid;
    }

    a{
        text-decoration: underline;
        transition: 0.2s;
        color:#221816;
    }

    a:hover{
        color: #fff;
        transition: 0.2s;
    }

    .r{float: right;text-align: right;}


    .friend{height: 10vh;}


</style>

<div class="bar"></div>
<div class="image">
    <img src="https://i.imgur.com/oU5Vtv7.png">
</div>

<div id="title">Rhaul Abednago</div>

<div id="box1">
<h1>Stats</h1>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
<br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
<br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
Name:<div class="r">Stat</div><br>
</div>


<div id="box2">
    <h1>Story</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales ut eu sem integer vitae justo eget magna fermentum. Odio tempor orci dapibus ultrices in iaculis nunc sed. Ut sem viverra aliquet eget sit amet tellus. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Orci sagittis eu volutpat odio facilisis mauris sit amet. Nisl vel pretium lectus quam id. Sed libero enim sed faucibus turpis in. Viverra nam libero justo laoreet sit amet. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id diam maecenas ultricies mi eget. Id leo in vitae turpis. Faucibus in ornare quam viverra orci sagittis eu. Nunc sed velit dignissim sodales ut eu sem integer. Est ultricies integer quis auctor elit sed vulputate mi sit.</p>

    <p>Leo urna molestie at elementum eu. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Dui id ornare arcu odio ut sem nulla pharetra diam. Integer vitae justo eget magna fermentum. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Etiam sit amet nisl purus. Nullam non nisi est sit amet facilisis magna etiam. Penatibus et magnis dis parturient montes nascetur ridiculus mus. Gravida neque convallis a cras semper auctor neque vitae tempus. Mauris a diam maecenas sed enim ut sem viverra.</p>

    <p>Augue eget arcu dictum varius duis. Elit sed vulputate mi sit amet mauris commodo quis imperdiet. In fermentum posuere urna nec tincidunt praesent semper. Enim neque volutpat ac tincidunt vitae semper. Eleifend mi in nulla posuere. Elementum integer enim neque volutpat ac tincidunt. Turpis egestas integer eget aliquet nibh. Vestibulum rhoncus est pellentesque elit ullamcorper. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Tortor at risus viverra adipiscing at in tellus integer feugiat. Etiam erat velit scelerisque in dictum. Turpis cursus in hac habitasse platea dictumst. Orci porta non pulvinar neque laoreet suspendisse interdum. Consequat mauris nunc congue nisi vitae.</p>
</div>


<div id="box3">
    <h2>Notes</h2>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>


<div id="box4">
<h2>OOC</h2>
<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>This layout was constructed by <a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Rhaul's use only. Please do not steal or appropriate.</li>
</ol>
</div>


<div id="box5">
    <h1>Friends</h1>
    <img src="" class="friend"><div class="r">Smol Descrip</div>
    <br><br><br>
    <img src="" class="friend"><div class="r">Smol Descrip</div>
    <br><br><br>
    <img src="" class="friend"><div class="r">Smol Descrip</div>
    <br><br><br>
</div>