Pro for pupmiIk

/* Graphics by PupmiIk */
/* + Code by AlthIndor */

:root {
  --pink-0: #FFE6EE;
  --pink-1: #FFC0D4;
  --pink-2: #FFAEC8;
  --pink-3: #E0487A;
}

html, body {
  background: url('https://cdn103.picsart.com/204396711000202.gif') top center var(--pink-0);
  height: unset;
  min-height: 100vh;
}
body a {text-decoration: none !important;}

* {cursor: url('https://i.imgur.com/LIaThhY.gif'), auto !important;}

::selection {
  background: var(--pink-3);
  color: #FFFFFF;
}

/* Altas */

#column_1, .custom_panel a, .media_panel {background: url('https://i.ibb.co/Srb11wx/pupmiik-buttons.png');}
.custom_panel a, .media_panel {background-position-y: -240px;}
.custom_panel a:hover, .media_panel:hover {background-position-y: -350px;}

.custom_panel a:nth-of-type(2) {background-position-x: -90px;}
.custom_panel a:nth-of-type(3) {background-position-x: -180px;}
.custom_panel a:nth-of-type(4) {background-position-x: -270px;}
.custom_panel a:nth-of-type(5) {background-position-x: -360px;}
.media_panel {background-position-x: -450px;}

/* Fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: 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: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: local('Barlow Bold'), local('Barlow-Bold'), url('https://fonts.gstatic.com/s/barlow/v5/7cHqv4kjgoGqM7E3t-4s51os.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 900;
  src: local('Barlow Black'), local('Barlow-Black'), url('https://fonts.gstatic.com/s/barlow/v5/7cHqv4kjgoGqM7E3j-ws51os.woff2') format('woff2');
}

/* Header */

#viewer #gaia_header {
  background: var(--pink-1);
  height: 30px !important;
  box-shadow: 0 4px var(--pink-2);
}
#gaia_header li.spacer {display: none !important;}
#gaia_header li {margin: 0 5px;}

#gaia_header #header_left, #gaia_header #header_right {
  background: none;
  font: 700 0px/30px 'Barlow', sans-serif !important;
  padding: 0 4px !important;
  box-sizing: border-box;
}
#gaia_header #header_right {float: right;}

#gaia_header img {
 -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  background: #FFFFFF;
  width: 0;
  padding: 0 37px 0 0;
  margin-right: -1px;
}
#header_left li:nth-of-type(2) a:hover img {background: var(--pink-3);}

#gaia_header a {
  color: #FFFFFF !important;
  font-size: 12px !important;
  text-transform: uppercase;
}
#gaia_header a:hover {color: var(--pink-3) !important;}

#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';}

#gaia_header::before {
  content: url('https://i.imgur.com/4VRQIWg.png');
  position: absolute;
  top: -165px;
  left: calc(50% - 160px);
  transform-origin: 0 0;
  transform: scale(.16);
}

/* Columns */

#columns, #columns .column {
  float: none;
  contain: layout;
}

#columns {
  width: 800px;
  position: static;
  margin: 100px auto 40px auto;
}

#columns .column {
  display: block;
  width: unset;
  font-size: 0;
  margin: 0;
}
#columns #column_3 {display: none;}

#columns #column_1 {
  width: 500px;
  height: 230px;
  margin-bottom: 20px;
  position: relative;
  left: calc(50% - 250px);
}

#columns #column_2 {
  display: grid;
  grid-template: 1fr / 205px 370px 205px;
  gap: 0 10px;
  max-height: 419px;
}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: var(--pink-0);
  width: 0;
}
#columns ::-webkit-scrollbar-thumb {background: var(--pink-3);}

.panel {
  scrollbar-color: var(--pink-3) var(--pink-0);
  scrollbar-width: none;
}

/* Panels */

