Radio Demon

<style>
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Fondamento|Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

::-webkit-scrollbar {
height: 10px;
width: 0px;
background-color: #;
}

body {
background-color: #420000;
background-image: url("https://transparenttextures.com/patterns/low-contrast-linen.png");
Overflow: hidden; cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png),
progress !important;
}

.main {
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
border: solid 2px #000;
background-color: #420000;
background-image: url("https://transparenttextures.com/patterns/black-linen.png");
Box-shadow: 0px 0px 10px #000;
Height: 450;
Width: 600;
}

.right {
position: absolute;
right: 0px;
bottom: 0px;
Height: 450;
Width: 300;
Background: url(https://cdn.discordapp.com/attachments/372517449255485441/744757193802514443/Shaded_Smile.png);
Background-size: 100%;
background-repeat: no-repeat;
z-index: 2;
transition:0.5s;
}


.lilal {
position: absolute;
left: 90px;
bottom: 17px;
Height: 220;
Width: 210;
Background: url(https://cdn.discordapp.com/attachments/372517449255485441/744757186219081738/Oh_Ashley.png);
Background-size: 100%;
background-repeat: no-repeat;

transition:0.5s;
}

.left {
Position: absolute;
bottom: 10px;
left: 10px;
Height: 30px;
Width: 372px;
background-color: #000000;
padding: 2px;
text-align: center;
color: #fff;
Font-size: 12px;
letter-spacing: 2px;
line-height: 30px;
Font-family: 'cinzel', cursive;
Font-weight: bold;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
border-radius: 10px;
}

.friend {
margin-top: 2px;
margin-left: 2px;
Height: 35px;
width: 35px;
padding: 2px;
border: dashed 1px #fff;
border-radius: 10px;
}


.Alastor {
position: absolute;
Left: 56px;
Bottom: 10px;
Color: ffd700;
text-decoration: none;
filter: drop-shadow(0px 0px 10px #000);
Font-family: 'alex brush', cursive;
font-size: 95px;
}

.oocb {
Position: absolute;
Top: 105px;
left: 25px;
Height: 220px;
Width: 325px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
z-index: 3;
}

.oocb1 {
Position: absolute;
Top: 15px;
Left: 15px;
Height: 170px;
Width: 275px;
Border-radius: 5px;
Border: solid 10px #fff;
}

.ooct {
Position: absolute;
bottom: -20;
left: 16px;
Height: 30px;
Width: 238px;
background-color: #000000;
padding: 3px;
text-align: center;
color: #fff;
Font-size: 24px;
Font-family: 'cinzel', cursive;
Font-weight: bold;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
}

.ooc {
Position: absolute;
Top: 1px;
right: 1px;
Height: 140px;
Width: 265px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
Color: #fff;
overflow: auto;
font-size: 11px;
}

.page2 {
Position: absolute;
background-color: #420000;
background-image: url("https://transparenttextures.com/patterns/black-linen.png");
Box-shadow: 0px 0px 10px #000;
Height: 450;
Width: 600;
Opacity: 0;
Transition: 0.7s;
}

.page2:target {
Opacity: 1;
z-index: 5;
Transition: 0.7s;
}

.statsb {
Position: absolute;
Top: 15px;
left: 15px;
Height: 240px;
Width: 265px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
z-index: 3;
}

.statsb1 {
Position: absolute;
Top: 15px;
Left: 15px;
Height: 188px;
Width: 215px;
Border-radius: 5px;
Border: solid 10px #fff;
}

.statst {
Position: absolute;
bottom: -20;
left: 25px;
Height: 30px;
Width: 160px;
background-color: #000000;
padding: 3px;
text-align: center;
color: #fff;
Font-size: 24px;
Font-family: 'cinzel', cursive;
Font-weight: bold;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
}

.stats {
Position: absolute;
Top: 1px;
right: 1px;
Height: 150px;
Width: 205px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
Color: #fff;
overflow: auto;
font-size: 11px;
}


.biob {
Position: absolute;
Top: 15px;
right: 15px;
Height: 200px;
Width: 285px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
z-index: 3;
}

.biob1 {
Position: absolute;
Top: 15px;
Left: 15px;
Height: 148px;
Width: 235px;
Border-radius: 5px;
Border: solid 10px #fff;
}

.biot {
Position: absolute;
bottom: -20;
left: 37px;
Height: 30px;
Width: 160px;
background-color: #000000;
padding: 3px;
text-align: center;
color: #fff;
Font-size: 24px;
Font-family: 'cinzel', cursive;
Font-weight: bold;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
}

.bio {
Position: absolute;
Top: 1px;
right: 1px;
Height: 120px;
Width: 225px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
Color: #fff;
overflow: auto;
font-size: 11px;
}


.knownb {
Position: absolute;
bottom: 15px;
right: 15px;
Height: 200px;
Width: 285px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
z-index: 3;
}

.knownb1 {
Position: absolute;
Top: 15px;
Left: 15px;
Height: 148px;
Width: 235px;
Border-radius: 5px;
Border: solid 10px #fff;
}

.knownt {
Position: absolute;
bottom: -20;
left: 60px;
Height: 30px;
Width: 110px;
background-color: #000000;
padding: 3px;
text-align: center;
color: #fff;
Font-size: 24px;
Font-family: 'cinzel', cursive;
Font-weight: bold;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
}

.known {
Position: absolute;
Top: 1px;
right: 1px;
Height: 120px;
Width: 225px;
background-color: #000000;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
Border-radius: 10px;
Color: #fff;
overflow: auto;
font-size: 11px;
}


Strike {
Color: ffd700;
text-decoration: none;
filter:drop-shadow(0px 0px 6px #34041d);
Font-family: 'alex brush', cursive;
font-size: 20px;
}

U {
Color: #fff;
background: #880000;
text-decoration: none;
font-weight: bold;
letter-spacing: 2px;
padding: 1px;
}


B{
font-size: 13px;
color: #e82032;
font-family: 'fondamento', cursive;
text-shadow: -1px 0 #222, 0 1px #222, 1px 0 #222, 0 -1px #222;
}

I{
Color: #f8e09a;
letter-spacing: 1px;
font-size: 12px;
font-family: 'fondamento', cursive;
font-weight: bold;
}


a {
color: #f8e6bf;
Text-decoration: none;
}

a:hover {
Cursor: url(http://31.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), progress !important;
}


</style>

<div class="main">
<div class="oocb">
<div class="oocb1">
<div class="ooct">Out of Character
</div>
<div class="ooc">
<br>
 • This is <u>sample</u> text.<br><br>
 • The box can <i>scroll</i> with keys<br><br>
 • The image on your <strike>right</strike> will open up the <b>second page</b><br><br>

</div></div></div>
<div class="left">
<font color="#e82032">You're</font> never <font color="#f8e09a">fully dressed</font> without a <font color="#e82032">smile</font>.
</div>
<a class="right" href="#2"></a>
<div class="Alastor">Alastor</div>

<div id="2" class="page2">
<div class="biob">
<div class="biob1">
<div class="biot">Biography
</div>
<div class="bio">
<br>
 • This is <u>sample</u> text.<br><br>
 • The box can <i>scroll</i> with keys<br><br>
 • The image on your <strike>right</strike> will open up the <b>second page</b><br><br>

</div></div></div>

<div class="knownb">
<div class="knownb1">
<div class="knownt">Friends
</div>
<div class="known">
<br>
 <center>
<a href="/profile.php?user=user" target="_blank"><img src="https://i.pinimg.com/originals/7e/46/08/7e460846a4d1fa48326e5f33132bedf4.jpg" class="Friend"></a>
<a href="/profile.php?user=user" target="_blank"><img src="https://i.pinimg.com/originals/7e/46/08/7e460846a4d1fa48326e5f33132bedf4.jpg" class="Friend"></a>
<a href="/profile.php?user=user" target="_blank"><img src="https://i.pinimg.com/originals/7e/46/08/7e460846a4d1fa48326e5f33132bedf4.jpg" class="Friend"></a>
<a href="/profile.php?user=user" target="_blank"><img src="https://i.pinimg.com/originals/7e/46/08/7e460846a4d1fa48326e5f33132bedf4.jpg" class="Friend"></a>
<a href="/profile.php?user=user" target="_blank"><img src="https://i.pinimg.com/originals/7e/46/08/7e460846a4d1fa48326e5f33132bedf4.jpg" class="Friend"></a>
</center>

</div></div></div>

<div class="statsb">
<div class="statsb1">
<div class="statst">Statistics
</div>
<div class="stats">
<br>
 • This is <u>sample</u> text.<br><br>
 • The box can <i>scroll</i> with keys<br><br>
 • The image on your <strike>right</strike> will open up the <b>second page</b><br><br>

</div></div></div>

<a class="lilal" href="#1"></a>

</div>