Mawaru Penguindrum Inspired Layout (with YouTube autoplay audio player + animated PFP)

<style>

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {

        --logo-blue: transparent;

        --darker-blue: magenta;

        --lighter-blue: #212653;

        --even-lighter-blue: transparent;

        --lightest-blue: transparent;

        --dark-orange: magenta;

        --light-orange: #212653;

        --even-lighter-orange: transparent;

        --green: #518cc0;

    }

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: transparent;

}

::-webkit-scrollbar-thumb {

  background: magenta;

}

::-webkit-scrollbar-thumb:hover {

  background: magenta;

}

body {

  font-family: 'VT323', sans-serif;

  font-size: 150%;

  background-image: url('https://64.media.tumblr.com/ddbdc94f8c72491f5d4e7c6bada2a3a1/tumblr_pq9vbvfbZS1y5poaro1_540.gif');

  background-size: cover;

  background-attachment: fixed;

  background-repeat: no-repeat;

}

main {

  background-color: rgba(0,0,0,0);

  color: white ;

  background-image: url('https://64.media.tumblr.com/1609d4d75e8c67f858f426a9b0fa4f9e/7e0f9de42a24dbd9-55/s640x960/310f25797eeb3a10a668a912d6c90589e554e392.png');

  background-size: cover;

  background-repeat: no-repeat;

  height: 828px;

  border: 5px double magenta;

  overflow-y: scroll;

}

footer{

  background: transparent;

  color: white;

}

.profile-pic img {

  border-radius: 50%; 

  border: 5px dotted magenta; 

  content: url('https://64.media.tumblr.com/1c6b48cbdd3a7e7dbf9207d03c132d95/tumblr_nh9x54wozx1qf0rjso1_250.gif');

  width: 160px; 

  height: 160px;

}

.profile .friends .person p {

    color: magenta !important;

}

.profile .friends .person img {

  border-radius: 50%; 

  border: 5px dotted magenta; 

  width: 100px; 

  height: 100px;

}

.profile .blurbs {

  background: url('https://images.pond5.com/starry-sky-pixel-background-stars-footage-204781872_iconl.jpeg');

  background-size: contain;

  overflow-y: scroll;

  border: 5px double magenta; 

}

.contact {

  background: url('https://images.pond5.com/starry-sky-pixel-background-stars-footage-204781872_iconl.jpeg');

  background-size: contain;

}

.contact .inner a img {

    font-size: 0;

}

.contact .inner a img:before {

    font-size: 1em;

    display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* Add to Friends */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* Add to Favorites */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* Send Message */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* Forward to Friend */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* Instant Message */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* Block User */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* Add to Group */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* Report Profile */

content: url('https://i.ibb.co/qFS1MgV/apple.png');

}

table.comments-table{

  display: block;

  height: 400px!important;

  overflow-y: scroll;

  border: 5px double magenta;

}

.comments-table td{

  background: url('https://images.pond5.com/starry-sky-pixel-background-stars-footage-204781872_iconl.jpeg');

  background-size: contain;

  border: 5px dotted magenta; 

}

.comments-table td:first-child {

  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/HD_transparent_picture.png/1200px-HD_transparent_picture.png');

  border: transparent;

}

.comments-table td:first-child img:not(.icon) { 

  border-radius: 50%; 

  border: 5px dotted magenta; 

  width: 100px; 

  height: 100px;

}

.table-section .inner .details-table {

  background: url('https://images.pond5.com/starry-sky-pixel-background-stars-footage-204781872_iconl.jpeg');

  background-size: contain;

}

.table-section .inner .details-table tbody tr td{

  color: white;

}

* {cursor: url(https://cur.cursors-4u.net/food/foo-1/foo76.cur), auto !important;}

.himari {

  background: url('https://i.pinimg.com/originals/b9/5f/7d/b95f7dfa0c71e657fd5ce0dc9dfadebb.png');

  background-repeat: no-repeat;

  position: fixed;

  right: 0px;

  bottom: -200px;

  height: 1058px;

  width: 448px;

  z-index: -1;

  pointer-events: none;  

}

.tripleh {

  background: url('https://i.ibb.co/xYB9bhd/tripleh.png');

  background-repeat: no-repeat;

  position: fixed;

  left: 0px;

  bottom: -400px;

  height: 1058px;

  width: 640px;

  z-index: -1;

  pointer-events: none;  

}

@media (max-width: 600px) {

.himari{display:none;}

.tripleh{display:none;}

}

</style>

<div class="himari"></div>

<div class="tripleh"></div>

<style>

/*WINAMP AUDIO PLAYER FROM YOUTUBE SOURCE. SEE https://blog.spacehey.com/entry?id=1268403 FOR MORE DETAILS. COPY/PASTE THIS IN YOUR "ABOUT ME" OR "WHO I'D LIKE TO MEET SECTION"*/

/*There will be a large space underneath the audio player if you choose to add text or any other content below. To solve this, put the content you want in the "contentrelative" div container (see below)*/

.winamprelative {

  position: relative;

  height: 150px; /*Adjust according to preferences. This adjusts size of the audio player container to prevent overlap with other content*/

.contentrelative {

  position: relative;

  bottom: 100px; /*Adjust according to preferences. This adjusts alignment of your desired content relative to the audio player*/

}

.winamp {

  background: url('https://i.ibb.co/Wf1D1hY/mwpd-winamp.png');

  position: relative;

  width: 274px;

  height: 116px;

  pointer-events: none;

  z-index: 1;

}

.winampmarquee {

  position:relative;

  width: 155px;

  height: 10px;

  top: 41px;

  left:110px;

  font-family:'Courier New', monospace;

  font-size:8px;

  font-weight: bold;

  color: salmon;

  z-index: 2;

}

.iframe {

  position: relative;

  width: 274px;

  height: 116px;

  bottom: 116px;

  z-index: 0;

}

</style>

 <div class="winamprelative">

 <marquee class="winampmarquee" direction="left" scrollamount="5" behavior="scroll">***  1. YUKARI HASHIMOTO - 運命の子たち <3:46></marquee>

 <div class="winamp"></div>

 <div class="iframe">

   <iframe width="274" height="116" src="https://www.youtube.com/embed/4NHoUX0wxb8?si=c-v2Ds7tTYg3733a//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

 </div>

 <div class="contentrelative">

   [INSERT CONTENT HERE]

 </div>

</div>