Elfbutt code

//*STYLE*//

@import url('https://fonts.googleapis.com/css?family=Cinzel:700|Sorts+Mill+Goudy');

body {
  background-color:#BFA491;
 overflow:hidden;
}

::-webkit-scrollbar-track
{

    background-color:transparent;
}

::-webkit-scrollbar
{
    width: 8px;
    background-color:transparent;
}

::-webkit-scrollbar-thumb
{
    background-color: #BFA491;

}

#image1{
 background-image:url(https://cdn.discordapp.com/attachments/278634162901090307/554764249361154055/2_by_pixel_latte_dd1t598-pre_25.png);
 width:260px;
 background-size:100%;
 height:290px;
 position:absolute;
 right:0px;
 top:100px;
 margin-right:100px;
 z-index:10;
 background-repeat:no-repeat;
}

#image2{
 background-image:url(https://cdn.discordapp.com/attachments/346731406237499393/555438793025388574/paid_40.png);
 background-size:contain;
 transform:scaleX(-1);
 width:700px;
 height:100%;
 background-repeat:no-repeat;
 right:0px;
 top:0px;
 position:absolute;
 z-index:15;
 margin-top:350px;
 margin-right:720px
}

#imagebackground{
  z-index:1;
  background-color:#fff;
  width:220px;
  height:468px;
  position:absolute;
  right:0px;
  top:0px;
  margin-top:310px;
  margin-right:110px;
}

#border1{
  width:200px;
  height:450px;
  background-color:transparent;
  position:absolute;
  right:0px;
  top:0px;
  margin-top:5px;
  margin-right:6px;
   border:4px solid #BFA491;
   overflow:auto;
}



#backgroundbox{
 background-image:url(https://i.imgur.com/7tvYZSw.png);
 width:870px;
 height:100%;
 background-repeat:no-repeat;
 background-size:contain;
 z-index:9;
 position:absolute;
 right:0px;
 top:0px;
 margin-top:269px;
 margin-right:360px;
}

#border{
width:840px;
height:480px;
background-color:transparent;
position:absolute;
position:absolute;
 right:0px;
 top:0px;
 margin-top:279px;
 margin-right:370px;
 z-index:9;
 border:4px solid #BFA491;
}

#box1{
 background-color:#673538;
 width:480px;
 height:350px;
 position:absolute;
 right:0px;
 top:0px;
 margin-top:336px;
 margin-right:400px;
  z-index:99;
  color:#BFA491;
  padding:30px;
  font-size:12pt;
  font-family: 'Sorts Mill Goudy', serif;
  opacity:1;
  z-index:11;
  overflow:auto;
  line-height:17px;
  text-align:justify;
transition:1s;
}

#box2, #box3{
 background-color:#673538;
 width:480px;
 height:350px;
 position:absolute;
 right:0px;
 top:0px;
 margin-top:336px;
 margin-right:400px;
  z-index:99;
  color:#BFA491;
  padding:30px;
  font-size:12pt;
  font-family: 'Sorts Mill Goudy', serif;
  opacity:0;
  z-index:10;
  overflow:auto;
  line-height:17px;
  text-align:justify;
transition:1s;

}

#blanket:target #box1{
opacity:1;
z-index:11;
}

#blanket2:target #box2{
opacity:1;
z-index:11;
}

#blanket2:target #box1{
opacity:0;
z-index:10;
}
#blanket3:target #box3{
opacity:1;
z-index:11;
}

#blanket3:target #box1{
opacity:0;
z-index:10;
}

#title{
 width:450px;
 height:80px;
 background-color:#000;
 z-index:12;
 position:absolute;
 top:0px;
 right:0px;
 margin-top:290px;
 margin-right:445px;
 background-image:url(https://i.imgur.com/4jblQcC.jpg);
 background-position:0px 0px;
background-size:100%;
 filter:brightness(80%);
}

#blanket:target #title{
 background-image:url(https://i.imgur.com/4jblQcC.jpg);
transition:.5s;
}
#blanket2:target #title{
background-image:url(https://i.imgur.com/16YcFpU.jpg);
background-position:0px -30px;
transition:.5s;

}


#blanket3:target #title{
background-image:url(https://i.imgur.com/UoWmdGE.png);
background-position:0px -40px;
transition:.5s;
}

#bordertitle{
   border:1px solid #BFA491;
width:435px;
height:65px;
position:absolute;
margin-top:6px;
margin-left:7px;
 filter:brightness(120%);
