Pro for November Sky

/* Profile by AlthIndor */

:root {
 --pink-dark: #C0505C;
 --pink-lite: #FFC0CB;
 --purp-dark: #686068;
 --body-size: 760px;
}

::selection {
 background: var(--purp-dark);
 color: #FFFFFF;
}

html, body {
 background: #202020;
 min-height: 100vh;
 height: var(--body-size);
}
body a {text-decoration: none !important;}

#columns, #id_contact li, .panel h2, .media_panel, body::after {background: url('https://images2.imgbox.com/1b/fd/KPhWPN5V_o.png');}

/* Fonts */

@font-face {
 font-family: 'Roboto Slab';
 font-style: normal;
 font-weight: 400;
 src: url(https://fonts.gstatic.com/s/robotoslab/v10/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rj.woff2) format('woff2');
}

@font-face {
 font-family: 'Roboto Slab';
 font-style: normal;
 font-weight: 700;
 src: url(https://fonts.gstatic.com/s/robotoslab/v10/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4Omb2Rj.woff2) format('woff2');
}

@font-face {
 font-family: 'Alex Brush';
 font-style: normal;
 font-weight: 400;
 src: local('Alex Brush Regular'), local('AlexBrush-Regular'), url(https://fonts.gstatic.com/s/alexbrush/v11/SZc83FzrJKuqFbwMKk6EhUXz7Q.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
 background: #383038 !important;
 height: 30px !important;
 box-shadow: 0 1px 3px #80008040;
}
#gaia_header li.spacer {display: none !important;}

#gaia_header #header_left, #gaia_header #header_right {
 background: none !important;
 width: 50% !important;
 height: 100% !important;
 font: 0px/32px 'Alex Brush', cursive !important;
}

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

#gaia_header li a {
 display: inline-block !important;
 height: 100%;
 color: #FFFFFF !important;
 font-size: 14px !important;
 padding: 0 6px;
 vertical-align: top;
 transition: background .5s ease-in-out;
}
#gaia_header li a:hover {background: var(--pink-dark);}

/* Columns */

#columns, #column_1, #column_2 {
 display: block;
 float: none;
 margin: 0;
 position: absolute;
}
#column_3 {display: none;}

#columns {
 width: 1160px;
 height: 680px;
 left: calc(50% - 580px);
 clip-path: polygon(0px 0px, 1160px 0px, 1160px 300px, 1060px 400px, 1060px 680px, 0px 680px);
}

#column_1 {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}

#column_2 {
 width: 508px;
 height: 247px;
 top: 89px;
 right: 165px;
 transform: translateZ(0);
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
 background: #FFFFFF40;
 width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--purp-dark);}

#columns * {
 scrollbar-color: var(--purp-dark) #FFFFFF40;
 scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
 color: #FFFFFF;
 font: 11px/1.6 'Roboto Slab', serif;
 margin: 0;
 padding: 0;
 position: absolute;
 box-sizing: border-box;
}
.panel:not(.media_panel) {background: none;}
.panel img {max-width: 100% !important;}

.panel a {
 color: var(--pink-lite);
 transition: all .5s ease-in-out;
}

.panel a:hover {
 color: #000;
 text-shadow: 0 0 3px #FFFFFF80;
}

#id_comments, #column_2 .panel {
 width: 322px;
 height: 235px;
 text-align: center;
 border: 15px solid transparent;
 border-right-width: 10px;
}
#column_2 .panel {right: 50px;}

#id_comments dl, #column_2 .panel {overflow: hidden scroll;}
#id_comments dl, #column_2 .panel:not(#id_wishlist) {padding-right: 15px;}

#column_2 .panel:hover ~ #id_about, #column_2 .panel {
 bottom: -100%;
 opacity: .01;
 transition: opacity .5s ease-in-out, bottom 0s .5s linear;
}

#column_2 #id_about, #column_2 .panel:hover {
 bottom: 0;
 opacity: 1;
 transition: opacity .5s ease-in-out, bottom 0s 0s linear;
}

