bliss ju mp | https://pastebin.com/GRpdTMSb

HTML

<!DOCTYPE html>
<html>
<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);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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;
}

@media (min-width: 900px) {
    body {
        transform: scale(1.1, 1.1);
    }
}

.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://dl.dropbox.com/s/29t7eb3avyl0o24/original%20%2818%29.gif"), no-repeat;
    background-size: 100%;
   ...