Gaius

<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: url(https://www.bellacor.com/media.bellacor.com/images/1500/238801SK34736.jpg);
        background-position: center;
        background-size: 30%;
    }

    #mainimage{
        position: fixed;
        z-index: 10;
        top: 5vh;
        left: 5vw;
        filter: drop-shadow(0 0 1vh #000);
    }

    #mainimage img{
        height: 90vh;
    }


    #box{
        position: fixed;
        background: #1f2129;
        z-index: 1;
        height: 60vh;
        width: 70vw;
        bottom: 20vh;
        left: 15vw;
    }

    #title{
        position: fixed;
        z-index: 5;
        top: 15vh;
        width: 60vw;
        right: 16vw;
        height: 15vh;
        font-family: 'Ailerons';
        font-size: 12.5vh;
        color: #fff;
        text-align: right;
    }


    #info1, #info2, #info3{
        position: fixed;
        background: #585d66;
        z-index: 2;
        padding: .5%;
        font-family: 'Whitney';
        font-size: 1.5vh;
        color: #fff;
        overflow: auto;
    }

    #info1{
        width: 40vw;
        height: 20vh;
        right: 16vw;
        top: 30vh;
    }

    #info2, #info3{
        height: 20vh;
        width: 19vw;
        bottom: 24vh;
    }

    #info2{right: 37vw;}
    #info3{right: 16vw;}

    h1{
        font-family: 'Above';
        font-size: 4vh;
        font-weight: lighter;
        border-bottom: .25vh #fff solid;
    }

    .r{float: right;}


    #credit {
        z-index:1;
        position:fixed;
        height:15vh;
        bottom:0%;
        right: .5vw;
        filter: drop-shadow(0 0 1vh #fff);
    }

    a{
        color: #fff;
        text-decoration: underline;
        transition: 0.3s;
    }
    a:hover{
        color: #c9d8f2;
        transition: 0.3s;
    }

</style>

<div id="mainimage">
    <img src="https://i.imgur.com/Arq3cSw.png">
</div>
<div id="title">Gaius Worzel</div>
<div id="box"></div>

<div id="info1">
    <h1>Story</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Molestie ac feugiat sed lectus vestibulum mattis. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Orci ac auctor augue mauris. Facilisis gravida neque convallis a cras semper. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Enim neque volutpat ac tincidunt vitae semper quis. Consectetur adipiscing elit pellentesque habitant morbi tristique. Risus commodo viverra maecenas accumsan lacus vel facilisis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Volutpat maecenas volutpat blandit aliquam etiam erat velit. Varius quam quisque id diam vel. Vitae turpis massa sed elementum tempus egestas.</p>

    <p>Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Quisque egestas diam in arcu cursus euismod quis viverra. Nisi est sit amet facilisis magna etiam tempor orci. At risus viverra adipiscing at in tellus integer. In fermentum et sollicitudin ac orci phasellus. Pulvinar proin gravida hendrerit lectus. Volutpat consequat mauris nunc congue nisi vitae. Aliquam vestibulum morbi blandit cursus risus at. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Risus quis varius quam quisque id. Proin nibh nisl condimentum id.</p>

    <p>Id diam maecenas ultricies mi eget. Diam ut venenatis tellus in metus vulputate eu scelerisque. Venenatis a condimentum vitae sapien pellentesque habitant morbi. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Viverra justo nec ultrices dui sapien eget mi proin sed. Non curabitur gravida arcu ac tortor dignissim convallis. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Adipiscing elit pellentesque habitant morbi. Enim blandit volutpat maecenas volutpat blandit. Tincidunt eget nullam non nisi est sit amet.</p>
</div>


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


<div id="info3">
    <h1>OOC</h1>
    <ol>
        <li>Normal <i>italic</i> <b>bold</b> <a href="">link</a></li><br>
        <li></li><br>
        <li></li><br>
        <li></li><br>
        <li></li><br>
        <li></li><br>
    </ol>
</div>


<a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="This layout was constructed for the express use of Gaius Worzel. Do not use without his permission. Please, do not steal or appropriate this layout. Thank you.">
    <img src="https://i.imgur.com/A9wLMgS.png" id="credit"/>
    </a>