opacity:1;
z-index:10;
}
#bordertitle2, #bordertitle3{
   border:1px solid #BFA491;
width:435px;
height:65px;
position:absolute;
margin-top:6px;
margin-left:7px;
 filter:brightness(120%);
opacity:0;
z-index:9;
}

#blanket:target #bordertitle{
opacity:1;
z-index:10;
transition:.5s;
}

#blanket2:target #bordertitle2{
opacity:1;
z-index:11;
transition:.5s;
}

#blanket2:target #bordertitle{
opacity:0;
z-index:0;
transition:.5s;
}
#blanket3:target #bordertitle3{
opacity:1;
z-index:11;
transition:.5s;
}

#blanket3:target #bordertitle{
opacity:0;
z-index:0;
transition:.5s;
}

h1{
  font-family: 'Cinzel', serif;
  color:#BFA491;
  text-shadow:2px 2px 7px #000;
  margin-top:0px;
  font-size:40pt;
}


.firstcharacter {
  color:#BFA491;
  float: left;
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 40pt;
  line-height: 20px;
  padding-top:20px;
  padding-bottom:6px;
  padding-right: 6px;
  padding-left: 6px;
  margin-right:4px;
  margin-top:5px;
  background-color:#000;
}


#friends{
  background-color:transparent;
  width:190px;
  height:370px;
  margin-left:5px;
  margin-top:80px;
  overflow:auto;
  position:absolute;
  z-index:99;
}

#friends::-webkit-scrollbar
{
  width: 0px;
  background-color: transparent;
}

#friendbox{
background-color:#fff;
  width:190px;
  height:370px;
  overflow:hidden;
  margin-top:5px;
}

#friendimage{
 background-color:#000;
 border-radius:50%;
 width:150px;
 height:150px;
 border:4px solid #BFA491;
 background-image:url(https://66.media.tumblr.com/0001eead7d7dc1bdcec43f327f5bda41/tumblr_p0aso1afau1tdpe7jo1_500.gif);
 background-size:110%;
 background-position:center;
position:absolute;
margin-left:15px;
box-shadow:0px 0px 5px 2px #000;
}

#friendimage a{
   border-radius:50%;
    border:4px solid #BFA491;
 width:150px;
 height:150px;
 display:block;
 opacity:1;
 transition:1s;
 position:absolute;
 margin-top:-4px;
 margin-left:-5px;
 background-color:#000;
 overflow:hidden;
}

#friendimage a:hover{
 opacity:0.7;
}

#friendtext{
    font-size:10pt;
  font-family: 'Sorts Mill Goudy', serif;
  line-height:17px;
  width:170px;
  height:170px;
  margin-top:170px;
  background-color:#673538;
  padding:10px;
  color:#BFA491;
  font-size:12pt;
}

#navi{
  width:250px;
  height:150px;
  position:absolute;
  right:0px;
  top:100px;
  margin-top:200px;
  margin-right:950px;
  z-index:99;
}

#navi1 a{
clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0 65%);
 width:70px;
 height:150px;
 background-color:#000;
 display:block;
 float:left;
 margin-left:10px;
 transition:.5s;

}

#navi2 a{
clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0 65%);
 width:70px;
 height:150px;
 background-color:#000;
 display:block;
 float:left;
 margin-left:10px;
 transition:.5s;

}

#navi3 a{
clip-path: polygon(50% 0%, 100% 65%, 50% 100%, 0 65%);
 width:70px;
 height:150px;
 background-color:#000;
 display:block;
 float:left;
 margin-left:10px;
 transition:.5s;

}

#blanket:target #navi1 a{
 background-color:#673538;
}
#blanket2:target #navi2 a{
 background-color:#673538;
}
#blanket3:target #navi3 a{
 background-color:#673538;
}

.firstcharacter2 {
  color:#fff;
  float: left;
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 150pt;
  height:60px;
  line-height:180px;
  width:contain;
  margin-right:4px;
  margin-top:5px;

}

#quote{
width:600px;
height:150px;
position:absolute;
top:0px;
right:0px;
margin-top:140px;
margin-right:360px;
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 35pt;
  color:#fff;
  line-height:40px;

}

#ooc{
 width:200px;
 height:140px;
 background-color:#fff;
 position:absolute;
 z-index:99;
 right:0px;
 top:0px;
 margin-top:650px;
 margin-right:1350px;
}

#borderooc{
   width:165px;
 height:105px;
 background-color:transparent;
    border:2px solid #BFA491;
