Code for Psycho After Dark

/* Code by AlthIndor */

html, body {
 background: url('http://www.stellarscapes.net/wp-content/uploads/2015/03/MilkyWayPano_SnowCamp_process.jpg') fixed center;
 background-size: cover;
}

/* Fonts */

@font-face {
 font-family: 'Open Sans Condensed';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

@font-face {
 font-family: 'Dancing Script';
 font-style: normal;
 font-weight: 400;
 src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(http://fonts.gstatic.com/s/dancingscript/v9/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
}

@font-face {
 font-family: 'Muli';
 font-style: normal;
 font-weight: 400;
 src: local('Muli Regular'), local('Muli-Regular'), url(http://fonts.gstatic.com/s/muli/v10/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
}

/* Header */

#gaia_header {
 background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)) !important;
 background-origin: border-box !important;
 border-bottom: 10px solid transparent;
}

#gaia_header #header_left, #gaia_header #header_right {
 background: none !important;
 font-size: 0px !important;
 padding: 0 3px 0 3px !important;
}
#gaia_header #header_right {float: right !important;}

#gaia_header li {padding: 0 4px 0 4px;}
#gaia_header li.spacer {display: none !important;}
#header_left li:nth-of-type(2) {padding: 0 3px 0 2px;}

#header_left img {
 background: url('https://i.imgur.com/w0Cbo9w.png') 0px 3px no-repeat !important;
 width: 0 !important;
 padding: 0 37px 0 0 !important;
}

#gaia_header a {
 color: #FFFFFF !important;
 font-family: 'Open Sans Condensed', sans-serif;
 font-size: 11px !important;
 letter-spacing: .03em;
 text-transform: uppercase;
 text-decoration: none;
 transition: opacity .5s ease-in-out;
}
#gaia_header a:hover {opacity: .5;}

/* Scrollbars */

#columns {
 scrollbar-track-color: #000000;
 scrollbar-arrow-color: #808080;
 scrollbar-face-color: #808080;
 scrollbar-shadow-color: #000000;
}

#columns ::-webkit-scrollbar {
 background: #000000;
 width: 10px;
 border-radius: 5px;
}

#columns ::-webkit-scrollbar-thumb {
 background: #808080;
 border-radius: 5px;
}

/* Columns */

#columns, #column_1, #column_2, #column_3 {
 padding: 0;
 margin: 0;
}

#columns {
 width: 940px;
 height: 320px;
 left: calc((100% - 940px) / 2);
 top: calc((100% - 320px) / 2 + 5px);
 overflow: visible;
}

#column_1, #column_2, #column_3 {width: 300px;}
#column_2, #column_3 {margin-left: 20px;}

/* Username */

#columns::before {
 content: 'Psycho After Dark';
 width: 100%;
 color: #FFFFFF;
 font-family: 'Dancing Script';
 font-size: 42px;
 font-weight: bold;
 line-height: 0;
 text-align: center;
 text-shadow: 0 2px 3px #000, 0 -2px 3px #000, -2px 0 3px #000, 2px 0 3px #000;
 position: absolute;
 top: -40px;
 left: 0;
}

/* Panels */

.panel {
 color: rgba(255,255,255,.9);
 font-family: 'Muli', sans-serif;
 text-align: justify;
 padding: 0;
 margin: 0;
 overflow: hidden;
}
.panel h2 {display: none;}

.panel a {
 color: inherit;
 font-weight: normal;
}

#id_footprints, #id_journal {text-align: center;}
#id_footprints .item {margin-bottom: 3px;}
#id_journal #entries li:nth-last-of-type(n+2) {margin-bottom: 3px;}

/* Why yes, this border-image is an IE hack! */

.panel:not(#id_contact):not(.media_panel) {
 background: none;
 width: 100%;
 height: 150px !important;
 margin: 0 0 20px 0;
 border: 10px solid transparent;
 border-image: url('https://i.imgur.com/Yb209Zv.png') 10 fill;
 box-sizing: border-box;
}

