css!

This is my css! tysm to my wayy smarter than me brother for making it :] He made it very very easy for you to change all the colors, just replace my color # with yours right at the top! Feel free to use, but credit me if you do so i can help more peeps!

css time!

:root {
    --header-color: #ffb2d2;
    --bg-color: #ffedf2;
    --bg-color-light: #ffd4e6;
    --text-color: #ff84b7;
    --text-color-dark: #ff549c;
    --special-text: #ff84b7;
    --link-color: #ff84b7;
    --link-color-dark: #ff549c;
}
body {
    background: url("https://i.pinimg.com/564x/d1/bd/2e/d1bd2e3503899256af79db4efb6cd63e.jpg");
    font-family: "Comic Sans MS", "Comic Sans" !important;
    color: var(--text-color);
}
a, a div {
    color: var(--link-color) !important;
}
h1,
h2,
h3,
h4,
h5,
b,
button,
input[type=submit] {
    color: var(--link-color-dark);
}
h4 {
    margin-bottom: 0px;
}
h2 {
    font-size: 28px;
}
button, input[type=submit] {
    border: 3px solid #ffc3dc;
    padding: 5px 15px;
    border-radius: 6px;
    /*font-family: "Comic Sans MS";*/
    font-weight: bold;
    background: var(--bg-color-light);
    box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.4);
}
audio::-webkit-media-controls-enclosure {
    background: var(--bg-color-light);
}
#header {
    background: #ffb2d2 !important;
    border-bottom: 3px solid var(--text-color) !important;
}
#header a,
#header a div {
    color: var(--link-color-dark) !important;
}
#hSub {
    background: var(--bg-color-light) !important;
}
#top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#top a {
    width: 135px;
}
#online {
    background: url(http://www.myspacegens.com/images/online_now/006.gif) no-repeat 50% 50%;
    height: 20px;
}
#online img {
    visibility: hidden;
}
#block:after,
#report:after,
#sMsg:after,
#add:after {
    content: "";
    background: url("https://media.tenor.com/images/5146396979b84b2cb67fb637d5bf9639/tenor.gif") no-repeat 0 0;
    background-size: contain !important;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    left: -3px;
}
#block:after {
    background: url("https://thumbs.gfycat.com/CluelessCelebratedFieldspaniel-small.gif") no-repeat 0 0;
    left: 1px;
}
#report:after {
    background: url("https://pa1.narvii.com/6857/7c2bb21654dd89b5c8523308e3cc994c37a2eec7_hq.gif") no-repeat 0 0;
}
#sMsg:after {
    background: url("https://www.kasimirhaapala.com/img/call.gif") no-repeat 0 0;
}
#add:after {
    background: url("https://pa1.narvii.com/6364/f801122efdebf12bac9bef915a311f4905469c51_hq.gif") no-repeat 0 0;
    height: 16px;
    left: 9px;
    top: 10px;
}
#block,
#add,
#report,
#sMsg {
    background: none;
    position: relative;
}
.blog {
    background-color: var(--bg-color-light);
}
.short td:first-of-type div {
    text-align: left !important;
}
.shortRight {
    width: 100%;
    text-align: center;
}
.shortRight div:first-child {
    font-weight: bold;
    color: var(--text-color-dark);
    font-size: 18px;
}
.rightHead, .boxHead {
    background: var(--bg-color-light);
    padding-left: 4px;
    border-radius: 8px;
    padding: 5px 10px;
}
.player {
    background: var(--bg-color-light);
    width: auto;
    color: var(--text-color-dark);
}
.box, #avatar, .fwiendFace img {
    border: 4px solid var(--bg-color-light) !important;