Mystical Code

<style>
@import url('https://fonts.googleapis.com/css?family=Federant|Audiowide|Abril+Fatface|Satisfy|Sacramento');

body {
background-image: url("http://i.picpar.com/ku7e.png");
color: white;
background-color: #A748C8;
font-family: "Federant";
font-size: 16px;
background-size: 6%;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
z-index: 99;
text-shadow: 2px 0 0 #EEA5C3, -2px 0 0 #EEA5C3, 0 2px 0 #EEA5C3, 0 -2px 0 #EEA5C3, 1px 1px #EEA5C3, -1px -1px 0 #EEA5C3, 1px -1px 0 #EEA5C3, -1px 1px 0 #EEA5C3;
}

#CenterBG {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 360px;
height: 510px;
background-color: #B443C9;
background-image: url("https://www.transparenttextures.com/patterns/flowers.png");
background-position: center;
background-attachment:fixed;
border-top: 3px solid #EEA5C3;
border-bottom: 3px solid #EEA5C3;
z-index:2;
}

#LeftBG {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: #B443C9;
background-image: url("https://www.transparenttextures.com/patterns/flowers.png");
background-position: center;
background-attachment:fixed;
border: 3px solid #EEA5C3;
z-index:1;
}

#RightBG {
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: #B443C9;
background-image: url("https://www.transparenttextures.com/patterns/flowers.png");
background-position: center;
background-attachment:fixed;
border: 3px solid #EEA5C3;
z-index:1;
}

#Title {
position: fixed; left: 0px; right: 0px; top: -574px; bottom: 0px; margin: auto;
width: 300px;
height: 37px;
text-align: center;
text-transform: uppercase;
font-size: 37px;
color: #EEA5C3;
font-family: "Satisfy";
text-shadow: 2px 0 0 #917c9b, -2px 0 0 #917c9b, 0 2px 0 #917c9b, 0 -2px 0 #917c9b, 1px 1px #917c9b, -1px -1px 0 #917c9b, 1px -1px 0 #917c9b, -1px 1px 0 #917c9b;
z-index: 5;
}

#MainPic {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 470px;
border: 3px solid #eea5c3;
z-index: 2;
}

#OOCBox {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: -290px; margin: auto;
width: 380px;
height: 240px;
padding: 10px;
border: 3px solid #eea5c3;
background-color: #C88BBE;
background-image: url("https://i.imgur.com/oJUsgm3.png");
z-index: 5;
overflow: auto;
}

#Tab {
position: fixed; left: -800px; right: 0px; top: -290px; bottom: 0px; margin: auto;
width: 380px;
height: 240px;
padding: 10px;
border: 3px solid #eea5c3;
background-color: #C88BBE;
background-image: url("https://i.imgur.com/oJUsgm3.png");
z-index: 5;
display: none;
overflow: auto;
}

#one #tab {
display: block;
}

#one:target #tab, #two:target #tab, #three:target #tab, #four:target #tab, #five:target #tab, #six:target #tab {
display: block;
z-index: 11;
}

#LeftNav {
position: fixed; left: -350px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 20px;
height: 300px;
z-index: 5;
}

#RightNav {
position: fixed; left: 0px; right: -350px; top: 0px; bottom: 0px; margin: auto;
width: 20px;
height: 300px;
z-index: 5;
}

