Gumi!

<style>
    @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Cabin&family=Iceland&family=Inconsolata&family=Montserrat+Subrayada&family=Nunito&family=Nunito+Sans&family=Pacifico&family=Quicksand&family=Rubik&family=VT323&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Coda&family=Iceland&family=Sacramento&family=Squada+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Changa+One&family=Coda:wght@400;800&family=Rowdies:wght@300;400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto+Condensed&family=Varta&display=swap');
 ::-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: rgb(70, 119, 103);
    }

    @keyframes fadeinout{
        0%{opacity: 0;}
        30%{opacity: 1;}
        80%{opacity: 1;}
        100%{opacity: 0;}
    }

    @keyframes colorscheme{
        0%{filter:invert(0);}
        100%{filter:invert(1);}
    }

    @keyframes fadein{
        0%{opacity: 0;z-index: 0;}
        100%{opacity: 1;z-index: 5;}
    }
    @keyframes fadeout{
        0%{opacity: 1;}
        100%{opacity: 0;}
    }

    @keyframes gumimage{
        0%{right:-50vw;z-index: -1;}
        50%{z-index: 10;}
        100%{right: 7vw;z-index: 10;}
    }

    @keyframes guminfobox{
        0%{left:-70vw;z-index: -1;}
        50%{z-index: 9;}
        100%{left:20vw;z-index: 9;}
    }

    @keyframes title2{
        0%{left: -70vw;z-index: -1;}
        50%{z-index: 10;}
        100%{left: 20vw;z-index: 10;}
    }


    #fodder:target~#gumimask{animation:colorscheme 0.5s 1;animation-delay: 5.5s;animation-fill-mode: both;}
    #fodder:target{animation: fadeout .5s 1;animation-delay:2s;animation-fill-mode: both;}
    #fodder:target~#ooc{animation: fadeout .5s 1;animation-delay:2s;animation-fill-mode: both;}
    #fodder:target~#title{animation: fadeout .5s 1;animation-delay:2s;animation-fill-mode: both;}
    #fodder:target~#ready{animation: fadeinout 4s 1;animation-delay: 3s;animation-fill-mode: both;}
    #fodder:target~#letsgo{animation: fadeinout 4s 1;animation-delay: 6.5s;animation-fill-mode: both;}
    #fodder:target~#body{animation: fadein 2s 1;animation-delay: 8s;animation-fill-mode: both;}
    #fodder:target~#image{animation: gumimage 2s 1;animation-delay: 9s;animation-fill-mode: both;}
    #fodder:target~#infobox{animation: guminfobox 2s 1;animation-delay: 9s;animation-fill-mode: both;}
    #fodder:target~#title2{animation: title2 2s 1;animation-delay: 9s;animation-fill-mode: both;}


    #fodder{
        position: fixed;
        z-index: 3;
        transform: rotate(8deg);
        opacity: 1;
        height: 8vh;
        width: 8vw;
        top: 55vh;
        left: 30vw;
    }

    #gumimask{
        position: fixed;
        z-index: 1;
        background: url(https://i.imgur.com/V645vxJ.png);
        background-position: center;
        background-size: cover;
        height: 100vh;
        width:100vw;
        left:0vw;
        top:0vh;
        filter: invert(0);
    }



    #ooc{
        position: fixed;
        z-index: 2;
        transform: rotate(8deg);
        background: rgb(84, 148, 92);
        border: .5vh rgb(43, 32, 24) solid;
        height: 20vh;
        width: 30vw;
        top: 30vh;
        left: 10vw;
        font-family: 'Iceland';
        font-size: 2.25vh;
        color: #fff;
    }

    #title{
        position: fixed;
        z-index: 3;
        opacity: 1;
        transform: rotate(8deg);
        color: rgb(43, 32, 24);
        height: 10vh;
        width: 30vw;
        top: 20vh;
        left: 11vw;
        font-family: 'Squada One';
        font-size: 12vh;
    }


    .start{
        position: absolute;
        color: #fff;
        font-family: 'Squada One';
        text-align: center;
        font-size: 6vh;
    }

    #ready{
        position: fixed;
        z-index: 1;
        height: 20vh;
        width: 30vw;
        top: 40vh;
        left:10vw;
        font-family: 'VT323';
        font-size: 10vh;
        color: #fff;
        opacity: 0;
    }

    #letsgo{
        position: fixed;
        z-index: 1;
        height: 20vh;
        width: 30vw;
        top: 40vh;
        left:10vw;
        font-family: 'VT323';
        font-size: 10vh;
        color: #000;
        opacity: 0;
    }

    #body{
        position: fixed;
        background:#ebe8c6;
        height: 100vh;
        width: 100vw;
        left: 0vw;
        top: 0vh;
    }


    #image{
        position: fixed;
        top: 0vh;
        filter: drop-shadow(2vh 2vh .25vh #878b92);
    }
    #image img{
        height: 100vh;
    }

    #title2{
        position: fixed;
        height: 15vh;
        width: 40vw;
        top: 28vh;
        font-family: 'Changa One';
        font-size: 16vh;
        color: #FEFEF6;
        text-shadow: 0 0 .5vh rgb(138, 138, 138);
    }


    #infobox{
        position: fixed;
        background: #C2C671;
        height: 40vh;
        bottom: 20vh;
        width: 60vw;
        box-shadow: 2vh 2vh .25vh #878b92;
        overflow: auto;
    }

    #info1, #info2, #info3, #info4{
        position: absolute;
        background: #87a55f;
        padding: .5%;
        box-shadow: 0vh 0vh .5vh rgb(138, 138, 138);
        height: 35vh;
        width: 18vw;
        font-family: 'Roboto Condensed';
        font-size: 2vh;
        color: #fff;
        overflow: auto;
    }

    #info1{
        top: 6vh;
        left: 3vw;
    }

    #info2{
        top: 38vh;
        left: 23vw;
    }

    #info3{
        top: 70vh;
        left: 3vw;
    }

    #info4{
        top: 102vh;
        left: 23vw;
    }

    #imgur1, #imgur2, #imgur3, #imgur4{
        position: absolute;
        width: 18vw;
        padding: .5%;
        box-shadow: 0vh 0vh .5vh rgb(138, 138, 138);
    }
    #imgur1{
        background: url(https://i.imgur.com/3j16zgP.png);
        background-size: cover;
        background-position: 0% 5%;
        height: 28vh;
        top: 6vh;
        left: 23vw;
    }
    #imgur2{
        background: url(https://i.imgur.com/WKcnEIT.png);
        background-size: cover;
        background-position: 0% 5%;
        height: 20vh;
        top: 45.5vh;
        left: 3vw;
    }
    #imgur3{
        background: url(https://i.imgur.com/KmPq2Ef.png);
        background-size: cover;
        background-position: 0% 5%;
        height: 20vh;
        top:77.5vh;
        left: 23vw;
    }
    #imgur4{
        background: url(https://i.imgur.com/0Gtf7kE.png);
        background-size: cover;
        background-position: 0% 5%;
        height: 25vh;
        top: 109.5vh;
        left: 3vw;
    }



    h1{
        font-family: 'Rowdies';
        font-size: 4vh;
        color: #fff;
        font-weight: lighter;
        text-align: center;
    }

    .r{float: right;}
    a{color: #fff;text-decoration: underline;transition: 0.3s;}
    a:hover{text-shadow: 0 0 1vh #fff; transition: 0.3s;}
    .friend{height: 10vh;width:10vh;}

</style>

<div id="fodder">
    <a href="#fodder">
        <div class="start">Start?</div
    ></a>
</div>
<div id="gumimask"></div>

<div id="title">GUMI</div>


<div id="ooc">
    <ol>
    <li>Wheaton's Law.</li>
    <li>In Room Approach.</li>
    <li>Lorem Ipsum</li>
    <li>Delor Sit Amet</li>
    <li>Small OOC Snippets.</li>
    </ol><br>
</div>

<div id="ready">
    Ready, Set...
</div>

<div id="letsgo">
    It's Gumi Time!
</div>

<div id="body"></div>

<div id="image">
    <img src="https://i.imgur.com/3lnXjOS.png">
</div>
<div id="title2">GUMI!</div>



<div id="infobox">
    <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. 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.</p>
    </div>

    <div id="imgur1"></div>

    <div id="info2">
        <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="imgur2"></div>

    <div id="info3">
        <h1>Notes?</h1>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li>Layout was built by <a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes">From Shadows</a> for Gumi's use <u>only!</u> Please do not steal or appropriate.</li>
        </ol>
    </div>

    <div id="imgur3"></div>

    <div id="info4">
        <h1>Friends?</h1>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
        <a href="FRIEND LINK HERE"><img src="friendpichere" class="friend"></a>
    </div>

    <div id="imgur4"></div>
</div>