Hidden Light

<style>
    @import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Dynalight|Great+Vibes|Italianno|Meie+Script|Parisienne|Petit+Formal+Script|Ruthie&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300|Chathura|Marvel|Open+Sans:300&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;}

    #background{
    position: fixed;
    background: url(https://i.imgur.com/7Zltoa8.jpg);
    background-size: cover;
    background-position: fixed;
    filter: blur(10px);
    top: -5vh;
    left:-5vw;
    width: 110vw;
    height: 110vh;
    z-index: -1vh;
    }

    #image{
    position: fixed;
    background: url(https://i.imgur.com/4rIeJh3.jpg);
    background-size: cover;
    background-position: top center;
    bottom: 10vh;
    right: 7vw;
    box-shadow: 0 0 2vh #000;
    z-index: 5;
    height: 80vh;
    width: 80vh;
    }


    #box{
    position: fixed;
    background: rgba(113, 86, 167, 0.5);
    box-shadow: 0 0 2vh #000;
    z-index: 2;
    height: 80vh;
    width: 85vh;
    bottom: 10vh;
    left: 7vw;
    }

    #info{
    position: fixed;
    background: #7d56b1;
    z-index: 3;
    padding: 1%;
    width: 75.5vh;
    bottom: 20vh;
    left: 8vw;
    height: 50vh;
    color: #fff;
    text-shadow: 0 .5vh 1vh #000;
    font-family: 'Open Sans';
    font-size: 2vh;
    }


    h1{
    font-family: 'Dynalight';
    font-size: 4vh;
    font-weight: lighter;
    }

    a{
    text-decoration: underline;
    color: #fff;
    transition: 0.5s;
    }
    a:hover{
    transition: 0.5s;
    color: #d6b1e6;
    text-shadow: 0 0 1vh #d6b1e6;
    }


    #nav1, #nav2, #nav3, #nav4{
    position: fixed;
    z-index: 6;
    right: 45vw;
    }

    #nav1{transition: 0.5s; top: 25.5vh;animation: nav1 2s 1;animation-fill-mode: both;animation-delay: 2.5s;}
    #nav1 img{height: 12vh;}
    #nav1:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

    #nav2{transition: 0.5s; top: 36.5vh;animation: nav2 2s 1;animation-fill-mode: both;animation-delay: 2.25s;}
    #nav2 img{height: 12vh;}
    #nav2:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

    #nav3{transition: 0.5s; top: 47.5vh;animation: nav3 2s 1;animation-fill-mode: both;animation-delay: 2s;}
    #nav3 img{height: 12vh;}
    #nav3:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

    #nav4{transition: 0.5s; top: 58.5vh;animation: nav4 2s 1;animation-fill-mode: both;animation-delay: 1.75s;}
    #nav4 img{height: 12vh;}
    #nav4:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

    #title{
    position: fixed;
    z-index: 5;
    height: 20vh;
    width: 100vh;
    top: 9vh;
    left: 2.5vw;
    padding: 1%;
    text-align: center;
    font-family: 'Ruthie';
    font-size: 19vh;
    color: #000;
    text-shadow: 0 0 1vh #000;
    animation: titlemove 2s 1;
    animation-fill-mode: both;
    animation-delay: 1.5s;
    }

    #img1, #img2, #img3, #img4, #img5, #imgetc{
    position: fixed;
    z-index: 3;
    top: 78vh;
    height: 6vh;
    width: 5vw;
    animation: image 2s 1;
    animation-fill-mode: both;
    }

    #img1{
    background: url(https://i.imgur.com/e7HYKin.jpg);
    background-size: cover;
    background-position: top;
    left: 9.35vw;
    transition: 0.5s;
    animation-delay: 3s;
    }
    #img1:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    #img2{
    background: url(https://i.imgur.com/ATcYCqY.png);
    background-size: cover;
    background-position: top;
    left: 15.35vw;
    transition: 0.5s;
    animation-delay: 3.2s;
    }
    #img2:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    #img3{
    background: url(https://i.imgur.com/EJNroGN.jpg);
    background-size: cover;
    background-position: top;
    left: 21.35vw;
    transition: 0.5s;
    animation-delay: 3.4s;
    }
    #img3:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    #img4{
    background: url(https://i.imgur.com/HcL37Ve.png);
    background-size: cover;
    background-position: top;
    left: 27.35vw;
    transition: 0.5s;
    animation-delay: 3.6s;
    }
    #img4:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    #img5{
    background: url(https://i.imgur.com/xlobE6Y.jpg);
    background-size: cover;
    background-position: top;
    left: 33.35vw;
    transition: 0.5s;
    animation-delay: 3.8s;
    }
    #img5:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    #imgetc{
    background: url(https://i.imgur.com/eVpWZTp.png);
    background-color: #ac71dd;
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: center;
    left: 39.35vw;
    transition: 0.5s;
    animation-delay: 4s;
    }
    #imgetc:hover{
    transition: 0.5s;
    box-shadow: 0 0 1vh #fff;
    height: 12vh;
    }

    o{
    filter: blur(5px);
    }


    </style>
    <div id="nav1"><a href="#one"><img src="https://i.imgur.com/iusALTX.png"></a></div>
    <div id="nav2"><a href="#two"><img src="https://i.imgur.com/iusALTX.png"></a></div>
    <div id="nav3"><a href="#three"><img src="https://i.imgur.com/iusALTX.png"></a></div>
    <div id="nav4"><a href="#four"><img src="https://i.imgur.com/iusALTX.png"></a></div>

    <a target="_blank" href="https://i.imgur.com/e7HYKin.jpg"><div id="img1"></div></a>
    <a target="_blank" href="https://i.imgur.com/ATcYCqY.png"><div id="img2"></div></a>
    <a target="_blank" href="https://i.imgur.com/EJNroGN.jpg"><div id="img3"></div></a>
    <a target="_blank" href="https://i.imgur.com/HcL37Ve.png"><div id="img4"></div></a>
    <a target="_blank" href="https://i.imgur.com/xlobE6Y.jpg"><div id="img5"></div></a>
    <a target="_blank" href="https://imgur.com/a/Eg2RLDd"><div id="imgetc"></div></a>


    <div id="background"></div>
    <div id="image"></div>
    <div id="title">Hidden Light</div>


    <div id="box"></div>
    <div id="info">
    <div style="height: 100%; overflow-y: hidden;">

     <a name="one"></a>
     <div style="width:100%; height: 100%; overflow: auto; " align="center">
        <br>
     <h1>My name is Bella.</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est lorem ipsum. Nullam vehicula ipsum a arcu cursus vitae congue. Ut lectus arcu bibendum at varius vel. Elementum curabitur vitae nunc sed velit. Egestas pretium aenean pharetra magna. Amet volutpat consequat mauris nunc congue nisi vitae. Eros donec ac odio tempor orci. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Molestie ac feugiat sed lectus vestibulum mattis. At varius vel pharetra vel turpis nunc eget lorem. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Bibendum ut tristique et egestas quis. Consequat id porta nibh venenatis cras. Donec enim diam vulputate ut pharetra sit amet.</p>

        <p>Sit amet venenatis urna cursus eget nunc. Donec et odio pellentesque diam volutpat. Quis imperdiet massa tincidunt nunc. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Cursus eget nunc scelerisque viverra mauris in. Tellus orci ac auctor augue mauris augue neque gravida in. Tincidunt arcu non sodales neque sodales ut etiam sit. Eget magna fermentum iaculis eu non. Proin libero nunc consequat interdum varius sit amet. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Rhoncus dolor purus non enim praesent elementum facilisis leo. Ultrices gravida dictum fusce ut placerat orci. Etiam sit amet nisl purus in mollis.</p>

        <p>Libero enim sed faucibus turpis in eu mi. Aliquet porttitor lacus luctus accumsan tortor. Sodales ut etiam sit amet. Aliquet eget sit amet tellus cras adipiscing. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Amet dictum sit amet justo donec enim diam. Ut morbi tincidunt augue interdum. Lacus sed turpis tincidunt id aliquet risus feugiat in. In metus vulputate eu scelerisque felis. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Eu non diam phasellus vestibulum lorem sed risus ultricies. Risus pretium quam vulputate dignissim. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio.</p>
     </div>

     <a name="two"></a>
     <div style="width:100%; height: 100%; overflow: auto; " align="center">
     <h1>Dossier</h1>
    Name: Bella<br>
    Age: Stat<br>
    Gender: Stat<br>
    Race: Stat<br>
    Height: Stat<br>
    <br>
    Occupation(s): Stat<br>
    Orientation: Stat<br>
    Status: Stat<br>
    Preference: Stat<br>
    <br><br>

     </div>

    <a name="three"></a>
     <div style="width:100%; height: 100%; overflow: auto; " align="center">
     <h1>Notes and Headcanons</h1>
    <li></li>
    <br>
    <li></li><br>

    <li></li><br>

    <li></li>
     </div>

    <a name="four"></a>
     <div style="width:100%; height: 100%; overflow: auto; " align="center">
     <h1>OOC</h1>
    <ol>
    <li>This layout was rearranged by <a target="_blank" href="profile.php?user=From+Shadows">From Shadows</a> for Bella's use. Please do not steal or appropriate.</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>

    </ol>
     </div></div>