Disco

<style>
 .mp{
position: fixed;
top: 2vh;
width: 3vh;
right: 1vw;
height: 2vh;
line-height: 18px;
font-size: 14px;
color: #fff;
 background-color:#7F9FB8;
 border:2px double #E8B5ED;
border-radius:6%;
text-align: center;
overflow: hidden;
padding-left:1px;
padding-bottom:4px;
z-index:900;
}

.mpc{
float: left;
margin-top: -40px;
margin-left: -10px;
height: 35px;
width: 35px;
opacity:0;
}
</style>

<style>

@import url('https://fonts.googleapis.com/css?family=Calligraffitti|IM+Fell+Great+Primer+SC|Inconsolata|Jim+Nightshade|Megrim|Nova+Slim|UnifrakturCook:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alegreya+SC|Bahianita|Cabin+Sketch|Cormorant+Garamond|EB+Garamond|El+Messiri|Exo|Marck+Script|Merienda|Ovo|Sawarabi+Mincho|Scheherazade&display=swap');
@import url('https://fonts.googleapis.com/css?family=Akronim|Averia+Gruesa+Libre|Frijole|Julee|Mate+SC|Milonga|Montserrat+Subrayada:400,700|Redressed|Sumana|Swanky+and+Moo+Moo&display=swap');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}

body{
background: url(https://i.imgur.com/uzRwaZc.png);
background-size: cover;
background-position: center;
}



#box1, #box2, #box3, #box4{
position: fixed;
background: #81A4B8;
padding: 1%;
z-index: 5;
box-shadow: 1vh 1vh 1vh #000;
height: 40vh;
width: 40vh;
font-family: 'Calligraffitti';
font-size: 2vh;
color: #E8BCF1;
transition: 0.3s;
overflow: auto;
}

#box1{top: 1vh;right: 76.5vw;}

#box2{bottom: 2vh;right:76.5vw;}

#box3{top: 1vh;right: 3.5vw;}

#box4{bottom: 2vh;right: 3.5vw;}


h1{
font-family: 'Milonga';
font-size: 4vh;
text-shadow: 0 0 1vh #C890FB;
}
a{
color: #E8BCF1;
transition: 0.5s;
font-family: 'Averia Gruesa Libre';
text-decoration: underline;
}

a:hover{

transition: 0.4s;
color: #2A3B42;
text-shadow: 0 0 1vh #ff5454;
}


.r{float:right;}


</style>


<div id="title"></div>

<div id="box1">
<h1>Dossier</h1>
Name<div class="r">Disco</div><br><br>
Gender<div class="r"></div><br><br>
Race<div class="r"></div><br><br>
Height<div class="r"></div><br><br>
Occupation<div class="r"></div><br><br>
Orientation<div class="r"></div><br><br>
<br>

</div>

<div id="box2">
<h1>Story</h1>
<p>

</p></div>

<div id="box3">
<h1>Relations</h1>
<li></li><br>
<li></li><br>
<li></li><br>
<li></li><br>
<li></li><br>
<li></li><br>




</div>

<div id="box4">
<h1>OOC</h1>
<ol>
<li></li><br>

<li></li><br>

<li></li><br>

<li></li><br>

<li></li><br>

<li></li><br>



</div>
<div id="bar1"></div>
<div class="mp" title="Laxcity - introvert (feat. hrvey)">♪♪<div class="mpc">
<audio controls loop><source src="https://od.lk/s/ODVfMTExODQ0OTdf/%E3%83%9E%E3%82%AF%E3%83%AD%E3%82%B9MACROSS%2082-99%20x%20YUNG%20BAE%20-%20Selfish%20High%20Heels%20%28Feat.%20Harrison%20%29.mp3

">
</audio>
</div>