/* Contact and Headers */

#id_contact {
 width: 148px;
 height: 148px;
 top: 89px;
 left: 131px;
}
#id_contact h2, #id_contact span {display: none;}

#id_contact li, #column_2 h2 {
 background-position-y: -680px;
 width: 58px;
 height: 58px;
 clip-path: polygon(0% 50%, 50% 0, 100% 50%, 50% 100%);
}

#id_contact li {
 position: absolute;
 opacity: .01;
 transition: opacity .5s ease-in-out;
}
#id_contact li:hover {opacity: 1;}

#column_2 h2 {
 font-size: 0;
 position: fixed;
 z-index: 9;
}
#column_2 .panel:hover h2 {z-index: 8;}
#id_about h2 {display: none;}

#id_contact li:nth-of-type(3), #id_details h2 {top: 0;}
#id_contact li:nth-of-type(2), #id_wishlist h2 {top: 45px;}
#id_contact li:nth-of-type(1), #id_footprints h2 {top: 90px;}

#id_contact li:nth-of-type(1), #id_details h2 {left: 0;}
#id_contact li:nth-of-type(2), #id_wishlist h2 {left: 45px;}
#id_contact li:nth-of-type(3), #id_footprints h2 {left: 90px;}

#id_contact li:nth-of-type(1) {background-position-x: 0;}
#id_contact li:nth-of-type(2) {background-position-x: -58px;}
#id_contact li:nth-of-type(3) {background-position-x: -116px;}

#id_details h2 {background-position-x: -174px;}
#id_wishlist h2 {background-position-x: -232px;}
#id_footprints h2 {background-position-x: -290px;}

#id_contact a {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 0;
 position: absolute;
 top: 0;
 left: 0;
}

/* Panel Titles */

#id_comments h2, #column_2 .panel::after {
 background: none;
 width: 170px;
 height: 50px;
 font: 400 18px/49px 'Roboto Slab', cursive;
 letter-spacing: .05em;
 text-align: left;
 text-transform: uppercase;
 transform-origin: top left;
 transform: rotate(90deg);
 pointer-events: none;
}

#id_comments h2 {
 position: absolute;
 top: 1px;
 left: 357px;
}

#column_2 .panel::after {
 position: fixed;
 left: 100%;
 top: 28px;
}
#id_about::after {content: 'About Me';}
#id_details::after {content: 'My Details';}
#id_wishlist::after {content: 'Wish List';}
#id_footprints::after {content: 'Guestbook';}

/* Bridges */

#column_2 .panel:not(#id_about)::before {
 content: '';
 display: none;
 width: 150px;
 height: 150px;
 position: fixed;
 top: 0;
 left: 0;
 z-index: -1;
}
#column_2 .panel:not(#id_about):hover::before {display: block;}

/* Comments */

#id_comments {
 top: 345px;
 left: 623px;
}

#id_comments #alerts_banner {display: none;}
#id_comments h2 ~ p, #id_comments .dropBox, #id_comments .date {display: none;}
#id_comments dd {margin: 0 0 15px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dl {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}

#id_comments dt {
 clear: unset;
 height: auto;
 line-height: 1.2;
 text-align: inherit;
 padding: 0;
 border-bottom: none;
}
#id_comments .username {float: none;}
#id_comments .username a {font-size: 12px;}
#id_comments .username a::before {content: '« ';}
#id_comments .username a::after {content: ' »';}

#id_comments dt::after {
 content: '• • • • •';
 color: #00000040;
 position: relative;
 top: 2px;
}

#id_comments #alert_container {
 display: block;
 float: none;
 background: #FFFFFF;
 width: 19px;
 height: 19px;
 font-size: 0;
 padding: 0;
 position: absolute;
 top: 125px;
 left: 322px;
 border-radius: 50%;
 overflow: hidden;
 transition: background .5s ease-in-out;
}
#id_comments #alert_container:hover {background: var(--pink-dark);}

