better css wow

a * {
    color: #42497f;
}


h4 {
    color: #ffffff;
    margin-bottom: 0px;
}

body {
    background: url(https://i.pinimg.com/originals/4b/f9/9e/4bf99e54d7154f1ee5d2ef3482381555.gif);
    background-attachment: fixed;
    text-align: center;
}
div#container {
    font-family: MS Gothic;
    color: white;

}

.rightHead , #block , #report , .url   {
      display: none;
}

#name.uName::after {
      content: "'s page of hell and chaos";
      color:  white;

}

.boxHead {
      background: rgba(57, 255, 20, 0);
      text-align: center;
}

.short , div.box.fwiends ,.player{
      background:  rgba(66,73,127,0.62);
      border solid 1px rgba(66,73,127, 0.62);
      border-radius: 10px;
}

.avatar  {
    margin-right: 20px;
    cursor: zoom-in;
    image-orientation: none;
}

.tableLeft {
      background: rgba(66,73,127,0.62);
}
.tableRight {
      background: rgba(66,73,127,0.42);
}
.tableLeft b::after  {
     content: " said";
}

.boxInfo {
     color: rgb(245, 147, 199);
}

.avatar {
     border: double 6px white;
     border-radius: 200px;
}

.blurbs  , .blog{
      height: 300px; overflow-y: scroll;
      background: rgba(66,73,127,0.62);
      border: solid 2px rgba(66,73,127,0.62);
      border-radius: 10px;
}

.topLeft {
    float: left;
    width: calc( 40% - 20px );
    padding: 10px;
}


.topRight {

    float: left;
    width: calc( 60% - 40px );
    padding: 10px;
}

.topLeft {
    float: right;
    width: calc( 40% - 20px );
    padding: 10px;
}

#userWall {
   height: 300px; overflow-y: scroll;
}


.floating, .box  {
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

.floatingslowly, .short , div.box.fwiends {
    animation-name: floatingslowly;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floatingslowly {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}

#add {
    font-size: 0px;
}

#add::after {
    content: "fwiends";
    font-size: small;
}

.extended {
    background: url(h);
}

.tableLeft img {
   border: 5px double white;
   border-radius: 200px;
}




div#header {
    background: rgba(251,247,186,0.42);
}


@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake , #add:hover , #sMsg:hover , .userWall:hover , #hSub a:hover{
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

.spin , .avatar:hover , .tableLeft img:hover{
    animation-name: spin;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.player::after {
    content: "";
    display: block;
    position: relative;
    width: calc(40% -20px);
    height: 390px;
    max-width: 390px;
    background-position: 0 0;
    background-size: 100% 100%;
    background-image: url(https://cdn.discordapp.com/attachments/777758464625475614/850744613073322014/ezgif.com-gif-maker_1.gif);
}


#sMsg , #add{
    background-repeat: no-repeat;
    background-image: url(https://media.discordapp.net/attachments/777758464625475614/850746752633536542/ezgif.com-gif-maker_2.gif);
}