<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Teko|Lobster');
* {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;}

Body {
background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
background: rgb(220,44,57);
background: -moz-linear-gradient(0deg, rgba(220,44,57,1) 0%, rgba(255,174,234,1) 50%, rgba(88,17,22,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(220,44,57,1) 0%, rgba(255,174,234,1) 50%, rgba(88,17,22,1) 100%);
background: linear-gradient(0deg, rgba(220,44,57,1) 0%, rgba(255,174,234,1) 50%, rgba(88,17,22,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc2c39",endColorstr="#581116",GradientType=1);
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
overflow:auto;

}

::-moz-selection {
color: #f4eefa;
background: #d7f6f9;
}

::selection {
color: #f4eefa;
background: #d7f6f9;
}

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

::-webkit-scrollbar-thumb:vertical {
background-color: #ffe37e;
border: 1px solid #ffe37e;
}

b, i, u, strong {
color: #ffa747;
}

hr {
height: 1px;
width: 475px;
color: #ffa747;
background-color: #ffa747;
border: none;
}

h1 {
font-family: 'Raleway';
font-size: 24px;
color: #ffa747;
text-transform: None;
letter-spacing: 8px;
border-top: 2px solid #ffa747;
border-bottom: 2px solid #ffa747;
background: transparent;
text-align: center;
margin-right: 1px;
margin-left: 1px;
line-height: 30px;
margin-top: 12px;
}

a:active, a:link, a:visited {
color: #e55c64;
text-decoration: underline;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

a:hover {
color: #ffffff;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;
}

.container {
background-color: #ce4e4b;
position: absolute;
top: 20px;
left: 190px;
width: 872px;
height: 525px;
border: 2px solid #5b0009;
padding: 25px;
margin: 25px;
}

.base {
background-color: #f2808c;
background-image: url("");
position: absolute;
top: 124px;
left: 250px;
height: 425px;
width: 850px;
overflow: hidden;
border: 2px solid #5b0009;
z-index: 1;
}

.Dossier {
position: fixed;
background-color: #f2808c;
border: 2px #5b0009 solid;
overflow: auto;
top: 184px;
left: 285px;
width: 450px;
height: 320px;
padding: 3px;
text-align: justify;
font-size: 20px;
font-family: 'Teko';
color: #f0b1b7;
line-height: 22px;
z-index: 1000;
}

.infobox {
position: fixed;
background-color: #f2808c;
border: 2px #5b0009 solid;
overflow: auto;
top: 184px;
left: 285px;
width: 450px;
height: 320px;
padding: 3px;
text-align: justify;
font-size: 20px;
font-family: 'Teko';
color: #f0b1b7;
line-height: 22px;
z-index: 1000;
}

.Bloss {
position: absolute;
top: 121px;
left: 732px;
height: 430px;
width: 401px;
background-image: url("http://i.picpar.com/BzSc.png");
background-size: cover;
background-position: center center;
overflow: hidden;
text-shadow: 3px white 3px white;
z-index: 2;
}

.box {
background-color: #5b0009;
background-image: url("http://i.picpar.com/Dkgd.png");
position: absolute;
top: 60px;
left: 248px;
height: 32px;
width: 855px;
overflow: hidden;
z-index: 1;
border: #5b0009 solid 5px;
}

.boxtwo {
background-color: #5b0009;
position: absolute;
top: 568px;
left: 248px;
height: 32px;
width: 855px;
overflow: hidden;
z-index: 1;
border: #5b0009 solid 5px;
}

.quote {
position: absolute;
top: 119px;
left: 310px;
text-align: left;
text-outline: 5px #F5F5F5;
font-family: 'Lobster';
text-shadow: -2px 0px 0px #5b0009, 0px 2px 0px #ffffff, 2px 0px 0px #5b0009, 0px -2px 0px #ffffff;
font-size: 60px;
color: #f2808c;
z-index: 999;
text-align: center;
}

.bar {
background-color: #5b0009;
position: absolute;
top: 532px;
left: 300px;
height: 1px;
width: 423px;
border: 1px solid #5b0009;
overflow: hidden;
z-index: 1000;
z-index: 2;
}

.navbar {
Background-color: transparent;
Position: absolute;
Left: 900px;
top: 516px;
padding: 4px;
z-index: 2000;
}

.link1 {
Position: absolute;
left: -568px;
Border: solid 2px #5b0009;
Height: 20px;
Width: 20px;
border-radius: 100%;
background-color: #e7a7a5;
}

.link2 {
Position: absolute;
left: -492px;
Border: solid 2px #5b0009;
Height: 20px;
Width: 20px;
border-radius: 100%;
background-color: #e7a7a5;
}

.link3 {
Position: absolute;
left: -405px;
Border: solid 2px #5b0009;
Height: 20px;
Width: 20px;
border-radius: 100%;
background-color: #e7a7a5;
}

.link4 {
Position: absolute;
left: -328px;
Border: solid 2px #5b0009;
Height: 20px;
Width: 20px;
border-radius: 100%;
background-color: #e7a7a5;
}

.link5 {
Position: absolute;
left: -258px;
Border: solid 2px #5b0009;
Height: 20px;
Width: 20px;
border-radius: 100%;
background-color: #e7a7a5;
}

.slide {
Position: fixed;
Height: 555555;
Width: 555555;
Top: 0px;
Left: 0;
Z-index: -1;
Opacity: 0;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;
}

.slide:target {
Top: 0;
Opacity: 1;
Z-index: 1000;
transition: 0.8s;
-moz-transition: 0.8s;
webkit-transition: 0.8s;
-o-transition: 0.8s;
}

</style>

<div class="box"></div>
<div class="boxtwo"></div>

<div class="quote">Blossom Utonium</div>

<div class="container"></div>
<div class="base"></div>

<div class="bar"></div>

<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
<a class="link4" href="#4"></a>
<a class="link5" href="#5"></a>
</div>

<div class="dossier">
<center>This profile is heavily a work in progress. Do not touch!
</div>

<div id="1" class="slide">
<div class="infobox">
here we go.
</div></div>

<div id="2" class="slide">
<div class="infobox">
Yep. Yep.
</div></div>

<div id="3" class="slide">
<div class="infobox">
The heart.
</div></div>

<div id="4" class="slide">
<div class="infobox">
Send me a thousand kisses!
</div></div>

<div class="Bloss"></div>

<div class="boxthree"></div>