#id_comments #alert_container a {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: .5px;
}

#id_comments #alert_container a::after {
 content: '+';
 font-size: 20px;
 line-height: 17px;
 color: #000;
}

/* Details */

#id_details .forum_userstatus {display: none;}
#id_details p:nth-of-type(n+2) {margin: 0;}

/* Wish List */

#id_wishlist {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-evenly;
 padding-right: 5px;
}

#id_wishlist .item {
 background: #00000040;
 width: 30px;
 height: 30px;
 padding: 6px;
 margin: 0 10px 10px 0;
 position: relative;
 border: 2px solid transparent;
 border-radius: 50%;
 box-shadow: 0 0 0 1px #FFFFFF80 inset;
 outline: 1px dotted #FFFFFF80;
 outline-offset: -6px;
 transition: all .5s ease-in-out;
}

#id_wishlist .item:hover {
 background: var(--pink-dark);
 box-shadow: 0 0 0 1px #FFFFFF inset;
 outline-color: #FFFFFF;
}

.owner_checkmark {
 margin: 0;
 bottom: 5px;
 right: 5px;
}
.premium_sparkle {display: none;}

/* Media */

.media_panel {
 background-position: -358px -690px;
 width: 65px;
 height: 27px !important;
 bottom: 68px;
 left: 350px;
 overflow: hidden;
 transition: filter .5s ease-in-out;
}
.media_panel:hover {filter: brightness(150%);}
.media_panel h2 {display: none;}

.media_panel iframe {
 width: 300px;
 height: 300px;
 position: absolute;
 bottom: -4px;
 left: -25px;
 opacity: .01;
}

/* Background Changer */

#panel-details, #panel-details::after {background: url('https://i.imgur.com/rTu511U.png');}
#panel-details .hd::before, #panel-details .hd::after {background: url('https://i.imgur.com/AQxAWpt.png') 0 0 / 225px auto;}
#panel-details .bd::before, #panel-details .bd::after {background: url('https://i.imgur.com/blegSrD.jpg') center / cover;}
#panel-details .ft::before, #panel-details .ft::after {background: url('https://i.imgur.com/pF0SXcV.jpg') fixed center / cover;}

#panel-details, #panel-details div, #panel-details div::before {width: 100%;}
#panel-details, #panel-details div::before {position: absolute;}
#panel-details {top: 0;}
#panel-details h2 {display: none;}

#panel-details::after, #panel-details div::before, #panel-details div::after, body::after {
 content: '';
 display: block;
}
#panel-details::after, #panel-details div::after, body::after {position: fixed;}

#panel-details, #panel-details div:hover::before {
 min-height: 100vh;
 height: var(--body-size);
}

#panel-details:hover div::before {transition: opacity .5s ease-in-out, min-height 0s linear .5s, height 0s linear .5s;}

#panel-details div::before {
 min-height: 0;
 height: 0;
 opacity: 0;
 transition: opacity .5s ease-in-out 9999s, min-height 0s linear 9999s, height 0s linear 9999s;
}

#panel-details div:hover::before {
 opacity: 1;
 transition: opacity .5s ease-in-out;
}

#panel-details::after, #panel-details div::after {
 width: 150px;
 height: 150px;
 bottom: 5px;
 right: 5px;
 transition: filter .5s ease-in-out;
 z-index: 998;
}
#panel-details div:hover::after {filter: brightness(150%);}

#panel-details::after {clip-path: polygon(13px 97px, 113px 139px, 111px 149px, 2px 149px, 5px 123px);}
#panel-details .hd::after {clip-path: polygon(45px 49px, 121px 125px, 116px 133px, 15px 92px, 27px 69px);}
#panel-details .bd::after {clip-path: polygon(92px 15px, 134px 115px, 126px 121px, 49px 44px, 68px 28px);}
#panel-details .ft::after {clip-path: polygon(149px 2px, 149px 111px, 140px 113px, 98px 12px, 123px 5px);}

