Pro for VenereaI Disease

/* Profile by AlthIndor */

:root {
  --color-accent: orangered;
  --color-button: #FFFFFFC0;
  --color-panel1: #FFFFFFE0;
  --color-panel2: #F8F8F8;
  --color-scroll: #989898;
  --hover: #00000010;
  --shadow: 0 2px 5px #00000080;
  --text: #202020;
}

/* Uncomment for Dark Theme

:root {
  --color-button: #000000C0;
  --color-panel1: #000000E0;
  --color-panel2: #101010;
  --color-scroll: #808080;
  --hover: #FFFFFF20;
  --text: #F0F0F0;
}

*/

html, body {background: url('https://i.gifer.com/2iVX.gif') top center / contain no-repeat var(--text);}
body a {text-decoration: none !important;}

::selection {
  background: var(--color-accent);
  color: var(--color-panel2);
}

/* Fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v17/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/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2') format('woff2');
}

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

/* Header */

#viewer #gaia_header, #gaia_header ul {height: 40px !important;}
#viewer #gaia_header li {display: contents !important;}
#viewer #gaia_header li.spacer {display: none !important;}

#viewer #gaia_header {
  background: var(--color-button);
  backdrop-filter: saturate(200%) blur(15px);
  width: calc(100% - 20px) !important;
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  border-radius: 3px;
  box-shadow: var(--shadow);
}

#gaia_header ul {
  display: flex !important;
  background: none !important;
  width: auto !important;
  font: 700 0/39px 'Open Sans', 'Segoe UI', sans-serif !important;
  box-sizing: border-box;
}
#gaia_header #header_left {padding: 0 0 0 5px !important;}

#gaia_header #header_right {
  float: right;
  justify-content: right;
  padding: 0 5px 0 0 !important;
}

#header_left img {
 -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 center no-repeat;
  mask: url('https://i.imgur.com/5FTB40o.png') 0 center no-repeat;
  background: var(--text);
  width: 0;
  height: 100%;
  padding: 0 37px 0 0;
}

#viewer #gaia_header a {
  display: inline-block !important;
  color: var(--text) !important;
  font-size: 12px;
  text-transform: uppercase;
  padding: 0 5px;
}

#gaia_header a:hover {
  background: var(--hover);
  box-shadow: 0 -3px var(--color-accent) inset;
}

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

/* Columns */

#columns {display: contents;}
#columns .column {display: contents;}

#columns::after {
  position: absolute;
  bottom: 45px;
  border: 15px solid transparent;
  border-top: 20px solid var(--color-panel2);
  border-bottom: none;
  filter: drop-shadow(var(--shadow));
  clip-path: polygon(-20px 0, 50px 0, 50px 40px, -20px 40px);
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: var(--hover);
  width: 8px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--color-scroll);}

.panel {
  scrollbar-color: var(--color-scroll) var(--hover);
  scrollbar-width: thin;
}

/* Panels */

.panel, .panel h2 {
  background: none;
  padding: 0;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
}

.panel a {color: var(--color-accent);}
.panel a:hover {color: inherit;}

#id_comments, #id_footprints, #id_wishlist {
  background: linear-gradient(to top, var(--color-panel2), transparent) border-box var(--color-panel1);
  backdrop-filter: saturate(200%) blur(15px);
  width: 350px;
  height: 420px;
  color: var(--text);
  font: 10px/1.6 'Open Sans', 'Segoe UI', sans-serif;
  text-align: justify;
  padding-right: 15px;
  bottom: 65px;
  left: 15px;
  border: 15px solid transparent;
  border-radius: 3px;
  box-shadow: var(--shadow);
  overflow: hidden scroll;
}
:is(#id_comments, #id_footprints, #id_wishlist) h2 {display: none;}

/* Click Buttons */

#id_badges, #id_badges *, .media_panel {height: 40px !important;}
#id_badges, .media_panel {bottom: 10px;}
#id_badges {left: 100px;}

.media_panel {
  width: 80px;
  left: 10px;
  overflow: hidden;
}

#id_badges li, .media_panel {
  background: var(--color-button);
  backdrop-filter: saturate(200%) blur(15px);
  border-radius: 3px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
#id_badges :is(h2, li:nth-of-type(n+4), .clear) {display: none;}

#id_badges li {
  margin: 0 10px 0 0;
  overflow: hidden;
}

#id_badges img {
  width: 0;
  padding-right: 40px;
  position: relative;
}

/* Buttons Hover / Click Color */

#id_badges li::before, .media_panel::before, .media_panel h2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#id_badges li::before, .media_panel::before {
  border: 5px solid transparent;
  border-width: 0 5px;
  box-sizing: border-box;
}

#id_badges li:hover::before, .media_panel:hover::before,
#tooltip-badge_c[style*='left: 140px']:first-of-type ~ #columns #id_badges li:nth-of-type(1)::before,
#tooltip-badge_c[style*='left: 190px']:first-of-type ~ #columns #id_badges li:nth-of-type(2)::before,
#tooltip-badge_c[style*='left: 240px']:first-of-type ~ #columns #id_badges li:nth-of-type(3)::before,
#equipped-item-details_mask:first-of-type ~ #columns #id_badges li:nth-of-type(3)::before {
  background: var(--hover) border-box;
  box-shadow: 0 -3px var(--color-accent) inset;
}

