Kiki's Delivery SpaceHey Layout

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur844.cur), auto !important;}</style>
<a href="https://www.cursors-4u.com/cursor/2011/11/11/cute-red-bow-tie-pointer.html" target="_blank" title="Cute Red Bow Tie Pointer">
    <img src="https://cur.cursors-4u.net/cursor.png" alt="Cute Red Bow Tie Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
@import url('https://fonts.googleapis.com/css2?family=Benne&family=Roboto&display=swap');
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Benne&family=Roboto&display=swap');
</style>
<style>

/*  Kiki's Delivery Service
            by TonyTheTiger (spacehey.com/heytony) */

/*  to start off, this part bellow will control the base of your profile.
P.S. backround attachment is the one that makes your background either stay put
or scroll with you. use "fixed" or "scroll" for that part. */

    html:before {
         animation: grain 5s steps(10) infinite;
          background-image: url('https://i.ytimg.com/vi/FNs4RDi_8eA/maxresdefault.jpg');
          content: "";
          height: 300%;
          left: -50%;
          opacity:.2;
          position: fixed;
          top: -110%;
          width: 300%;
         pointer-events:none;
    }
    @keyframes grain {
         0%, 100% { transform:translate(0, 0) }
         10% { transform:translate(-5%, -10%) }
         20% { transform:translate(-15%, 5%) }
         30% { transform:translate(7%, -25%) }
         40% { transform:translate(-5%, 25%) }
         50% { transform:translate(-15%, 10%) }
         60% { transform:translate(15%, 0%) }
         70% { transform:translate(0%, 15%) }
         80% { transform:translate(3%, 35%) }
         90% { transform:translate(-10%, 10%) }
    }
    body {
        background-color: rgba(13,11,88,0.5);
        background-image: url('https://i.pinimg.com/originals/fd/b1/37/fdb1379da1ef7a5d521458cacdeab7b4.jpg');
        background-size: 165%;
        background-position: top right;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    Main {
        Background-color: rgba(13,11,88,0.5);
    }
    nav a:hover{
        color: grey!important;
        text-decoration: underline;
    }
    nav .top {
        background-color: rgba(12,11,13,.5);
    }
    nav .links {
        background: rgba(36,36,200,.5);
        padding: 3.5px 16px 5.5px 16px;
    }
    nav .links a {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
    }
    nav .links a:hover {
        color: ;
        text-decoration: ;
    }
    footer {
        font-family: 'Roboto', sans-serif;
        background-color: rgba(12,11,13,.5);
        margin: 0px;
        background-image: url('');
        background-position: ;
        background-attachment: ;
        background-repeat: ;
    }
    body, div {
        font-family: 'Roboto', sans-serif;
        font-size:  14px;
        color: #dadada;
        font-weight: ;
        font-style: ;
        text-decoration: none;
    }


/*  bellow this you can change the left side of your profile,
including the intrerests details' table, but only the heading! */

    .profile h1 {
        font-family: 'Benne', serif;
        font-size: 26px;
        text-align: center;
        background: rgba(12,11,13,.5);
        color:  white;
        border-radius: 100px;

    }
    .online {
        color: skyblue!important;
    }
    .online img,
    .offline img {
        display: none;
    }
    .online:before {
        content: "💙";
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 1s;
    }
    .blog-preview {
        text-align: center;
        color: white!important;
        background: transparent;
        border-radius: 15px;
        border: dotted  rgba(12,11,13,.5);
    }
    .profile-pic img {
            border-radius: 15px;
        }
    .friends img {
        border-radius: 5px;
    }
    .mood {
        color: white!important;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        background: rgba(12,11,13,.5);
        width: 100%;
        border: none;
        border-radius: 15px;
        margin: 10px 0;
    }
    .url-info {
        text-align: center;
        color: white!important;
    }
    .profile .contact {
        background-image: url('https://i.imgur.com/TeTbG1u.png');
        background-size: contain;
        background-position: right 60% top 5%;
        background-repeat: no-repeat;
        background-attachment: scroll;
        border: none;
    }
    .profile .contact .heading,
    .profile .table-section .heading,
    .home-actions .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        text-align: center;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        color: ;
        padding: 2px 7px;
    }
    .details-table td {
        background: rgba(36,36,200,.5);
        vertical-align: top;
        border-radius: 5px;
    }
    .details-table td:first-child {
        text-align: center;
        background: transparent;
        color: white!important;
        font-weight: bold;
        width: 33%;
        border-radius: 5px;
    }

/*  this is the part where you tweak the right side of your profile */

    .profile .blurbs {
        background: rgba(12,11,13,.5);
        background-image: url('https://i.imgur.com/jkxy59R.png');
        background-repeat: no-repeat;
        background-attachment:  scroll;
        background-size:  100%;
        background-position: right  70% top 1%;
        margin: 20px 0px;
        border: none;
        border-radius: 15px;
    }
    .profile .friends {
        background: rgba(12,11,13,.5);
        background-image: url('');
        border-radius: 15px;
        border: none;
    }
    .profile .blurbs .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        text-align: center;
        color: white!important;
    }
    .profile .friends .heading {
        font-family: 'Benne', serif;
        font-size: 16px;
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        text-align: center;
        color: white!important;
    }
    .profile .blurbs .section h4 {
        margin: 14px;
        color:  white;
        font-weight: bold;
    }
    .profile .friends .person p {
        color: white;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    .count {
        color: skyblue!important;
    }
    .comments-table {
        display: block;
        height: 300px;
        overflow-y: auto;
    }
    .comments-table,
    .music-table{
        color: white!important;
        border: none;
        border-radius: 15px;
    }
    .comments-table td,
    .music-table td {
        background: rgba(36,36,200,.5);
        background-image: url('https://media4.giphy.com/media/3o7GVDAkLp4cEMbzwc/giphy.gif');
        background-position: center;
        background-size: cover;
        vertical-align: top;
        position: relative;
        border-radius: 15px;
    }
    .comments-table td:first-child,
    .music-table td:first-child {
        background: rgba(36,36,200,.3);
        text-align: center;
        font-weight: bold;
        width: 38%;
        border-radius: 15px;
    }


/*  this is the part you can change how the links look */

    a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover,
    a.man:link, a.man:active, a.man:visited, a.man:hover,
    a, a:link, a:active, a:visited, a:hover,
    a.navbar:link, a.navbar:active, a.navbar:visited, a.visited:hover,
    a.text:link, a.text:active, a.text:visited, a.text:hover,
    a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited,
    a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited,
    a.redlink:hover {
        color: skyblue;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
    }
    a.navbar:hover, a.man:hover, a:hover {
        color: white!important;
        font-weight: ;
        font-style: italic;
        text-decoration: underline;
    }


/*  Hope these comments helped you out!
Special thanks to Cory (spacehey.com/cory) and Katie (spacehey.com/fighttheducks) */

</style>