Pro for Kloob

/* Profile by AlthIndor */
/* Waterfox Classic Ver */

:root {
    --c-backg: #352F44;
    --c-panel: #5C5470;
    --c-texts: #FAF0E6;
    --c-links: #B9B4C7;
    --c-focus: #FFB162;
}

html, body {
    background: var(--c-backg);
    height: unset;
    min-height: 100vh;
}
body a {text-decoration: none !important;}
a:focus, button:focus {outline: none;}

::selection {
    background: var(--c-focus);
    color: var(--c-texts);
}

/* Fonts */

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvoorCIPrE.woff2) format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pbCIPrE.woff2) format('woff2');
}

@font-face {
    font-family: 'Font Awesome';
    font-style: normal;
    font-weight: 900;
    src: url(https://ka-f.fontawesome.com/releases/v5.15.4/webfonts/free-fa-solid-900.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header {
    background: var(--c-panel);
    width: calc(100% - 20px) !important;
    height: 40px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    border-radius: 5px;
}
#gaia_header li {margin: 0 5px;}
#gaia_header li.spacer {display: none !important;}

#gaia_header #header_left, #gaia_header #header_right {
    background: none;
    width: auto !important;
    font: 0/39px 'Raleway', sans-serif !important;
    margin: 0 10px !important;
}

#gaia_header #header_right {
    float: right;
    display: grid !important;
    grid-auto-flow: column;
}
#header_right li:nth-of-type(4) {grid-column: 2;}

#gaia_header a {
    color: var(--c-texts) !important;
    text-transform: uppercase;
}
#gaia_header a:hover {color: var(--c-links) !important;}
#gaia_header a:focus {color: var(--c-focus) !important;}

#header_left img {
    -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat;
    mask: url('https://i.imgur.com/5FTB40o.png') no-repeat;
    background: var(--c-texts);
    width: 0;
    height: 17px;
    padding: 0 37px 0 0;
}
#header_left li:nth-of-type(2) a:hover img {background: var(--c-links);}
#header_left li:nth-of-type(2) a:focus img {background: var(--c-focus);}

#gaia_header a, #gaia_header a::before {font-size: 13px !important;}
#gaia_header a[href*='edit'], #gaia_header a[href*='report'] {font-size: 0 !important;}
#gaia_header a[href*='edit']::before {content: 'Edit My Own';}
#gaia_header a[href*='report']::before {content: 'Report Profile';}

/* Columns */

#columns, #pictures_container, #texts_container {
    top: 200px;
    left: calc(50% - 320px);
}
#columns .column, #pictures_container, #texts_container {position: absolute;}

#columns, #columns .column {
    float: none;
    width: 640px;
    font-size: 0;
}
#columns .column {margin: 0;}
#column_1 {display: contents;}

#column_2 {
    height: 890px;
    top: 60px;
    border-top: 1px solid var(--c-texts);
}

#column_3 {
    position: absolute;
    top: 400px;
    overflow: visible;
}

/* Scrollbars */

#columns ::-webkit-scrollbar, #columns ::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 3px;
}
#columns ::-webkit-scrollbar {background: var(--c-backg);}
#columns ::-webkit-scrollbar-thumb {background: var(--c-texts);}

#columns * {
    scrollbar-color: var(--c-texts) var(--c-backg);
    scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
    background: none;
    color: var(--c-texts);
    font: 500 12px/1.8 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
}
.panel:not(.custom_panel) {position: absolute;}
.panel img:not(.avatarImage) {max-width: 100% !important;}

.panel a {color: var(--c-links);}
.panel a:hover {color: inherit;}
.panel a:focus {color: var(--c-focus);}

#id_details, #id_wishlist, #id_about, #id_comments, #column_3 {
    background: var(--c-panel);
    border: 20px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
}

#id_wishlist, #id_about h2 + div, #id_comments dl, #id_footprints {
    padding-right: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}

#id_details, #id_wishlist {
    height: 230px;
    top: 20px;
}
#id_details {width: 160px;}

#id_wishlist {
    width: 460px;
    right: 0;
}

#id_about, #id_comments, #column_3 {height: 300px;}
#id_about {top: 270px;}
#id_comments {top: 590px;}
#column_3 {top: 971px;}

#id_about h2 + div, #id_comments dl, #id_footprints {
    width: 580px;
    height: 214px;
}

div:focus, dl:focus {
    outline: 2px solid var(--c-focus);
    outline-offset: 10px;
}
#id_wishlist:focus {outline-offset: -10px;}