.NaviTab{
display: inline-block;
border: 3px solid #eea5c3;
background-color: #eea5;
background-image: url("https://i.imgur.com/oJUsgm3.png");
width: 14px;
height: 80px;
z-index: 5;
margin: 10 0 10 0;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.NaviTab:hover {
background-color: purple;
}

.frienditempic {
border: 7px solid #eea5c3;
width: 75px;
height: 75px;
margin: 5px;
padding: 0;
border-radius: 50%;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.frienditempic:hover {
border: 7px solid purple;
border-radius: 0;
}

#MarqueeBox{
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 380px;
height: 530px;
padding: 10px;
border: 3px solid #eea5c3;
background-color: #C88BBE;
background-image: url("https://i.imgur.com/oJUsgm3.png");
z-index: 5;
}

.Marquee {
  height: 482px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.MoveIt {
width: 400px;
height: 10000px;
position: absolute;
overflow-y:hidden;
top: 0;
left: 0;
-moz-animation: MoveIt 25s linear infinite;
-webkit-animation: MoveIt 25s linear infinite;
animation: MoveIt 25s linear infinite;
}

.MoveIt img {
display:inline-block;
vertical-align:middle;
height: 230px;
width: auto;
border: 3px solid pink;
margin: 10 20 10 20;
}

.MoveIt:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

@keyframes MoveIt {
0% {
     -moz-transform: translateY(515px);
 -webkit-transform: translateY(515px);
 transform: translateY(515px);
}
  100% {
     -moz-transform: translateY(-1280px);
 -webkit-transform: translateY(-1280px);
 transform: translateY(-1280px);
  }
}
/* Credit for the original CSS Marquee solution that this is based on to https://stackoverflow.com/questions/38604929/how-to-create-marquee-infinite-loop-of-logos-slider-with-css-only */

h1, h2, h3 {padding: 0px; margin: 0 0 8 0; text-align: center; color: purple; font-family: "Sacramento"; border-bottom: dashed pink 3px; text-shadow: 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, 1px 1px white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white; font-size: 35px; letter-spacing: 2px;
}

a {color: purple; font-family: "Sacramento"; font-size: 16px; text-decoration:none;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;}
a:visited {color: #a0caf0;}
a:hover {color: pink;}

a.credit:link {color:#f0f0f0; font-family: "Audiowide"; font-size: 16px;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}
a.credit {text-decoration:none;}

b {color: purple;}


::-webkit-scrollbar {
width: 8px;
height: 1px;
}

::-webkit-scrollbar-track {
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background: pink;
}
</style>
<body>

<div id="CenterBG"></div>
<div id="LeftBG"></div>
<div id="RightBG"></div>

<div id="Title">Mystical Espeon</div>
<img id="MainPic" src ="https://i.pinimg.com/564x/41/89/8e/41898e4efafd76848b69b63a5c67ea64.jpg"alt="Main Picture"></div>

<div id="MarqueeBox">
<h1>Gallery</h1>
<div class="Marquee">
<div class="MoveIt">
<center>
<img src="GALLERYIMAGEURLHERE" alt="Gallery Picture"/><br>
<img src="GALLERYIMAGEURLHERE" alt="Gallery Picture"/><br>
<img src="GALLERYIMAGEURLHERE" alt="Gallery Picture"/><br>
<img src="GALLERYIMAGEURLHERE" alt="Gallery Picture"/><br>
<img src="GALLERYIMAGEURLHERE" alt="Gallery Picture"/><br>
</center>
</div>
</div>

<div id="one">
<div id="tab">
<h1>Statistics</h1>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span><br>
<b>Stat:</b><span style=float:right>Info</span>
</div></div>

<div id="two">
<div id="tab">
<h1>Personality</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="three">
<div id="tab">
<h1>History</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="four">
<div id="tab">
<h1>Abilities</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="five">
<div id="tab">
<h1>Associates</h1>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
</center>
</div></div>

<div id="six">
<div id="tab">
<h1>Inventory</h1>
<center>
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
</center>
</div></div>

<div id="OOCBox">
<h1>Out of Character</h1>
<b>01.</b> OOC line here.<br>
<b>02.</b> OOC line here.<br>
<b>03.</b> OOC line here.<br>
<b>04.</b> OOC line here.<br>
<b>05.</b> OOC line here.<br>
<b>06.</b> OOC line here.<br>
<b>07.</b> OOC line here.<br>
<b>08.</b> OOC line here.<br>
<b>09.</b> OOC line here.<br>
<b>10.</b> OOC line here.
</div>


<div id="LeftNav">
<a href="#one"><div class="NaviTab"></div></a>
<a href="#two"><div class="NaviTab"></div></a>
<a href="#three"><div class="NaviTab"></div></a></div>

<div id="RightNav">
<a href="#four"><div class="NaviTab"></div></a>
<a href="#five"><div class="NaviTab"></div></a>
<a href="#six"><div class="NaviTab"></div></a></div>

<div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>
</body>