Cottontail Layout

<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Knewave');
 ::-webkit-scrollbar{width:0.3vh;height:0.3vh;}
::-webkit-scrollbar-track{border-radius:0;background:transparent;}
::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


body{
background: #fecde2;
}

 *{font-family: 'Josefin Sans', sans-serif;text-transform:none;font-size: 2.2vh;color: #fff;}
 h1{font-family: 'Knewave', cursive;font-size: 4vh;text-transform: none;}
 a{text-transform: none;text-decoration: none;transition: 0.5s; color: #eafcf7;}
 a:hover{transition: 0.5s; color: #7fffda; text-shadow: 0 0 30px 30px #fff;}



#image{
position: fixed;
top: 2vw;
left: 20vw;
opacity: 1;
}

#image img{
height: 94vh;
}

#info1, #info2, #info3{
position: fixed;
background: #ffbfc9;
padding: 1%;
overflow: auto;
text-shadow: -0.1px 0.1px 2px #999;
top: 10vw;
right: 20vw;
height: 12vw;
width: 16vw;
}

#info1{
z-index: 5;
box-shadow: 0 0 150vh #fff;
}

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

#nav1, #nav2, #nav3{
position: fixed;
background: #fff;
transform: rotate(45deg);
z-index: 20;
box-shadow: 0 0 10vh #fff;
height: 4vh;
width: 4vh;
bottom: 45vh;
transition: 0.3s;
}

#nav1{right:35vw;}
#nav1:hover{transform:rotate(90deg);transition: 0.3s;}

#nav2{right:28vw;}
#nav2:hover{transform:rotate(90deg);transition: 0.3s;}

#nav3{right:21vw;}
#nav3:hover{transform:rotate(90deg);transition: 0.3s;}

#credit {
z-index:1;
position:fixed;
height:20vh;
right:1%;
bottom:0%;
}

</style>

<div id="image">
<img src="IMAGE HERE">
</div>

<a href="#info1"><div id="nav1"></div></a>
<a href="#info2"><div id="nav2"></div></a>
<a href="#info3"><div id="nav3"></div></a>

<div id="info1">
 <center>
 <h1>Header 1</h1>
 Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit, <br>
sed do eiusmod tempor incididunt <br>
ut labore et dolore magna aliqua.
 <br><br>

 </center>
 </div>

<div id="info2" class="appear">
 <center>
 <h1>Character</h1>
 Lacus viverra vitae congue
eu consequat ac felis.
Nibh sit amet commodo
nulla facilisi nullam vehicula.

 <br><br>

 </center>
 </div>

<div id="info3" class="appear">

 <center>
 <h1>Details</h1>
 Mollis aliquam ut porttitor leo a.
Ultricies lacus sed turpis tincidunt
id aliquet risus feugiat in.
 <br>

 </div>

<a href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="Thanks for using this layout. Please inform me of any issues!">
<img src="https://i.imgur.com/A9wLMgS.png" id="credit"/>
</a>