Revamped Code

------------ PLEASE READ, DO NOT JUST COPY AND PASTE. -------------

---------------------- Paste the CSS section into the second box that says <style> ------------------------



@import url('//fonts.googleapis.com/css?family=Courgette');

::-webkit-scrollbar {width: 8px; height: 8px; background: #; }
::-webkit-scrollbar-thumb { background-color:#;}

a:link, a:visited, a:active{color: #000000;font-family:'Courgette', sans-serif;
font-size: 1.4vw; font-weight:; text-shadow: -.1vw 0vw .1vw #CFA981; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }

a:hover { color: #000000; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }

h1 {
color: #ffffff;
text-align: center;
font-family:'Courgette', sans-serif;
font-size: 2.5vw;
}

ib {
color: #000000;
 font-style: italic;
font-weight: bold;
text-shadow: 0vw 0vw 0vw #ffffff;
}

i {
color: #FFFFFD;
 font-style: italic;
text-shadow: .1vw .1vw .1vw #000000;
}

b {
color: #C062DD;
 font-weight: bold;
text-shadow: .1vw .1vw .1vw #ffffff;
}
body {
background: url(https://wallpaperaccess.com/full/48483.jpg);
background-size: cover;
background-repeat:no-repeat;
}

.image{position:absolute;
width: 25vw;
height: 24.5vw;
left: 11vw;
bottom: 9vw;
border: .2vw solid #C062DD;
box-shadow: 0vw 0vw 1vw #000000;
background: url(https://cache.desktopnexus.com/thumbseg/2065/2065194-bigthumbnail.jpg);
background-size: 100%;
background-repeat:no-repeat;}

.box{position:absolute;
width:30vw;
height:40vw;
left:38vw;
bottom:3vw;
background-color: #DFA8F0;
border: .2vw solid #C062DD;
box-shadow: 0vw 0vw 1vw #000000;
font-family:'Teko', sans-serif;
font-size: 3vw;}

.maintext {
width:29vw;
height:39vw;
left:38.5vw;
bottom:3.5vw;
font-family:'Courgette', sans-serif;
font-size: 1.3vw;
text-align:center;
color: #ffffff;
text-shadow: 0vw 0vw .1vw #000000;
line-height:1.5vw;
overflow: hidden;
position: fixed;
opacity: 0;
overflow-y:scroll;
}
.maintext:target {z-index:20;opacity:1;}

.navbar {
Background-color: transparent;
Position: absolute;
Height: 10vw;
Width: 40vw;
Left: 63vw;
bottom: 10vw;
z-index: 100;
}

.nav1 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 27vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav1:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav2 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 24vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav2:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav3 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 21vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav3:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav4 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 18vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav4:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav5 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 15vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav5:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav6 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 12vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav6:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav7 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 9vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav7:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav8 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 6vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav8:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}

.nav9 {
background-color: #DFA8F0;
box-shadow: 0vw 0vw .5vw #000000;
Position: absolute;
left:7vw;
border-radius: 5%;
bottom: 3vw;
Height: 1.8vw;
Width: 5vw;
text-align:center;
font-size:3vw;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}
.nav9:hover {
background-color: #C062DD;
box-shadow: 0vw 0vw .5vw #000000;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}






------------------ Please paste this HTML part into the third box underneath <body> -----------


<div class="box"></div>
<div class="maintext"></div>
<div id="001" class="maintext">
<h1>Title 1</h1>
This is normal text<br>
<i>Italics</i> <b>Bold</b> <ib>Italic / Bold</ib><br>
<a href="" target="_blank">This is a link</a>
</div>

<div id="002" class="maintext">
<h1>Title 2</h1>
</div>

<div id="003" class="maintext">
<h1>Title 3</h1>
</div>

<div id="004" class="maintext">
<h1>Title 4</h1>
</div>

<div id="005" class="maintext">
<h1>Title 5</h1>
</div>

<div id="006" class="maintext">
<h1>Title 6</h1>
</div>

<div id="007" class="maintext">
<h1>Title 7</h1>
</div>

<div id="008" class="maintext">
<h1>Title 8</h1>
</div>

<div id="009" class="maintext">
<h1>Title 9</h1>
</div>

<div class="image"></div>

<div class="navbar">
<a class="nav1" href="#001">Stats</a>
<a class="nav2" href="#002">Gallery</a>
<a class="nav3" href="#003">History</a>
<a class="nav4" href="#004">Friends</a>
<a class="nav5" href="#005">Talents</a>
<a class="nav6" href="#006">Misc</a>
<a class="nav7" href="#007">OOC</a>
<a class="nav8" href="#008">Misc 2</a>
<a class="nav9" href="#009">OOC2</a>
</div>