Pro for Black Pixels

/* Layout by CD-ARIAx3 */
/* + Code by AlthIndor */

html, body {
 background: url('https://images2.imgbox.com/fc/96/OeRDIBEq_o.png') repeat-x calc(50% + 1px) -1138px,
   url('https://i.imgur.com/1NWxxyS.gif') repeat-x 0 0 / 600px auto,
   repeating-linear-gradient(to right, #FDEAFE 0px, #FDEAFE 10px, #FFEEFF 10px, #FFEEFF 20px);
 height: 100vh;
 min-height: 920px;
}

body a {
 text-decoration: none !important;
 transition: all .5s ease-in-out;
}

#header h1, #profile .items, #profile .caption, .section h2 {display: none;}
#details, #friends, #journal, #signature, #avatar_dropbox {display: none;}

#header, #profile #bar li a, #main + .clear {background: url('https://images2.imgbox.com/fc/96/OeRDIBEq_o.png');}
#main + .clear {background-position-x: -1200px; pointer-events: none;}

#content {background: url('https://i.imgur.com/G3NKtAM.gif') no-repeat 120px 800px / 200px auto,
  url('https://i.imgur.com/wTDpGDX.gif') no-repeat 409px 660px / 150px auto,
  url('https://i.imgur.com/tjYeOYz.gif') no-repeat 420px 0,
  url('https://images2.imgbox.com/fc/96/OeRDIBEq_o.png');
}

/* Fonts */

@font-face {
 font-family: 'Bubblegum Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Bubblegum Sans Regular'), local('BubblegumSans-Regular'), url(https://fonts.gstatic.com/s/bubblegumsans/v8/AYCSpXb_Z9EORv1M5QTjEzMEteaAxII.woff2) format('woff2');
}

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
}

@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
}

/* Header */

#gaia_header #header_left, #gaia_header #header_right {
 background: none;
 width: 50% !important;
 font: 400 0/34px 'Bubblegum Sans', serif !important;
 padding: 0 4px !important;
 box-sizing: border-box;
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 2px;}

#gaia_header img {
 background: url('https://i.imgur.com/cGGVY2x.png') 0 5px no-repeat;
 width: 0 !important;
 padding: 0 34px 0 0;
 filter: invert(100%);
}

#gaia_header a {
 background: #9A64B8 !important;
 color: #FFFFFF !important;
 font-size: 13px !important;
 padding: 2px 6px;
 border: 2px solid #FFFFFF;
 border-radius: 5px;
 box-shadow: 0 1px 1px #00408040;
}
#gaia_header a:hover {background: #FF80C8 !important;}

#gaia_header .favorites_add {
 display: initial;
 position: static;
}
#gaia_header .favorites_add span {display: none;}

#gaia_header .favorites_add::after {
 content: '❤';
 font-size: 14px;
 position: relative;
 top: 2px;
}

/* Main Areas */

#site, #content, #content #sidebar, #main + .clear {
 width: 1200px;
 height: 920px;
}
#site {margin: 0 auto;}
#content {padding: 0;}
#content #sidebar {left: 0;}

#header, #content, #content #main {border: none;}
#header, #content, #content #main + .clear {position: absolute;}
#header, #content #main {margin: 0;}
#content, #content #main + .clear {top: 0;}
#content #main {min-height: 0;}

/* Scrollbars */

#main ::-webkit-scrollbar, #main ::-webkit-scrollbar-thumb {
 border-radius: 4px;
 width: 7px;
}
#main ::-webkit-scrollbar {background: plum;}

#main ::-webkit-scrollbar-thumb {
 background: #FFFFFF content-box;
 border: 1px solid transparent;
}

#main * {
 scrollbar-color: #FFFFFF plum;
 scrollbar-width: thin;
}

#sidebar ::-webkit-scrollbar {width: 0;}
#sidebar * {scrollbar-width: none;}

/* Username */

@keyframes BounceUsername {
 from {transform: translateY(-10px);}
 to {transform: translateY(10px);}
}

#header {
 background-position: 0 -952px;
 width: 600px;
 height: 177px;
 position: absolute;
 top: 200px;
 left: 360px;
 z-index: 1;
 animation: BounceUsername 2s ease-in-out infinite alternate;
}

/* Sections */

.section, #wishlist .items, #about .links + ol, #comments dl {box-sizing: border-box;}
#about .links + ol, #comments dl {padding: 0 10px 0 0;}

.section {
 background: none !important;
 color: #404040;
 font: 10px/1.6 'Open Sans', sans-serif;
 padding: 0;
 position: absolute !important;
}
.section img {max-width: 100%;}

.section a {font-weight: bold;}
.section a:link, .section a:visited {color: rebeccapurple !important;}
.section a:hover, .section a:active {color: #F05CE0 !important;}

#wishlist .items, #about .links + ol, #comments dl {
 width: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
}

/* Section Links */

