/*###################*/
/*white and blu theme*/
/*###################*/


body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://specials-images.forbesimg.com/imageserve/5ed68e8310716f0007411996/960x0.jpg?fit=scale);
    opacity: .05;
    background-size: 50%;
    image-rendering: auto;
    pointer-events: none;
}
body {
    font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
    font-size: 13px;
    color: #000000;
    text-shadow: 2px 2px 5px grey;
    letter-spacing: 1px;
    text-align: center;
    background-color: white;
    margin-top: -5px;
    background-image: url(https://i.gifer.com/1ksL.gif);
}
body:before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background-image: url("https://i.pinimg.com/originals/d2/b8/7e/d2b87e657436577a186a8e1806ab6764.jpg")
    background-repeat: all;
    background-position: 0px 0px;
    background-size: 500px 500px;
}
h4, a {
   color: black;
}

a:hover {
    color: #000000;
}
b {
   color: white;
   text-shadow: 2px 2px 5px black;
}
   

 

#container {
    width: 860px;
    height: 1400px;
    margin-top: 10px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    background: #000000;
    border: ridge white 8px;
    font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
    text-align: center;
}
#avatar.avatar, img {
    filter: grayscale(0);
}
.fwiendFace {
    filter: saturate(0.2);
}

div.box.blurbs, div.box.fwiends, div.extended.box, .topLeft, #form > form, #userWall, .topLeft.blogCard, .box.blog {
    background: white;
    opacity: 0.8;
    border-radius: 25px 25px 25px 25px;
    border: 4px double black;
     filter: blur(0.4px);
}
.topRight.blogPost {
    float: right;
    width: calc( 50% - 20px );
    padding: 10px;
    margin-right: 100px;
    margin-top: -4px;
}
.topRight {
    float: right;
    width: calc( 50% - 20px );
    padding: 10px;
    margin-right: 40px;
}

    
.blurbs>.blogs>div:not(:first-child):before {
    content: "";
    display: block;
    width: 80px;
    height: 60px;
    background: url(https://media3.giphy.com/media/3ov9kbWTS6WVs4vao0/giphy.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
#container > div.topRight > div.box.blurbs > div.blogs > div:nth-child(1) > b {
    display: none;
}
.box.blog {
    max-height: 500px;
    width: 430px;
    overflow-y: auto;
}
.blogs {
    display: flex;
    flex-grow: 3;
    margin-bottom: 20px;
    border-radius: 10px 10px 10px 10px;
    margin: 6px;
}
#container > div.topRight > div.box.blurbs > div.blogs {
    border: 1px solid black;
}
#container > div.topRight > div.box.blurbs > div.blogs *:hover {
    transform: scale(1.1);
    transition: 0.8s;
}
.boxInfo, #container > div.topLeft > div.url.box {
    border: 1px solid black;
}
form, .box.fwiends {
    margin-bottom: 10px;
}
form {
    padding: 5px;
    height: 130px;
}
.box.fwiends {
   max-height: 210px;
   overflow-y: auto;
}
div.box.blurbs:hover, div.box.fwiends:hover, div.extended.box:hover, .topLeft:hover, #form > form:hover, .tableRight:hover {
    filter: none;
}
.topLeft::before {
    content: url(lll);
}
.topLeft {
    height: 860px;
    width: 300px;
    position: sticky;
    margin-left: 40px;
    overflow: hidden;
    margin-top: 27px;
    margin-bottom: 30px;
    top: 80px;
}
.box.blurbs {
    height: 400px;
    overflow-y: auto;
    padding-bottom: 10px;
}
.extended.box {
    border: 2px dashed darkgreen;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 15px;
    background: #d4dbd4;
}
#userWall {
    border: 4px double black;
    background: #ffffff9e;
    padding: 5px;
    height: 400px;
    overflow: auto;
}

.rightHead, .boxHead {
    background-color: transparent;
}


div#header {
   display: none;
}
#header > a > b > span {
   display: none;
}
 