/* Panel Headers */

#id_about h2, #id_comments h2, #column_3::before {
    height: 25px;
    color: var(--c-texts);
    font: 700 20px/16px 'Raleway', sans-serif;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border-bottom: 1px solid currentColor;
}
#id_details h2, #id_wishlist h2, #id_footprints h2 {display: none;}

#column_3::before {
    content: 'VISITORS';
    display: block;
}

/* Contact, Store, and Media */

.contact_panel li *, .store_panel a, .media_panel {
    display: block;
    background: var(--c-panel);
    width: 40px;
    height: 40px !important;
    color: var(--c-texts) !important;
    font-size: 0;
    text-align: center;
    border-radius: 5px;
}
.contact_panel a:hover, .store_panel a:hover, .media_panel:hover {background: var(--c-links);}
.contact_panel a:focus, .store_panel a:focus, .media_panel:focus-within {background: var(--c-focus);}

.contact_panel, .store_panel, .media_panel {top: 0;}
.contact_panel {width: 540px;}
.store_panel {right: 50px;}
.media_panel {right: 0;}

.contact_panel, .contact_panel ul {display: flex;}
.contact_panel li {margin: 0 0 0 10px;}

.contact_panel h2 {
    flex-grow: 1;
    font: 700 56px/40px 'Raleway', sans-serif;
    letter-spacing: 2px;
    text-indent: -3px;
}

.store_panel, .media_panel {overflow: hidden;}
.store_panel h2, .media_panel h2 {display: none;}
.store_panel h3, .store_panel div, .store_panel p:first-of-type {display: none;}

/* Button Icons */

.contact_panel li *::before, .store_panel a::before, .media_panel::before {font: 900 20px/41px 'Font Awesome';}
.contact_panel li:nth-of-type(1) *::before {content: '';}
.contact_panel li:nth-of-type(2) *::before {content: '';}
.contact_panel li:nth-of-type(3) *::before {content: '';}
.store_panel a::before {content: '';}
.media_panel::before { content: '';}

/* Media Video */

.media_panel iframe {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: -14px;
    opacity: .001;
}

/* Details */

#id_details p {margin-bottom: 15px;}
#id_details p:nth-of-type(n+2) {display: none;}

.forum_userstatus, .pushBox, #avatar_menu {width: 120px;}
.forum_userstatus, .pushBox {height: 25px;}

.forum_userstatus, #avatar_menu {
    background: var(--c-backg);
    border: none;
    box-sizing: border-box;
}

.forum_userstatus, #avatar_menu a {
    margin: 0;
    padding: 5px;
}

.forum_userstatus {
    border-radius: 3px;
    position: relative;
    top: unset;
    left: unset;
}
.forum_userstatus .statuslinks {display: contents;}

.forum_userstatus .statuslinks span {
    color: var(--c-texts) !important;
    font: 700 9px/16px 'Raleway', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pushBox, .pushBox::after {
    position: absolute;
    top: 0;
}
.pushBox {left: 0;}

.pushBox::after {
    content: '';
    font: 15px/25px 'Font Awesome';
    right: 5px;
}

#avatar_menu {
    margin: -3px 0 0 0;
    padding: 5px 1px 1px 1px;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
}

#avatar_menu a {
    color: var(--c-texts);
    font: 9px 'Raleway', sans-serif;
    text-transform: capitalize;
}
#avatar_menu a:hover {background: var(--c-links);}

#avatar_menu .menu_seperator {
    background: var(--c-panel) !important;
    width: 118px !important;
    margin: 1px 0 !important;
}

/* Wish List */

#id_wishlist {
    display: grid;
    grid-template-columns: repeat(8, 40px);
    grid-auto-rows: 40px;
    grid-gap: 10px;
    gap: 10px;
    scroll-padding-bottom: 2px;
    scroll-snap-type: y mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}

#id_wishlist .item {
    position: relative;
    scroll-snap-align: start;
}

#id_wishlist a {
    display: block;
    background: var(--c-backg);
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 3px;
}
#id_wishlist a:hover {background: var(--c-links);}
#id_wishlist a:focus {background: var(--c-focus);}

#id_wishlist .owner_checkmark {
    background: var(--c-texts);
    margin: 0;
    padding: 2px;
    bottom: -2px;
    right: -2px;
    border: 1px solid var(--c-backg);
    pointer-events: none;
}

/* Comments */

#id_comments h2 {width: calc(100% - 67px);}
#id_comments #alerts_banner, #id_comments .deletecomment {display: none;}
#id_comments h2 ~ p, #id_comments dd:last-of-type {margin: 0;}
#id_comments #alert_container {display: contents;}

