base misuki q piden y piden

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
</head>


<div class='main'>
<div class='activator'>
<div id='musicplayer'>
    <div id='musicpixel'>
        <img src='https://64.media.tumblr.com/4b8b5edeb93a938b40814b1dd867833c/tumblr_inline_msbtvcHwwB1rkldve.gif'>
        <div class='overlay'>
            <div class='playpause'><i class="fas fa-play"></i></div>
        </div>
    </div>
    <div id='musictitle'>
        <span class='marquee'>windy summer cr ramdons</span>
    </div>
</div>

<audio id='musicsrc' loop src='https://dl.dropbox.com/s/66c6ocz8rniwpqm/Anri%20-%20Windy%20Summer.mp3'></audio>

  <br></br>

<img src="http://media.tumblr.com/tumblr_m2vnckDvMZ1qid2nw.gif" class="corner1">


<img class=img src="https://64.media.tumblr.com/af0ba9cfc8ec4fce0371acc3f2a5fb5d/8c436493c1c20170-f4/s540x810/b408af581d440ddc4b72833f25095f4b1b926bef.jpg">

<div class="content">
<div id="po">
<div align=left>

hello im <strong>name</strong>
<p></p> info <em>info</em> info <strong>info</strong>, info info info ! info  <em>info </em> info info info info info

<br></br>
info info info info info info info info info info info info info info info info info info info info info info info info

<br></br>
<strong>info info </strong>, info info info info info info info info info info info info info

<br></br>
info info info info info info info info info info infoinfo info info info info info info info info

</div>
</div>

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


<style>
body {
    /*you can remove this, its just so u can see in the editor*/
  margin-top: 10%;
  margin-left: 10%;
  /*okay but until here*/
}

/*main container with everything*/
.main {
width: 300px;
height: 240px;
padding:10px;
overflow: scroll;
transition: 0.5s;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;

}

/*dont move*/
.main .activator {
height: 220px;
width: 100%;
float: left;
display: block;
transition: 0.5s;
}

/*image settings*/
.img {
border-width: 7px;
border-style: solid;
border-image: url(https://i.imgur.com/NJa4bp2.png) 8 fill round;
text-align: center;
width: 285px;
height: 150px;
object-fit: cover;
float: left;
margin-bottom: 10px;
transition: 0.5s;

}

/*dont move*/
.content {
display: none;
margin-top: 15px;
transition: 0.5s;

}
/*dont move*/
.main:hover {
height: 325px;
transition: 0.5s;

}
/*dont move*/
.main:hover .content {
display: block;
white-space: normal;
height: 350px;
transition: 0.5s;
}
/*dont move*/
.activator:hover .img {
float: left;
}

/*text settings/styles*/
#po {
width: 100%;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 70%;
color: black;
padding: 5px;
transition: 0.5s;
overflow: scroll;
height:100px;
}

/*images in corner*/
.corner1 {
    position: absolute;
    top: -3em;
    left: -1em;
    z-index: 99;
    margin-top: 10%;
    margin-left: 10%;
}


/*music player settings*/
#musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 295px;

font-size:20px;
line-height:140%;

background:white;

border: 1px solid black;

}

#musictitle{
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}

#musicpixel{
width:100%;
padding:5px;
position:relative;

min-height: 20px;

background:white;

border-right: 1px solid black;
}


.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;

background:white;
}

#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}

.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.playpause:hover{
cursor:help;
}

#musicpixel img{
display:block;
}

.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}

@keyframes marquee{
0% {
    transform: translate(0, 0);
}
100% {
    transform: translate(-100%, 0);
}
}

</style>

<script>
document.querySelector('.playpause').addEventListener('click', playpause);

function playpause(){
    if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
        document.querySelector('#musicsrc').play();
        document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
    } else{
        document.querySelector('#musicsrc').pause();
        document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
    }

}
</script>