bliss ju mp menu

<style>
  @font-face {
    font-family: sweety;
    src: url(https://dl.dropbox.com/s/yoiop0myv47eaoy/SweetyRasty.otf);
  }

  @font-face {
    font-family: good-time;
    src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
  }

  @font-face {
    font-family: cerl;
    src: url(https://dl.dropbox.com/s/vaz4fe5yzk1uiku/CHERL___.TTF);
  }

  @font-face {
    font-family: 'Magica';
    src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  }

  html {
    background: #FFA6C0;
  }

  body {
    background: transparent;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .container,
  .box,
  #music-player,
  #links {
    transition: all 2s ease;
    transition-timing-function: cubic-bezier(0.75, 0.45, 0.05, 1);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .container,
  .box {
    border-radius: 50%;
    box-shadow: 0 0 1em 0.625em rgba(181, 69, 102, 0.35) inset, 0 0 0.5em rgba(181, 69, 102, 1);
  }

  .item2 {
    transition-delay: 0.25s;
  }

  .item3 {
    transition-delay: 0.5s;
  }

  #holder {
    position: relative;
    margin: auto;
    width: 14em;
    height: 14em;
  }

  #holder:hover .container {
    transform: rotate(360deg) translateX(-3.5em);
    animation: blur 0.5s;
  }

  #holder:hover .item1 {
    transform: translate(2.5em, -8.25em);
  }

  #holder:hover .item2 {
    transform: translate(6.5em, 0);
  }

  #holder:hover .item3 {
    transform: translate(2.5em, 8.25em);
  }

  .container,
  #music-player {
    border: 1px solid #000;
  }

  .container {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url("https://media.discordapp.net/attachments/890617367284027443/973075508524888124/on_Twittero.jpg?width=624&height=624"), no-repeat;
    background-size: 100%;
    background-position: center;
    padding: 0.625em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  svg {
    fill: white;
    opacity: 85%;
    transform-origin: center;
    width: 100%;
    animation: spin 8s linear infinite;
  }

  @keyframes spin {
    100% {
      transform: rotate(-360deg);
    }
  }

  .box {
    position: absolute;
    z-index: 2;
    height: 60%;
    width: 60%;
    background: white;
    overflow: auto;
    padding: 2em 0.625em;
    text-align: center;
  }

  .box p {
    transition: opacity 0.5s ease;
    opacity: 0;
    transition-delay: 2s;
    font-family: 'Magica';
    font-size: 1em;
    line-height: 1em;
    color: black;
    font-weight: bold;
  }

  #holder:hover .box p {
    opacity: 1;
  }

  #music-player {
    position: absolute;
    background: linear-gradient(#FF99B7 20%, white);
    width: 6em;
    height: 2em;
    display: inline-flex;
    border-radius: 0.875em;
    padding: 0.125em;
    transition-delay: 0.75s;
  }

  #holder:hover #music-player {
    transform: translate(-5.5em, 9em);
  }

  #section01,
  #section02 {
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #section01 {
    margin-right: 0.125em;
    flex: 33%;
  }

  #section02 p {
    transform: translateX(100%);
    animation: marquee 6s linear infinite;
    font-family: good-time;
    letter-spacing: 0.1em;
  }

  #section02 {
    flex: 66%;
  }

  #section01 img {
    height: 1.5em;
  }

  #section01 img:hover {
    animation: rotating 0.3s linear infinite;
  }

  a {
    text-decoration: none;
  }

  #links {
    position: absolute;
    font-size: 1em;
    transition: opacity: 0.5s;
    transition-delay: 0.75s;
    opacity: 0;
    font-family: cerl;
  }

  #holder:hover #links {
    transform: translate(-5.5em, -3.625em);
    opacity: 1;
  }

  h3 {
    color: white;
    text-shadow: 0 0 1px black, 0 0 2px black;
    padding: 0.125em;
    font-family: 'Magica';
    font-size: 1.5em;
  }

  @keyframes blur {
    0% {
      filter: blur(0);
    }

    100% {
      filter: blur(5px);
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes rotating {
    0% {
      transform: rotate(0);
    }

    33% {
      transform: rotate(-25deg);
    }

    66% {
      transform: rotate(25deg);
    }

    100% {
      transform: rotate(0);
    }
  }
</style>
</head>

<body>
  <div id="holder">
    <div id="music-player">
      <div id="section01">
        <p><img src="https://dl.dropbox.com/s/88k53h07cfna8he/379DE4BE-1A02-4CB2-B008-ED444C1F8FA8.gif" id="startOrStopImg" alt="Play Button"></p>
      </div>
      <div id="section02">
        <p> Oh My God! by Girl’s Day</p>
      </div>
    </div>
    <div class="container"><svg viewBox="0 0 100 100" width="240" height="240">
        <defs>
          <path id="circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0" />
        </defs><text font-size="1em" font-family="sweety">
          <textPath xlink:href="#circle"> Naomi/Nao. pisces asian filipino </textPath>
        </text>
      </svg></div>
    <div class="item1 box">
      <h3>about me!</h3>
      <p> info about me  </p>
    </div>
    <div class="item2 box">
      <h3>rules!</h3>
      <p>info rules </p>
    </div>
    <div class="item3 box">
      <h3>extra!</h3>
      <p> info extra</p>
    </div>
  </div>

  <script>
    document.getElementById("startOrStopImg").onclick = function() {
      var audio = document.getElementById("audio");
      if (audio.paused) audio.play();
      else audio.pause();
    };
  </script>
  <audio id="audio" src="https://dl.dropbox.com/s/9yfgangqp2ahzor/yt1s.com%20-%20Oh%20My%20God.mp3">

  </audio>
  </div>