When Star Breaks Things Episode 2

<style>

::-webkit-scrollbar-button:vertical:{
background-color: #transparent;}

::-webkit-scrollbar-thumb:vertical {
background-color:#transparent;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#transparent;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#transparent;}

body {
background: #261726;
background-image: url("https://i.imgur.com/4E58yqy.png");
}

#bar {
position: absolute;
background:url('https://i.imgur.com/4E58yqy.png');
left: 0vw;
top: 41vh;
width: 100%;
height: 20vh;
background-color: #483048;
z-index: 1;
}
#container {
position: absolute;
background-size:cover;
top: 15vh;
left:2vw;
width: 94vw;
height: 68vh;
border: solid #000 5px;
background-color: #483048;
z-index: 1;

}

h1 { text-decoration: none;
  text-align:center;
  background-color: #a171b8;
	color: #f7f1fe;
	font-family: 'open sans condensed', sans serif;
  font-size: 13px;
  font-weight: none;
  display-inline: block;
  text-transform: uppercase;
  letter-spacing: 1px;
	padding: 0px;
  opacity: .8
  }

.ooc {
position: absolute;
padding:1vw;
width: 18vw;
height: 55vh;
overflow: auto;
left: 1vw;
top: .8vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}
.stats {
  text-align:right;
position: absolute;
padding:1vw;
width: 18vw;
height: 55vh;
overflow: auto;
left: 1vw;
top: .8vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}

.friends {
  text-align:right;
position: absolute;
padding:1vw;
width: 18vw;
height: 18vh;
overflow: auto;
left: 1vw;
top: 1vw;
font-family: 'Kiona';
color: #cec9c3;
background-color: #483048;
border: solid #000 1px;
}

.content1 {
position: absolute;
background-size:cover;
top: 1.2vw;
left: 2vw;
width: 22vw;
height: 63vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

.content2 {
position: absolute;
background-size:cover;
top: 1.2vw;
left: 25vw;
width: 22vw;
height: 63vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

.friendz {
position: absolute;
background-size:cover;
bottom: 1.2vw;
left: 48vw;
width: 22vw;
height: 25vh;
border: solid #000 2px;
background-color: #cec9c3;
background-image: url('https://media1.giphy.com/media/xT0BKgjkd3OyqpCjJK/source.gif');
background-size: fill;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}

#pic {
position: fixed;
top: -24px;
left: 888px;
width: 291px;
height: 525px;
padding: 10px;
background-color: transparent;
z-index: 5;
}
b {
  color: #fff;
  font-weight: bold;
  letter-spacing: 0;
}

</style>
<div id="pic"><img src="https://i.picpar.com/gr2e.png"></img></div>
<div id="bar"></div>

<div id="container">
<div class="content1">
<div class="ooc"> <h1>Out of character</h1>
 <br>01. IC =/= OOC.
 <br><br>02. Smut is more likely with story, but I am not against it otherwise.
 <br><br>03. PM Friendly.
 <br><br>04. Typist is forgetful, so save posts.
 <br><br>05. 8 years RP experience, 3 on RPC.
 <br><br>06. Discord is earned.
 <br><br>07. Anything else that does not belong to me is the rightful property of their creators, etc. etc.
 <br><br>08. Any questions, comments or concerns? Please don't hesitate to PM me.</div></div>

<div class="content2">
<div class="stats">
<h1>statisical information</h1><b style="float: left; width: 20%;">name</b><b>▌</b> Amrynth Heavensward<br>

</div></div>
<div class="friendz">
<div class="friends">

</div></div>

</div>