margin-top:6px;
margin-left:6px;
padding:10px;
color:#673538;
  font-family: 'Sorts Mill Goudy', serif;
font-size:12pt;
overflow:auto;
line-height:15px;
text-align:left;
}

#borderooc b{
    color:#BFA491;


      font-family: 'Sorts Mill Goudy', serif;
font-size:20pt;
margin-right:5px;
}
#borderooc a{
    color:#BFA491;
      font-family: 'Sorts Mill Goudy', serif;
margin-right:5px;
text-decoration:none;
transition:.5s;
}

#borderooc a:hover{
color:#000;
}

#borderooc::-webkit-scrollbar
{
  width: 0px;
  background-color: transparent;
}

//*HTML*//

<div id="blanket"><div id="blanket2"><div id="blanket3">


<div id="quote">
 <span class="firstcharacter2">"</span>Something? Maybe a quote. You can delete if you want

</div>
<div id="navi">
<div id="navi1">
 <a href="#blanket"></a>
</div>
<div id="navi2">
 <a href="#blanket2"></a>
</div>
<div id="navi3">
 <a href="#blanket3"></a>
</div>
</div>

<div id="title"><div id="bordertitle">
<center><h1>Something1</h1></center>
</div>
<div id="bordertitle2">
<center><h1>Something2</h1></center>
</div>
<div id="bordertitle3">
<center><h1>Something3</h1></center>
</div>
</div>

<div id="box1"><br><span class="firstcharacter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio porta, commodo massa id, efficitur ligula. Aliquam erat volutpat. Duis id suscipit leo. Cras non turpis sollicitudin, vulputate ante non, cursus ligula. Duis hendrerit vehicula hendrerit. Vestibulum quis tincidunt velit. Cras efficitur id nulla rhoncus mattis.

Etiam id magna lorem. Vestibulum vulputate efficitur urna, ac dictum justo sagittis ac. Praesent malesuada, turpis quis tempor porttitor, felis orci dictum nisi, dapibus cursus metus eros quis dui. Fusce dapibus nunc ac suscipit fringilla. Duis a vulputate sapien. Nam sodales enim a ullamcorper tincidunt. Fusce sit amet metus a velit rutrum malesuada sit amet vel quam. Nunc interdum eros vitae arcu tincidunt, et tincidunt libero scelerisque. In fermentum neque ut ipsum viverra, non varius massa tempor. Curabitur in lacus ut ex tempor euismod quis eu sapien. Etiam eu massa quis purus posuere ullamcorper. Mauris aliquet neque eu mauris tempor, sed convallis leo eleifend. Nulla tempus pellentesque purus, a commodo sem vulputate vel.

Donec viverra, lectus nec condimentum ultricies, lacus sem ornare mauris, varius lacinia metus leo blandit dui. Morbi consectetur molestie dignissim. Quisque volutpat pulvinar leo nec bibendum. Etiam justo ipsum, ornare quis fringilla ac, euismod ac orci. Vestibulum vel nisl quis justo lacinia dignissim non et dolor. Quisque consectetur ultricies purus. Sed id ex eu leo placerat maximus. Donec blandit imperdiet dictum. Vestibulum rhoncus laoreet nunc nec elementum. Ut ornare odio eget tortor molestie, ut ornare erat porttitor.</div>
<div id="box2"><br><span class="firstcharacter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio porta, commodo massa id, efficitur ligula. Aliquam erat volutpat. Duis id suscipit leo. Cras non turpis sollicitudin, vulputate ante non, cursus ligula. Duis hendrerit vehicula hendrerit. Vestibulum quis tincidunt velit. Cras efficitur id nulla rhoncus mattis.

Etiam id magna lorem. Vestibulum vulputate efficitur urna, ac dictum justo sagittis ac. Praesent malesuada, turpis quis tempor porttitor, felis orci dictum nisi, dapibus cursus metus eros quis dui. Fusce dapibus nunc ac suscipit fringilla. Duis a vulputate sapien. Nam sodales enim a ullamcorper tincidunt. Fusce sit amet metus a velit rutrum malesuada sit amet vel quam. Nunc interdum eros vitae arcu tincidunt, et tincidunt libero scelerisque. In fermentum neque ut ipsum viverra, non varius massa tempor. Curabitur in lacus ut ex tempor euismod quis eu sapien. Etiam eu massa quis purus posuere ullamcorper. Mauris aliquet neque eu mauris tempor, sed convallis leo eleifend. Nulla tempus pellentesque purus, a commodo sem vulputate vel.