body::after {
 background-position: bottom right;
 width: 155px;
 height: 155px;
 bottom: 0;
 right: 0;
 z-index: 999;
 pointer-events: none;
}

/* Misc */

#columns, #pictures_container, #texts_container, #footer{top: 50px;}
@media screen and (min-height: 760px) {#columns, #pictures_container, #texts_container, #footer {top: calc(50% - 340px + 10px);}}

#pictures_container, #texts_container, #footer {
 width: 1px;
 height: 1px;
 position: absolute;
 left: calc(50% - 580px);
 overflow: visible;
}

/* Avatars */

#pictures_container .avatar_decoration:nth-child(-n+8), #pictures_container .avatar_decoration:nth-child(-n+8) a {
 width: 44px !important;
 height: 44px !important;
}
#pictures_container .avatar_decoration:nth-child(-n+8) {clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);}
#pictures_container .avatar_decoration:nth-child(-n+8) a {display: block;}

#pictures_container .avatar_decoration:nth-child(-n+8) img {
 width: 120px;
 height: 150px;
 margin: -18px 0 0 -28px;
 transform-origin: top left;
 transform: scale(.75);
 transition: all .5s ease-in-out;
}
#pictures_container .avatar_decoration:nth-child(-n+8) img[src*='flip'] {margin: -18px 0 0 -16px;}
#pictures_container .avatar_decoration:nth-child(-n+8) img:hover {
 background: #C0505CC0;
 filter: brightness(110%) saturate(90%);
}

#pictures_container .avatar_decoration:nth-child(1), #pictures_container .avatar_decoration:nth-child(5) {top: 455px !important;}
#pictures_container .avatar_decoration:nth-child(2), #pictures_container .avatar_decoration:nth-child(6) {top: 487px !important;}
#pictures_container .avatar_decoration:nth-child(3), #pictures_container .avatar_decoration:nth-child(7) {top: 519px !important;}
#pictures_container .avatar_decoration:nth-child(4), #pictures_container .avatar_decoration:nth-child(8) {top: 551px !important;}
#pictures_container .avatar_decoration:nth-child(1), #pictures_container .avatar_decoration:nth-child(3) {left: 176px !important;}
#pictures_container .avatar_decoration:nth-child(2), #pictures_container .avatar_decoration:nth-child(4) {left: 208px !important;}
#pictures_container .avatar_decoration:nth-child(5), #pictures_container .avatar_decoration:nth-child(7) {left: 546px !important;}
#pictures_container .avatar_decoration:nth-child(6), #pictures_container .avatar_decoration:nth-child(8) {left: 514px !important;}

/* Bokeh Animation */

@keyframes BlinkBokeh {
 0% {opacity: 0;}
 33% {opacity: 1;}
 66% {opacity: 1;}
 100% {opacity: 0;}
}

#pictures_container::before, #pictures_container::after, #texts_container::before, #texts_container::after, #footer::before, #footer::after {
 content: '';
 display: block;
 background: url('https://images2.imgbox.com/4a/07/XxsmfMip_o.png');
 width: 1160px;
 height: 690px;
 position: absolute;
 top: -5px;
 left: 0;
 animation: BlinkBokeh 4s ease-in-out infinite both;
 mix-blend-mode: overlay;
 pointer-events: none;
}

#pictures_container::before {
 background-position: 0 0;
 animation-delay: -3s;
}

#pictures_container::after {
 background-position: 0 -690px;
 animation-delay: -2s;
}

#texts_container::before {
 background-position: 0 -1380px;
 animation-delay: -1s;
}

#texts_container::after {
 background-position: 0 -2070px;
 animation-delay: 0s;
}

#footer::before {
 background-position: 0 -2760px;
 animation-delay: 1s;
}

#footer::after {
 background-position: 0 -3450px;
 animation-delay: 2s;
}