#id_badges li::before {
  color: var(--text);
  font: 900 19px/39px 'Font Awesome 5 Free';
  text-align: center;
}
#id_badges li:nth-of-type(1)::before {content: '';}
#id_badges li:nth-of-type(2)::before {content: '';}
#id_badges li:nth-of-type(3)::before {content: '';}

/* Control Badges Popups */

#tooltip-badge_c {visibility: hidden !important;}
#tooltip-badge_c :is(#tooltip-badge, .underlay) {display: none;}
#badge_display {display: none;}

/* Button Functionality */

#id_comments, #id_footprints, #id_wishlist {display: none;}
#tooltip-badge_c[style*='left: 240px']:first-of-type ~ #columns #id_wishlist, #equipped-item-details_mask:first-of-type ~ #columns #id_wishlist {display: grid;}
#tooltip-badge_c[style*='left: 140px']:first-of-type ~ #columns #id_comments {display: block;}
#tooltip-badge_c[style*='left: 190px']:first-of-type ~ #columns #id_footprints {display: block;}

#tooltip-badge_c ~ #columns::after, #equipped-item-details_mask:first-of-type ~ #columns::after {content: '';}
#tooltip-badge_c[style*='left: 240px']:first-of-type ~ #columns::after, #equipped-item-details_mask:first-of-type ~ #columns::after {left: 205px;}
#tooltip-badge_c[style*='left: 140px']:first-of-type ~ #columns::after {left: 105px;}
#tooltip-badge_c[style*='left: 190px']:first-of-type ~ #columns::after {left: 155px;}

/* Comments */

#id_comments #alerts_banner, #id_comments .dropBox {display: none;}
#id_comments #alert_container {display: contents;}
#id_comments dl {clear: both;}

#id_comments dd {
  display: grid;
  grid-template: repeat(2, max-content) / 100%;
  margin: 0 0 15px 0;
}
#id_comments dd:last-of-type {margin: 0;}

#id_comments dt {
  height: unset;
  line-height: inherit;
  text-align: left;
  padding: 0 0 3px 0;
  margin: 0 0 3px 0;
  border-bottom: 1px dotted var(--text);
}
#id_comments .username {float: none;}

#id_comments .date {
  display: flex;
  flex-flow: row-reverse;
  justify-content: space-between;
  text-indent: -.725em;
}

#id_comments .deletecomment {
  float: none;
  display: grid;
  grid-auto-flow: column dense;
  justify-content: left;
  grid-row: 2;
  margin: 0;
}
#id_comments .deletecomment br {display: none;}

#id_comments .deletecomment::after {
  content: ' or ';
  grid-column: 2;
  white-space: pre;
}

/* Comments Buttons */

#id_comments h2 + div, #id_comments h2 ~ p {
  background: var(--text);
  width: calc(50% - 7.5px);
  height: 30px;
  text-align: center;
  margin-bottom: 15px;
  overflow: hidden;
}
#id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: var(--color-scroll);}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a, #id_comments h2 ~ p a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-panel1);
  line-height: 30px;
  text-transform: uppercase;
}
#id_comments h2 + div a {font-size: 0;}

#id_comments h2 + div a::before {
  content: 'Post New Comment';
  font-size: 10px;
}

/* Visitors */

#id_footprints {
  line-height: 1.85;
  overflow-y: auto;
}

#id_footprints .item {
  display: grid;
  grid-auto-flow: column;
  justify-content: left;
}

#id_footprints .item a {
  text-decoration: dotted underline var(--text) !important;
  text-transform: capitalize;
}

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

/* Wishlist */

#id_wishlist {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 40px;
  gap: 10px;
  text-align: center;
  scroll-snap-type: y mandatory;
}
#id_wishlist :is(.premium_sparkle, .glow, .clear) {display: none;}

#id_wishlist .item {
  background: var(--hover);
  width: 100%;
  height: 30px;
  padding: 5px 0;
  position: relative;
  border-radius: 3px;
  scroll-snap-align: start;
}
#id_wishlist .item:hover {background: var(--color-accent);}

#id_wishlist .owner_checkmark {
  background: url('https://i.imgur.com/UzAXOFf.png') 0 -88px no-repeat;
  width: 0;
  margin: 0;
  padding: 10px 12px 0 0;
  bottom: 3px;
  left: 3px;
}

/* Media */

.media_panel::before, .media_panel * {position: absolute;}
.media_panel::before {content: '';}

.media_panel h2 {
 -webkit-mask: url('https://i.imgur.com/gqTTTvw.png') -16px -2px;
  mask: url('https://i.imgur.com/gqTTTvw.png') -16px -2px;
  background: var(--text);
  font-size: 0;
}

.media_panel iframe {
  width: 300px;
  height: 200px;
  bottom: 0;
  left: -18px;
  transform-origin: bottom left;
  transform: scale(1.2);
  opacity: .001;
}

/* Misc */

#pictures_container, #texts_container {
  width: 0;
  height: 0;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

#equipped-item-details_mask ~ #equipped-item-details_mask, #avatar_menu + div + div {display: none !important;}