#id_comments dt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    height: unset;
    line-height: normal;
    padding: 0 0 4px 0;
    margin: 0 0 3px 0;
    border-bottom: 1px dotted currentColor;
}

#id_comments .date {
    font-size: 9px;
    text-transform: uppercase;
}
#id_comments .date a {letter-spacing: 1px;}

#id_comments dd {
    display: grid;
    grid-template: repeat(2, max-content) / 57px calc(100% - 57px);
    margin: 0 0 20px 0;
}

#id_comments .dropBox {
    background: var(--c-backg);
    width: 48px;
    height: 54px;
    margin: 4px 7px 0 0;
    border: 1px solid transparent;
    border-radius: 3px;
    overflow: hidden;
}

#id_comments .avatarImage {
    width: 120px;
    height: 150px;
    margin: -30px 0 0 -47px;
}

/* Comments Links */

#id_comments h2 + div, #id_comments h2 ~ p {
    background: var(--c-backg);
    width: 26px;
    height: 26px;
    position: absolute;
    top: 0;
    border-radius: 3px;
    overflow: hidden;
}
#id_comments h2 + div {right: 31px;}
#id_comments h2 ~ p {right: 0;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
    display: block;
    color: var(--c-texts);
    font-size: 0;
    text-align: center;
    text-indent: 1px;
}
#id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {background: var(--c-links);}
#id_comments h2 + div a:focus, #id_comments h2 ~ p a:focus {background: var(--c-focus);}

#id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 15px/27px 'Font Awesome';}
#id_comments h2 + div a::before {content: '';}
#id_comments h2 ~ p a::before {content: '';}

/* Visitors */

#id_footprints .item {
    display: flex;
    flex-flow: row nowrap;
}

#id_footprints .item::before {
    content: ' visited ';
    white-space: pre;
}
#id_footprints .item::after {content: '.';}

#id_footprints .item a {
    order: -1;
    max-width: 440px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Misc */

.spoiler-hidden {padding: 0;}
.spoiler-control-hide {margin-bottom: 10px;}

.spoiler-revealed {
    padding: 5px;
    border: 1px dotted var(--c-backg);
    border-radius: 3px;
}

.spoiler-control {
    background: var(--c-backg);
    width: 100px;
    height: 30px;
    color: inherit;
    font: inherit;
    border: none;
    border-radius: 3px;
}
.spoiler-control:hover {background: var(--c-links);}
.spoiler-control:focus {background: var(--c-focus);}

.bbcode-swapping-image {background-image: url('https://i.imgur.com/Fk5mUXF.png');}

/* Click-To-Enter Button */

.custom_panel, .custom_panel div {width: 0;}
.custom_panel h2, .custom_panel .clear {display: none;}

.custom_panel .spoiler-wrapper, .custom_panel button {border: none;}
.custom_panel .spoiler-revealed, .custom_panel .spoiler {pointer-events: none;}
.custom_panel .spoiler-control-hide, .custom_panel span {display: none !important;}
.custom_panel .spoiler-wrapper {padding: 0;}
.custom_panel .spoiler-revealed {height: 1321px;}

.custom_panel .spoiler-hidden, .custom_panel button {
    background: var(--c-backg) !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.custom_panel .spoiler-control-show {position: absolute;}

.custom_panel .spoiler-hidden {
    position: fixed;
    z-index: 9998;
}

.custom_panel .spoiler-hidden, .custom_panel .spoiler {
    display: inline-flex;
    flex-flow: column wrap;
    place-content: center;
}
.custom_panel .spoiler-revealed .spoiler {display: none;}

.custom_panel .spoiler {
    width: 722px;
    font: 700 80px/57px 'Raleway', sans-serif;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
.custom_panel b:nth-of-type(1) {letter-spacing: 3px;}

.custom_panel b:nth-of-type(2) {
    background: var(--c-panel);
    font: 700 40px/70px 'Raleway', sans-serif;
    letter-spacing: 10px;
    margin: 30px 6px 0 6px;
    padding: 0 0 2px 0;
    border-radius: 5px;
}

.custom_panel:focus-within .spoiler {
    outline: 2px solid var(--c-focus);
    outline-offset: 50px;
}
.custom_panel:focus-within b:nth-of-type(2) {background: var(--c-focus);}

.custom_panel:active .spoiler {outline: none;}
.custom_panel:active b:nth-of-type(2) {background: var(--c-panel);}