.section .links, #comments .alert_container {margin: 0;}
#comments .alert_container {float: none;}

.section .links {
 text-align: center;
 position: absolute;
}

.section .links li {
 display: block;
 margin: 0 0 3px 0;
}

.section .links a {
 color: #9088B4 !important;
 font: 400 12px 'Bubblegum Sans', serif;
 text-shadow: 0 0 1px #FFFFFF, 0 0 2px #FFFFFF, -4px 3px #00408020;
 text-decoration: none;
 text-transform: capitalize;
}
.section .links a:hover {color: #FCA2C0 !important;}

#about .links {
 left: -102px;
 top: -29px;
}

#comments .links {
 top: 7px;
 left: -98px;
}

/* About */

#about {
 width: 270px;
 height: 160px;
 text-align: right;
 top: 505px;
 left: 555px;
}
#about .links ~ br {display: none;}

/* Comments */

#comments {
 width: 325px;
 height: 50px;
 top: 740px;
 left: 438px;
}

#comments .links + p, #comments #alerts_banner, #comments dt, #comments dd::before, #comments dd::after {display: none;}
#comments dl dd .message, #comments dl dd:last-of-type, #comments .date {margin: 0;}
#comments dl dd .message, #comments dl dd {background: none;}
#comments dl dd .message {padding: 0;}
#comments dl dd {border: none;}
#comments dl dd:nth-last-of-type(n+2) {margin: 0 0 15px 0;}

#comments .message {
 min-height: unset;
 font: inherit;
 position: static;
}

#comments .date {
 float: right;
 font-style: normal;
}

#comments .postcontent {
 padding-top: 1px;
 margin-top: 2px;
 border-top: 1px dotted #DA78A0;
}

/* Wish List */

#wishlist {
 width: 55px;
 height: 148px;
 top: 490px;
 left: 362px;
}

#wishlist .items {scroll-snap-type: y mandatory;}
#wishlist .item {background: none !important;}

#wishlist li {
 display: block;
 background: #E0809C;
 width: 30px;
 height: 30px;
 padding: 5px;
 margin: 0 0 8px 0;
 border: 2px solid transparent;
 border-radius: 50%;
 box-shadow: 0 0 0 1px #FFFFFF inset;
 outline: 1px dotted #807060;
 outline-offset: -5px;
 scroll-snap-align: start;
 scroll-snap-stop: always;
 transition: all .5s ease-in-out;
}

#wishlist li:hover {
 background: #6CBCD0;
 outline-color: #FFFFFF;
}

/* Avatar */

#profile {
 top: 534px;
 left: 422px;
}

/* Contact Bar */

#bar, #bar li, #bar li a {width: 206px !important;}
#bar, #bar li {background: none !important;}
#bar li {margin: 0 0 13px 0;}

#bar {
 margin: 0;
 position: absolute;
 top: 15px;
 left: -313px;
}
#bar #offlineButton, #bar #onlineButton, #bar #ignoreButton {display: none;}
#profile #bar #tradeButton {margin-top: 1px;}

#bar li, #bar li a {
 height: 46px !important;
 font-size: 0;
}

#profile #bar li a {
 background-position: -600px -952px !important;
 padding: 0;
 border-radius: 30px;
 opacity: .01;
}
#profile #bar li a:hover {opacity: 1;}

#profile #bar #msgButton a {background-position-x: -805px !important;}
#profile #bar #tradeButton a {background-position-x: -1011px !important;}

/* Media */

#multimedia {
 background: url('https://i.imgur.com/gqTTTvw.png') -20px -7px !important;
 width: 74px;
 height: 30px;
 top: 730px;
 left: 975px;
 filter: drop-shadow(0 1px .5px #00408040);
 overflow: hidden;
}

#multimedia object, #multimedia embed {
 width: 400px;
 height: 300px;
}

#multimedia object {
 position: absolute;
 bottom: -3px;
 left: -20px;
 opacity: .001;
}

/* Enter Button */

#about .links ~ .spoiler-wrapper .spoiler-control-show {
 background: url('') center / cover #9A64B8;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 border: none;
 outline: none;
 position: fixed;
 z-index: 999;
}

#about .links ~ .spoiler-wrapper span {display: none;}
#about .links ~ .spoiler-revealed {display: none !important;}

/* Animated Stars */

@keyframes TweakStars {
 from {transform: rotate(-20deg);}
 to {transform: rotate(20deg);}
}

#content::after, #site::after {
 content: '';
 background: url('https://i.imgur.com/ffXdIXZ.png') 0 0 / 100px auto;
 position: absolute;
 animation: TweakStars 2s steps(2, jump-none) infinite;
}

#content::after {
 background-position: bottom right;
 width: 50px;
 height: 46px;
 top: 440px;
 left: 308px;
}

#site::after {
 background-size: 150px auto;
 width: 76px;
 height: 70px;
 bottom: 40px;
 right: 401px;
 animation-direction: reverse;
}