/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}



h2#name.uName{
font-size: 20px;
}

h2#name.uName:after{
font-size: 0px;
}


.uName {
font-size: 0px ;
}

.uName:after {
content: "This epic person" ;
font-size: 15px;
}
.fwiendCount:after {
    font-size: 16px;
    content: " fwiends... yes you heard me right, ";
}
.date {
    font-size: x-small;
    float: right;
}

blockquote p { 
  color: #ffe51a !important;
  text-shadow: #ff002326 2px 2px 0px, #ff002326 -2px -2px 0px;
}

a {
    color: #ffe51a;
}

td.tableLeft {
    text-align: center;
}

.tableLeft img {
    padding-top: 5px;
}

.player snowflake{animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;}


.songName{
text-align:center;
}

span.song__title {
    color: #fffa1a;
}

/* .box>.blogs div:nth-child(2):before {
    background-image: url();
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    content: "";
    position: relative;
    top: 2px;
filter: hue-rotate(25deg);
}
*/

#gender {
animation: changeColor 3s linear infinite !important;
}

.blog {
  background-color: #000;
  padding: 15px;
  border: dashed #ff1a2f80 1px;
  color: white;
}

#hSub {
  color: #ff1a2f80 !important;
}

input, button {
  border: none;
  background-color: black;
  color: #ffe51a;
  padding: 0px;
font-family: "Comic Sans MS";
}

.logo{
    font-size: 0;
}
.logo:before{
    content: "Epic Space";
    font-size: 17px;
    color: white;
font-weight: bold; 
font-family: "Comic Sans MS";
}

.logo:after{
    content: " Dot Com";
    font-size: 17px;
    color: white;
font-weight: bold; 
font-family: "Comic Sans MS";
}

#commentInput {
    background-color: black;
    border: dashed #ffed1a 1px;
    color: #ffe51a;
}

.boxHead { margin-bottom: 10px; padding-top: 0px;}

.rightHead, .boxHead {
    border-bottom: double #fffa1acf 3px;
    border-top: double #e2ff1adb 3px;
    text-align: center;
    padding-bottom: 2px;
}

form::after {
    content: url(https://64.media.tumblr.com/51df074f0aa58549d44a6f637e209c89/0b3a21f7e2d7eed6-35/s400x600/e9e660a69abd76a5a4bfcf317f0a60e554f08d3b.gifv);
    position: fixed;
    right: 0;
    bottom: 0;
}

.player {
   border: 0px transparent solid;
  padding: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: black;
  color: #000;
  width: calc(100% - 10px );
}

#name {
  text-align: center;
font-family: "Comic Sans MS";
  color: white;
}

.extended {
  background-image
  border: 1px solid #000;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 15px;
}

#sMsg {
  background-repeat: no-repeat;
  background-image: url(https://64.media.tumblr.com/dc85057c4394dbf08919d58f4e66e022/979aeaa541231801-c9/s75x75_c1/b509a84ccbf86ce96c085db06d6fd6af649ba0f0.gifv);
}

#report {
  background-repeat: no-repeat;
  background-image: url(https://64.media.tumblr.com/df422b119f2f8759b4234b1e1b912c4b/979aeaa541231801-85/s75x75_c1/b70cdf3b57c67fc80107cb61953c783fa14550aa.gifv);
}

#block {
  background-repeat: no-repeat;
  background-image: url(https://64.media.tumblr.com/faba5e957c0cfc5c2aac7dd5f2c91d7a/979aeaa541231801-2a/s75x75_c1/ee3d7cd2fa3e9df6a43b1044ca05fb4e655ed9e3.gifv);
}

#add {
  background-repeat: no-repeat;
  background-image: url(https://64.media.tumblr.com/51b609db765520d5542035b15965f137/979aeaa541231801-8f/s75x75_c1/1d3ef005d773711806f946d968d8b53bd849aa57.gifv);
}

.boxButton, .fwiendCount{
  color: #ffe51a;
}

.rightHead, .boxHead{
padding-left:0px;
}

body{
background-image:url(https://epic1.neocities.org/starsbackground.gif);
font-family: "Comic Sans MS";
}

#container {
    box-shadow: 0px 0px 10px 5px #fffc1ac4;
    border-right: double #ffe91ab3 3px;
    border-left: double #f1ff1a80 3px;
}

h4, #name, .tableLeft a {
    color: #fffc81;
    text-shadow: -1px -1px 0px #ffe51a, 1px 1px 0px #ffb100;
}

*{
  color: white;
}

#container, .rightHead, #header, #hSub, .boxHead, .tableLeft, .tableRight{
background-color:black;
}

.url{
  font-size: 0px;
  border: 0px solid white;}

.url:after{
  content: 
url(https://epic1.neocities.org/button.gif) 
;}

#online img {
    filter: hue-rotate(40deg);
}


* {cursor: url(https://external-media.spacehey.net/media/sK3-gq_J8iMOKTHPSc5DVSkfvuOX5ZdjYOyJEkvD1K1A=/https://ani.cursors-4u.net/smiley/smi-3/smi310.cur), auto !important;}

.avatar {
animation-name: floating;
animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


span#hUp::before {
    content: ":3";
    animation: changeColor 3s linear infinite !important;
    color: cyan;
    font-size: 16px;
font-family: "Comic Sans MS";
}






@keyframes changeColor{
    0%{color:#FDDB68;}
    10%{color:#F48190;}
    20%{color:#CE65BA;}
    30%{color:#AE73B5;}
    40%{color:#6880AC;}
    50%{color:#4892B7;}
    60%{color:#44BAAA;}
    70%{color:#6AC66F;}
    80%{color:#D1EC2B;}
    90%{color:#FFF011;}
    100%{color:#FFC16D;}
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 10px); }
    to   { transform: translate(0, -0px); }    
}



.avatar:hover {
  animation: 1s linear idk infinite;
}
.fwiendFace:hover {
  animation: 0.2s linear idk infinite;
}
#block:hover {
  animation: 0.1s linear crazyshake infinite;
}
#report:hover {
  animation: 0.5s linear idk infinite;
}
#add:hover {
  animation: 0.8s linear crazyshake infinite;
}
#sMsg:hover {
  animation: 2s linear crazyshake infinite;
}
#online {
  animation: 0.8s linear crazyshake infinite;
}
@keyframes idk {
  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); }
}
@keyframes crazyshake{
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-5px, -4px) rotate(-1deg); }
  20% { transform: translate(-8px, 2px) rotate(1deg); }
  30% { transform: translate(9px, 5px) rotate(0deg); }
  40% { transform: translate(5px, -2px) rotate(1deg); }
  50% { transform: translate(-2px, 4px) rotate(-1deg); }
  60% { transform: translate(-6px, 4px) rotate(0deg); }
  70% { transform: translate(5px, 2px) rotate(-1deg); }
  80% { transform: translate(-4px, -3px) rotate(1deg); }
  90% { transform: translate(1px, 6px) rotate(0deg); }
  100% { transform: translate(2px, -3px) rotate(-1deg); }
}
}