.panel, .panel h2 {
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.panel:not(.media_panel), .panel h2 {background: none;}
.panel img {max-width: 100% !important;}

#column_1 .panel {position: absolute;}

.panel a {color: var(--pink-3);}
.panel a:hover {color: var(--pink-2);}

#column_2 .panel {
  color: #202020;
  font: 10px/1.6 'Open Sans', sans-serif;
  border: 14px solid transparent;
  border-top-width: 49px;
  border-image: url('https://i.ibb.co/MMRDcCW/pupmiik-border.png') 49 14 14 14 fill / 49px 14px 14px 14px;
  border-radius: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#id_wishlist {grid-area: 1/1/2/2;}
#id_about {grid-area: 1/2/2/3;}
#id_footprints {grid-area: 1/3/2/4;}

/* Panel Headers */

#column_2 h2 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  color: var(--pink-3);
  font: 900 20px/1 'Barlow', sans-serif;
  position: fixed;
  top: 0;
}
#column_1 h2 {display: none;}

#id_wishlist h2, #id_footprints h2 {width: 205px;}
#id_wishlist h2 {left: 0;}
#id_footprints h2 {right: 0;}

#id_about h2 {
  width: 370px;
  left: 215px;
}

#column_2 h2::before, #column_2 h2::after {
  content: '•';
  color: #FFFFFF;
  margin: -1px 10px 0 10px;
}

/* Details */

#id_details {
  width: 120px;
  height: 150px;
  bottom: 25px;
  left: calc(50% - 60px);
}
#id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}

/* Custom Links and Media */

.custom_panel {
  width: 100%;
  height: 100% !important;
  z-index: 1;
}
.custom_panel br {display: none;}

.custom_panel a, .media_panel {
  width: 90px;
  height: 80px !important;
  clip-path: polygon(
    045px 003px, 050px 000px, 063px 000px, 073px 002px, 082px 009px,
    089px 017px, 090px 029px, 090px 039px, 084px 048px, 061px 072px,
    045px 080px, 029px 072px, 006px 048px, 000px 039px, 000px 029px,
    001px 017px, 008px 009px, 017px 002px, 027px 000px, 040px 000px
  );
}
.custom_panel a {font-size: 0;}
.media_panel {z-index: 2;}

.custom_panel a, .media_panel iframe {position: absolute;}

.custom_panel a:nth-of-type(2), .custom_panel a:nth-of-type(5) {top: 60px;}
.custom_panel a:nth-of-type(3), .media_panel {top: 120px;}
.custom_panel a:nth-of-type(1), .custom_panel a:nth-of-type(3) {left: 70px;}
.custom_panel a:nth-of-type(4), .media_panel {right: 70px;}
.custom_panel a:nth-of-type(2) {left: 0;}
.custom_panel a:nth-of-type(5) {right: 0;}

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

/* Wish List */

#id_wishlist {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  grid-auto-rows: 40px;
  gap: 5px;
  padding: 0 1px 1px 1px;
  scroll-snap-type: y mandatory;
}
#id_wishlist .clear, .premium_sparkle {display: none;}

#id_wishlist .item {
  background: var(--pink-0);
  padding: 5px 0;
  position: relative;
  border-radius: 5px;
  box-sizing: border-box;
  scroll-snap-align: start;
}
#id_wishlist .item:hover {background: var(--pink-3);}

.owner_checkmark {
  background: #FFFFFF;
  padding: 2px;
  margin: 0;
  bottom: -1px;
  left: -1px;
  border: 1px solid var(--pink-3);
}

/* Visitors */

#id_footprints .item {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: center;
  line-height: 1.4;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 8px;}
#id_footprints a {flex: 1 0 100%;}

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

/* Misc */

#pictures_container, #texts_container {
  width: 0;
  height: 0;
  position: absolute;
  top: 130px;
  left: 50%;
}

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

.spoiler-control {
  background: var(--pink-1);
  width: 100px;
  height: 30px;
  color: var(--pink-3);
  font: 700 12px/30px 'Barlow', sans-serif;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  outline: none;
  box-shadow: 0 4px var(--pink-2);
}

.spoiler-control:hover, .spoiler-revealed .spoiler-control {
  background: var(--pink-3);
  color: #FFFFFF;
}