#id_about:hover, #id_wishlist:hover, #id_interests:hover, #id_footprints:hover {
 padding-right: 10px;
 overflow-y: scroll;
}

/* Things That Are Buttons */

#id_comments #alert_container, #id_journal h2 ~ p:nth-of-type(1), #id_contact ul:not(.buttons) li, .media_panel {
 background: url('https://i.imgur.com/vcNz49l.png');
 background-color: rgba(0,0,0,.8);
 background-size: 34px auto;
 width: 40px;
 height: 40px !important;
 font-size: 0px;
 padding: 0;
 margin: 0;
 border-radius: 10px;
 overflow: hidden;
 transition: opacity .5s ease-in-out;
}
#id_comments #alert_container:hover, #id_journal h2 ~ p:nth-of-type(1):hover, #id_contact ul:not(.buttons) li:hover, .media_panel:hover {opacity: .5;}

#id_comments #alert_container, #id_journal h2 ~ p:nth-of-type(1), #id_contact, .media_panel  {
 position: fixed;
 top: calc((100% - 320px) / 2 + 345px);
}

#id_comments #alert_container a, #id_journal h2 ~ p:nth-of-type(1) a, #id_contact ul:not(.buttons) li a {
 display: block;
 width: 100%;
 height: 100%;
}

/* Contact */

#id_contact {
 background: none;
 left: calc((100% - 300px) / 2);
}
#id_contact ul:not(.buttons) li {float: left;}
#id_contact ul:not(.buttons) li:nth-of-type(n+2) {margin-left: 12px;}

#id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 3px 3px;}
#id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 3px -31px;}
#id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 3px -65px;}

/* Comments and Journal */

#id_journal h2 ~ p:nth-of-type(1) {
 background-position: 3px -167px;
 left: calc((100% - 300px) / 2 + 260px);
}

#id_comments dl, #id_journal #entries {
 width: 100%;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 overflow: hidden;
}
#id_comments dl {height: 100%;}
#id_journal #entries {height: calc(100% - 26px);}

#id_comments dl:hover, #id_journal #entries:hover {
 padding-right: 10px;
 overflow-y: scroll;
}

/* Comments */

#id_comments .dropBox {display: none;}
#id_comments h2 ~ p  {display: none;}
#alerts_banner {display: none;}

#id_comments #alert_container {
 background-position: 3px -200px;
 left: calc((100% - 300px) / 2 + 208px);
}

#id_comments dt {
 height: auto;
 line-height: 1em;
 text-align: left;
 padding: 0 0 3px 0;
 margin-bottom: 3px;
 border-bottom: 1px solid #808080;
}

#id_comments .username {float: none;}
#id_comments .date {line-height: 1.7em;}
#id_comments dd:nth-last-of-type(n+2) {margin-bottom: 10px;}

#id_comments .deletecomment {
 background: rgba(255,255,255,.2);
 text-align: right;
 padding: 3px 5px 4px 5px;
 margin: 3px 0 0 5px;
 border-radius: 5px;
}

/* Interests */

#id_interests {text-align: center;}
#id_interests h3 {margin-bottom: 2px;}
#id_interests h3:nth-of-type(n+2) {margin-top: 10px;}
#id_interests .interest_tags li:nth-last-of-type(n+2)::after {content: ',';}

/* Wish List */

#id_wishlist {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-content: flex-start;
}
#id_wishlist .premium_sparkle {display: none;}
#id_wishlist .clear {display: none;}

#id_wishlist .item {
 background: rgba(255,255,255,.2);
 height: 30px;
 padding: 4px;
 margin: 0 2px 6px 2px;
 position: relative;
 border-radius: 5px;
 transition: background .5s ease-in-out;
}
#id_wishlist .item:hover {background: rgba(255,255,255,.5);}

#id_wishlist .owner_checkmark {
 top: -8px;
 right: 5px;
}

/* Media */

.media_panel {
 background-position: 3px -99px;
 left: calc((100% - 300px) / 2 + 156px);
}

.media_panel object {
 width: 200px;
 height: 200px;
 position: absolute;
 bottom: 1px;
 left: -7px;
 opacity: 0;
}