My CSS

body {
    font-weight: 500;
    font-family: Comic Sans MS;
    color: white;
    background-image: url(https://i.imgur.com/4OlkoDk.gif);
}
.extended::after{
    display: block;
    content: "yung, dumb, livin off mum";
        font-size: 15px;
    color: white;
        text-shadow: #fff 0 0 7px;
    background-image: url("https://s3.amazonaws.com/image.blingee.com/images10/content/output/2007/5/29/165922638_295406d5.gif?4");
        background-size: cover;
        background-position: center;
    border: 2px solid black;
    width: 100%;
    height: 25px;
    margin-bottom: 0px;
    text-align: center;
    overflow: auto;
    box-sizing: border-box;
        font-weight: 800;
}
.logo{
        font-size: 0;
}

.logo::after{
        content: "I like that look in your eyes, it makes my heart race.";
        font-size: 15px;
        color: white;
        text-shadow: #fff 0 0 7px;
        font-weight: 800;
}
.boxButton {
color: pink
}
.rightHead {
    background: #ff60a9;
    color: #ffd5e5;
    padding-left: 4px;
}
.player {
    padding: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #000000;
    color: #ffd5e5;
    width: calc(100% - 8px );
    border: 5px solid #000;
}
.avatar {
    width: 250px;
    margin-right: 20px;
    cursor: zoom-in;
    image-orientation: from-image;
}
.boxHead {
    background: #ff60a9;
    color: #ffd5e5;
    padding: 2px;
    padding-bottom: 2px;
    padding-left: 100px;
}
.tableLeft{
    background: #000;
        border: 2px dashed #fff
}

.tableRight{
    background: #ff5ea2;
        border: 2px dashed #fff
}
h4 {
    color: #ff60a9;
    margin-bottom: 0px;
}
a {
    color: #fff;
}

div#header{
    all: unset;
    font-family: Monospace;
    font-size: 15px;
    background: #000;
    color: #fff;
    position: fixed;
    width: calc( 100% - 15px );
    height: 22px;
    padding: 5px;
    left: 0px;
    top: 0px;
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid black;
    padding-left: 10px;
    padding-top: 6px;
    overflow: hidden;
    z-index: 300;

}

div#hSub{
    all: unset;
    font-family: monospace;
    font-size: 15px;
    background: #ff5ea2;
    font-size: small;
    text-align: center;
    margin: 0px;
    padding: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-left: 10px;
    padding-top: 4px;
    position: fixed;
    left: 0;
    top: 34px;
    width: calc(100% - 15px );
    color: #000;
    height: 15px;
    z-index: 300;
}

}
a:link{
        color: #fc569c;
}

a:active{
        color: #fc569c;
}

a:visited{
        color: #ffb9e6;
}
.box{
    border: transparent;
}



.boxInfo{
        background: #000;
        border: 2px dashed #fff;

}

.boxButton{
        color: #fc569c;
}

.boxHead{
    background: transparent;
    color: white;
        border: 2x dashed #fff;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
}

#sMsg{
        font-size: 0px;
        background-image: url("https://i.imgur.com/8Qe1aNS.png");
}

#sMsg::after{
        content: "lets vibe";
        font-size: 13px
}
#block{
        font-size: 0px;
        background-image: url("https://i.imgur.com/8Qe1aNS.png");
}

#block::after{
        content: "block, rip";
        font-size: 13px
}

#report{
        font-size: 0px;
        background-image: url("https://i.imgur.com/8Qe1aNS.png");
}

#report::after{
        content: "report me";
        font-size:13px
}

#add{
        font-size: 0px;
        background-image: url("https://i.imgur.com/8Qe1aNS.png");
}

#add::after{
        content: "add me loser";
        font-size: 13px
}
.rightHead{
    background: transparent;
    color: pink;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
}
.topLeft{
        background-image: url("https://i.imgur.com/gmncd22.jpg");
        background-size: cover;
        background-position: center;
        border: 2px dashed #fff;
        padding: 1px;
        color: white;
        text-shadow: #ff1c8a 0 0 7px;
        animation-duration: 1.5s;
        animation-name: slidein;
}
@keyframes slidein{
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0%;

    }
}

#gender{
        visibility: hidden;
        position: relative;
}

#gender::after{
        visibility: visible;
        content: "Your Kouhai";
        font-size: 15px;
        top: 0;
        left: 0;
        position: absolute;

}

#country{
        visibility: hidden;
        position: relative;
}

#country::after{
        visibility: visible;
        content: "Purgatory";
        font-size: 15px;
        top: 0;
        left: 0;
        position: absolute;
}

.topRight{
        animation-duration: 1.5s;
        animation-name: slide;
}

@keyframes slide{
        from {
                margin-right: -100%;
        }
        to {
                margin-right: 0%;
        }

}
.player{
        color:000;
        background-size: cover;
        background-position: center;
}
h4{
    color: #fff;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
        background-image: url("https://i.imgur.com/y4gT1i3.jpg");
        border: 2px solid #fff;
}
.blurbs{
        background: #000;
        border: 2px dashed #fff;
        text-align: center;
}
.fwiendCount{
    color: #ff5cad;
}

.fwiendCounter{
        color: #fff;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;

}
#top a{
    text-decoration: none;
        color: #fc569c;
}

.fwiendFace{
        background-image: url("https://media0.giphy.com/media/abt3O3BEwR6wg/giphy.gif");
        border: 2px solid #fff;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 0px;
        max-width: 100vw;
}

.fwiendFace img{
        object-fit: cover;
        background-position: center;
        display: absolute;
        border-radius: 50%;
        width: 100px;
        height: 100px;
}

.fwiendFace:hover{
        animation: shake 1s;
        animation-iteration-count: infinite;
}

@keyframes shake{
  0%  { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }

}

#viewFriends{
        color: #000;
        background: #fa167e;
        border: 2px dashed #fff;
}
.blogTitle{
        font-size: 0px;
}

div#footer{
        position: fixed;
        right: 0px;
        font-size: 0px;
        pointer-events: none;
}
div#footer::after{
        content: url("https://i.imgur.com/L3dmfAB.png");
        max-width: 200px;
}
@media only screen and (max-width : 768px){
    * {
       -webkit-animation: none !important;
       -moz-animation: none !important;
       -o-animation: none !important;
       -ms-animation: none !important;
       animation: none !important;
    }
/* Start http://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym749.cur), auto !important;} /* End http://www.cursors-4u.com */