div#header:before {
    content: ":C";
    font-weight: bold;
    font-family: -webkit-body;
    color: black;
    text-shadow: 2px 2px #8597a0;
}

div#hSub {
    background: transparent;
    font-family: Courier New;
    margin-left: 100px;
    margin-top: 20px;
    position: absolute;
    height: 300px;
    width: 5px;
}
#hSub a {
    color: #000000;
    font-size: larger;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: bold;
    text-decoration: none;
    text-shadow: 2px 2px 5px #3d3d3d;
}
#hSub a:hover {
    letter-spacing: 2px;
    text-shadow: 1px 2px #6c98ae;
}

/*name*/
h2#name.uName {
     font-size: 0px;
}
h2#name.uName::after {
     content: "Ghost!!";
     color: black;
     font-size: 30px;
}
.avatar {
     margin-top: 20px;
}

/*contact box*/

#block {
     font-size: 0px;
}
#report {
     font-size: 0px;
}
#sMsg {
     background-image: url("lll");
     font-size: 0px;
}
#sMsg::after {
     content: "Pass A Note";
     font-size: 13px;
}
#add {
     background-image: url("lll");
     font-size: 0px;
}
#add::after {
     content: "Friend?";
     font-size: 13px;
}
div#report.boxButton, div#block.boxButton {
    display: none;
}

#sMsg.boxButton::after {
    animation:blinkingText 1.2s infinite;
}

#add.boxButton::after {
    animation:blinkingText 1.2s infinite;
}


/*keyframes*/

@keyframes blinkingText{
    0%{     color: black;    }
    49%{    color: black; }
    60%{    color: #404040; }
    99%{    color: #404040;  }
    100%{   color: black;    }
}

body {
    -webkit-animation: 1s linear forwards reveal;
     -moz-animation: 1s linear forwards reveal;
       -o-animation: 1s linear forwards reveal;
          animation: 2s linear forwards reveal;
}

@-webkit-keyframes reveal { from { filter: blur(8px); } to { filter: blur(0.5px); }  }
   @-moz-keyframes reveal { from { filter: blur(8px); } to { filter: blur(0.5px); }  }
     @-o-keyframes reveal { from { filter: blur(8px); } to { filter: blur(0.5px); }  }
        @keyframes reveal { from { filter: blur(8px); } to { filter: blur(0.5px); }  }

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

.extended.box, .box.blurbs, .box.fwiends, .box.blog {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

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

h4, #about, #name.uName, img, #avatar.avatar:hover {
    animation-name: otherfloating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
#about::before {
   content: url(https://media.discordapp.net/attachments/831619471575482398/845843370554949653/unknown.png);
}
#container > div.topRight > div.box.blurbs > h4:nth-child(3), #container > div.topRight > div.box.blurbs > div.rightHead {
  display: none;
}
@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

/*audio*/

.player {
    background: white;
    padding-top: 23px;
}

audio::-webkit-media-controls-mute-button,video::-webkit-media-controls-mute-button {
    background-image: url(https://web.archive.org/web/20091027012836/http://es.geocities.com/dj.boxman/reproductor/radio_archivos/audio.gif);
    background-size: 20px;
        }
audio::-webkit-media-controls-enclosure,video::-webkit-media-controls-enclosure {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 0 #75858d, 0 1px #75858d, 1px 1px #5e6a70, inset 1px 1px #75858d;
    background: #96acb6;
    border-right: 1px solid #5e6a70;
    border-left: 1px solid #5e6a70;
    border-top: 1px solid #5e6a70;
    border-bottom: 1px solid #5e6a70;
    color: #000;
        }
audio {
    margin-bottom: 5px;
        }
.player::before {
     content: "";
     bottom: 10px;
     display: block;
     position: relative;
     width: calc(40% -20px);
     height: 280px;
     max-width: 400px;
     background-position: 0 0;
     background-size: 100% 100%;
     background-image: url("https://i.pinimg.com/originals/52/f9/36/52f93605d0801f0771bd6c15da381742.gif");
     padding-top: 5px;
     filter: grayscale(0);
}


.songName span {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-block;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infini…