Donec viverra, lectus nec condimentum ultricies, lacus sem ornare mauris, varius lacinia metus leo blandit dui. Morbi consectetur molestie dignissim. Quisque volutpat pulvinar leo nec bibendum. Etiam justo ipsum, ornare quis fringilla ac, euismod ac orci. Vestibulum vel nisl quis justo lacinia dignissim non et dolor. Quisque consectetur ultricies purus. Sed id ex eu leo placerat maximus. Donec blandit imperdiet dictum. Vestibulum rhoncus laoreet nunc nec elementum. Ut ornare odio eget tortor molestie, ut ornare erat porttitor.</div>
<div id="box3"><br><span class="firstcharacter">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio porta, commodo massa id, efficitur ligula. Aliquam erat volutpat. Duis id suscipit leo. Cras non turpis sollicitudin, vulputate ante non, cursus ligula. Duis hendrerit vehicula hendrerit. Vestibulum quis tincidunt velit. Cras efficitur id nulla rhoncus mattis.

Etiam id magna lorem. Vestibulum vulputate efficitur urna, ac dictum justo sagittis ac. Praesent malesuada, turpis quis tempor porttitor, felis orci dictum nisi, dapibus cursus metus eros quis dui. Fusce dapibus nunc ac suscipit fringilla. Duis a vulputate sapien. Nam sodales enim a ullamcorper tincidunt. Fusce sit amet metus a velit rutrum malesuada sit amet vel quam. Nunc interdum eros vitae arcu tincidunt, et tincidunt libero scelerisque. In fermentum neque ut ipsum viverra, non varius massa tempor. Curabitur in lacus ut ex tempor euismod quis eu sapien. Etiam eu massa quis purus posuere ullamcorper. Mauris aliquet neque eu mauris tempor, sed convallis leo eleifend. Nulla tempus pellentesque purus, a commodo sem vulputate vel.

Donec viverra, lectus nec condimentum ultricies, lacus sem ornare mauris, varius lacinia metus leo blandit dui. Morbi consectetur molestie dignissim. Quisque volutpat pulvinar leo nec bibendum. Etiam justo ipsum, ornare quis fringilla ac, euismod ac orci. Vestibulum vel nisl quis justo lacinia dignissim non et dolor. Quisque consectetur ultricies purus. Sed id ex eu leo placerat maximus. Donec blandit imperdiet dictum. Vestibulum rhoncus laoreet nunc nec elementum. Ut ornare odio eget tortor molestie, ut ornare erat porttitor.</div>

<div id="image1"></div>
<div id="image2"></div>
<div id="backgroundbox"></div>
<div id="imagebackground"><div id="border1">
 <div id="friends">
 <div id="friendbox">
 <center><div id="friendimage">
 <a href=""><img src="http://i.picpar.com/Yrad.png" height="160px" title="papi" alt="Flower"></a>
 </div></center>
 <div id="friendtext">
 <span class="firstcharacter">W</span>rite a small description of your friend here. Try not to be too long, just to show them your appreciation.
 </div>
 </div>
 <div id="friendbox">
 <center><div id="friendimage">
 <a href=""><img src="http://i.picpar.com/Yrad.png" height="160px" title="papi" alt="Flower"></a>
 </div></center>
 <div id="friendtext">
 Write a small description of your friend here. Try not to be too long, just to show them your appreciation.
 </div>
 </div>
 <div id="friendbox">
 <center><div id="friendimage">
 <a href=""><img src="http://i.picpar.com/Yrad.png" height="160px" title="papi" alt="Flower"></a>
 </div></center>
 <div id="friendtext">
 Write a small description of your friend here. Try not to be too long, just to show them your appreciation.
 </div>
 </div>
 <div id="friendbox">
 <center><div id="friendimage">
 <a href=""><img src="http://i.picpar.com/Yrad.png" height="160px" title="papi" alt="Flower"></a>
 </div></center>
 <div id="friendtext">
 Write a small description of your friend here. Try not to be too long, just to show them your appreciation.
 </div>
 </div>
 </div>

</div></div>
<div id="border"></div>

<div id="ooc">
 <div id="borderooc">
 <b>00</b>Code @ <a target="_blank" href="https://roleplay.chat/profile.php?user=Hound%20of%20Tindalos">HoT</a> <b>01</b>Write stuff here whatever you want<br>
 <b>02</b><br>
 <b>03</b><br>
 </div>
</div>