$("#i").click(function(){
$("#one") .stop().delay(0) .animate({opacity: '1'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({left: '22%'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
});

$("#f").click(function(){
$("#two") .stop().delay(0) .animate({opacity: '1'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({left: '22%'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
});

$("#i2").click(function(){
$("#three") .stop().delay(0) .animate({opacity: '1'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({left: '22%'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
});

$("#f2").click(function(){
$("#four") .stop().delay(0) .animate({opacity: '1'}, 10, 'linear');
$("#four") .stop().delay(0) .animate({left: '22%'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#one") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#two") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({opacity: '0'}, 10, 'linear');
$("#three") .stop().delay(0) .animate({left: '100%'}, 10, 'linear');
});



$("body").click(function(){
    var audio = document.getElementById("audio");
       audio.play();
  audio.volume = .15;
});






@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bungee+Inline&family=Acme&display=swap');
body {
background-color: #ED008C;
overflow: hidden;
cursor: url('https://i.imgur.com/dfvtLmL.png'), auto;
}

.backgrou {
position: absolute;
margin: auto;
height: 100%;
width:100%;
background-image:url(https://i.imgur.com/BZkHgNg.gif);
background-size: 100% 100%;
background-position: center;
background-repeat: repeat;
z-index: 0;
}

.backgroun {
position: absolute;
margin: auto;
height: 100%;
width:100%;
background: linear-gradient(238deg, #ff71ce, #153CB4);
background-size: 600% 600%;
-webkit-animation: back 4s ease infinite;
animation: back 20s ease infinite;
opacity: .90;
z-index: 1;
}

::-webkit-scrollbar {
width: 1vw;
}
::-webkit-scrollbar-track {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}

@-webkit-keyframes back {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes back {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%
}}


.main {
position: absolute;
margin: auto;
top: 0; bottom: 3.8%;
left: 10.47%;
height: 74%;
width: 40%;
background-image:url(https://i.imgur.com/zAn37YC.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
}

.box {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 14%;
height: 70%;
width: 60%;
background-color: #000;
background-image:url(https://i.imgur.com/xM4VAUw.png);
background-size: auto 100%;
background-position: center;
outline: .3vw solid #00A0D3;
border: .2vw inset #FF2B7F;
z-index: 2;
}

.back {
position: absolute;
margin: auto;
top: 30%;
left: 50%;
height: 10%;
width: 10%;
background-color: #00A9D8;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: 2;
}

.trash {
position: absolute;
margin: auto;
top: 94%;
left: 96%;
background-image:url(https://i.imgur.com/gVPGFpz.png);
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
height: 5%;
width: 5%;
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
z-index: 99;
}

.back div {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 23.5%; right: 0;
height: 90%;
width: 90%;
background-image:url(https://i.imgur.com/yuX9xfb.gif);
background-size: 100% auto;
background-position: center;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.title {
position: absolute;
margin: auto;
height: 10%;
width: 35%;
font-family: Bungee Inline;
text-align: center;
font-size: 4.5vw;
}

#tit1 {
top: 14.5%;
left: 44.2%;
color: #008FCC;
text-shadow: .2vw .2vw #000;
z-index: 10;
}
#tit2 {
top: 14.3%;
left: 44%;
color: #FF2B7F;
text-shadow: -.2vw -.2vw #000;
z-index: 12;
}

.gif {
position: absolute;
margin: auto;
background-color: #00A0D3;
z-index: 30;
}

#g {
top: 14%;
left: 76.2%;
height: 35%;
width: 6%;
clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

#gif1 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 90%;
width: 90%;
background-image:url(https://i.imgur.com/3nKMyXb.gif);
background-size: auto 100%;
background-position: center left;
clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

#i {
top: 13.8%;
left: 76.2%;
height: 17.5%;
width: 6%;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#i:hover {
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
background-color: #240C47;
}

#gif2 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 95%;
width: 92%;
background-image:url(https://i.imgur.com/3nKMyXb.gif);
background-size: auto 200%;
background-position: top 40%;
clip-path: polygon(3% 0, 100% 0, 100% 94%);
}

#f {
top: 31.7%;
left: 76.2%;
height: 17.5%;
width: 6%;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

#f:hover {
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
background-color: #240C47;
}

#gif3 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 95%;
width: 92%;
background-image:url(https://i.imgur.com/3nKMyXb.gif);
background-size: auto 200%;
background-position: 10% 100%;
clip-path: polygon(100% 6%, 3% 100%, 100% 100%);
}

#g2 {
top: 50.8%;
left: 76.2%;
height: 35%;
width: 6%;
clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

#gif4 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 90%;
width: 90%;
background-image:url(https://i.imgur.com/yuX9xfb.gif);
background-size: auto 100%;
background-position: center left;
clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}

#i2 {
top: 50.6%;
left: 76.2%;
height: 17.5%;
width: 6%;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}

#i2:hover {
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
background-color: #240C47;
}

#gif5 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 95%;
width: 92%;
background-image:url(https://i.imgur.com/yuX9xfb.gif);
background-size: auto 200%;
background-position: top 40%;
clip-path: polygon(3% 0, 100% 0, 100% 94%);
}

#f2 {
top: 68.5%;
left: 76.2%;
height: 17.5%;
width: 6%;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

#f2:hover {
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
background-color: #240C47;
}

#gif6 {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 0; right: 0;
height: 95%;
width: 92%;
background-image:url(https://i.imgur.com/yuX9xfb.gif);
background-size: auto 200%;
background-position: 10% 100%;
clip-path: polygon(100% 6%, 3% 100%, 100% 100%);
}

.textb {
position: absolute;
margin: auto;
top: 15%;
left: 23.5%; right: 0;
height: 70%;
width: 25%;
overflow: hidden;
border-left: .1vw solid #000;
border-right: .1vw solid #000;
z-index: 3;
}

.textb div {
position: absolute;
margin: auto;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #FCFFFF;
box-shadow:inset 0 0 10vw #AF68BA, inset 0 0 10vw #774A86, inset 0 0 10vw #160D16;
opacity: .8;
}

.floof {
position: absolute;
margin: auto;

top: 0; bottom: 0;
height: 43%;
width: 23%;
overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
z-index: 30;
}

.floof div {
position: absolute;
margin: auto;
top: 0; bottom: 0;
left: 1%; right: 0;
height: 100%;
width: 95%;
padding: 1vw;
font-family: Anton;
text-align: justify;
letter-spacing: .04vw;
color: #fff;
text-shadow: -.05vw -.05vw #814994, .05vw .05vw #814994, .05vw -.05vw #000, -.05vw .05vw #000;
overflow: auto;
  -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
z-index: 30;
}

#one {
left: 22%; right: 0;
opacity: 1;
}

#two {
left: 100%; right: 0;
opacity: 1;
}

#three {
left: 100%; right: 0;
opacity: 1;
}

#four {
left: 100%; right: 0;
opacity: 1;
}

.bar {
position: absolute;
margin: auto;
top: 71%;
left: 23%; right: 0;
height: 3.5%;
width: 23%;
background-image:url(https://i.imgur.com/aUS7r1g.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 5;
}

h2 {
margin: 1.5vw;
font-size: 2vw;
font-family: Acme;
text-align: center;
}

ul.a {
margin: 0;
list-style-type: circle;
}

u {
color: #FF2B7F;
}

a:link {
color: #008FCC;
 text-decoration: none;
font-variant: small-caps;
}

a:visited {
  color: D6C8AD;
}

a:hover {
cursor: url('https://i.imgur.com/JedEQIA.png'), auto;
  color: EDF0B9;
}

a:active {
  color: 008FCC;
}

big {
font-size: 2.5vw;
font-variant: small-caps;
}

small {
font-size: 1vw;
font-variant: small-caps;
}

::selection {color: black; background-color:none; }
::-moz-selection {color: black; background-color:none; }





<audio id="audio" src="https://od.lk/s/ODVfMjEyNTkxOTVf/it%27s%20summer%201985%2C%20you%27re%20driving%20at%20night.mp3" ></audio>
<div class="backgroun"></div><div class="backgrou"></div>
<div class="main"></div><div class="mainb"></div>
<div class="gif" id="g"><div id="gif1"></div></div>
<div class="gif" id="i"><div id="gif2"></div></div>
<div class="gif" id="f"><div id="gif3"></div></div>
<div class="gif" id="g2"><div id="gif4"></div></div>
<div class="gif" id="i2"><div id="gif5"></div></div>
<div class="gif" id="f2"><div id="gif6"></div></div>
<div class="back"><div></div></div>
<div class="box"></div>
<div class="bar" style="top: 71%;"></div>
<div class="bar" style="top: 25%;"></div>
<div class="title" id="tit1"> マドゥ </div>
<div class="title" id="tit2"> マドゥ </div>
<div class="textb"><div></div></div>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Raccoon" target="_blank"><div class="trash" title="Trash Codes"></div></a>

<div class="floof" id="one"><div>

<h2>Dossier</h2>

<center><div style="position: relative; text-align: left; width: 80%; height: auto; -webkit-mask-image: linear-gradient(to top, black 100%, transparent 0%);">
Given name: <font style=float:right>Madu</font><br><br>
Gender: <font style=float:right> <a target="_blank" href="https://i.imgur.com/jOckAgA.jpg"><b>Female</b></a> </font><br><br>
Age: <font style=float:right>23</font><br><br>
Hair Color: <font style=float:right>Jet Black</font><br><br>
Occupation: <font style=float:right>Student</font><br><br>
Orientation: <font style=float:right>Bisexual</font><br><br>
Marital Status: <font style=float:right><a target="_blank" href="LINK HERE">Seeking</a></font></div></center>





</div></div>

<div class="floof" id="two"><div>

<h2>Persona</h2>
Hasn’t had her cherry popped.
<br><br>

<br><br>
WIP
<br><br>
WIP
<br><br>
WIP
<br><br>
WIP

</div></div>

<div class="floof" id="three"><div>

<h2>Connections</h2>
<B>Just Ask to Be Added!</b>
<li><font style=float:right><a target="_blank" href="LINK">Friend</a></font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
<li><font style=float:right><a target="_blank" href="LINK HERE">Friend</a> </font></li>
</div></div>

<div class="floof" id="four"><div>

<h2>OOC</h2>


<ul class="a">
<li>PM Friendly</li><br>
<li>Any RP Welcome</li><br>
<li>Questions are welcome</li><br>
<li>IC approaches welcome</li><br>
<li>I will usually <b>always</b> respond to IC approaches and shitposts</li><br>



</ul>

</div></div>