Pro for Leetawa

/* Design by Visual Light */
/* And Coded By AlthIndor */

html {
  --dark-color: #284868;
  --lite-color: papayawhip;
  --top-offset: calc(50% - 325px + 15px);
}

html, body {
  background: url('https://i.imgur.com/mMvoQ0T.png') fixed no-repeat bottom left / contain, url('https://i.imgur.com/6EWhSTL.jpg') fixed no-repeat center / cover #000;
  min-height: 800px;
}
body {position: relative;}
body a {text-decoration: none !important;}

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

/* Fonts */

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

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'), url(https://fonts.gstatic.com/s/opensanscondensed/v15/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMRw.woff2) format('woff2');
}

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

/* Header */

#gaia_header, #header_left, #header_right {box-sizing: border-box;}
#viewer #gaia_header li.spacer, #viewer #gaia_header img {display: none !important;}
#viewer #gaia_header li {margin: 0 5px;}

#viewer #gaia_header {
  background: #00000080 !important;
  height: 30px !important;
}

#gaia_header #header_left, #gaia_header #header_right {
  background: none !important;
  font: 700 0/28px 'Open Sans Condensed', sans-serif !important;
  padding: 0 5px !important;
}
#gaia_header #header_right {float: right;}

#gaia_header a {
  color: #FFFFFF !important;
  font-size: 13px !important;
  text-transform: uppercase;
}
#gaia_header a:hover {opacity:.8;}

#header_left li:nth-of-type(2) a::after {
  content: url('https://i.imgur.com/5FTB40o.png');
  position: relative;
  top: 4px;
}

/* Columns */

#columns {
  background: url('https://i.imgur.com/SVFgwHH.png') no-repeat 0 0 / contain;
  width: 1000px;
  height: 655px;
  top: var(--top-offset);
  right: 40px;
  transform: translateZ(0);
}
#columns .column {display: contents;}

/* Scrollbars */

#columns ::-webkit-scrollbar {
  background: #40000020;
  width: 6px;
}
#columns ::-webkit-scrollbar-thumb {background: var(--lite-color);}

.panel {
  scrollbar-color: var(--lite-color) #40000020;
  scrollbar-width: thin;
}

/* Panels */

.panel {
  background: none;
  color: #282828;
  font: 10px/1.7 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}
.panel h2 {display: none;}

.panel a {color: var(--dark-color);}
.panel a:hover {color: var(--lite-color);}

#id_about {
  width: calc(401px - 80px);
  height: calc(288px - 30px);
  text-align: right;
  padding-right: 15px;
  top: calc(93px + 15px);
  right: calc(462px + 15px);
}

#id_about, #id_comments {overflow-y: scroll;}
#id_about img, #id_comments .postcontent img {max-width: 100%;}

/* Contact */

#id_contact {
  top: 30px;
  left: 440px;
}

#id_contact li *, #id_comments h2 + div a {
  color: #FFFFFF;
  font-size: 0;
}
#id_contact a:hover, #id_comments h2 + div a:hover {opacity: .8;}

#id_contact li {
  float: left;
  margin: 0 15px 0 0;
}

#id_contact li *::before {font: 900 20px/40px 'Font Awesome 5 Free';}
#id_contact li:nth-of-type(1) *::before {content: '';}
#id_contact li:nth-of-type(2) *::before {content: '';}
#id_contact li:nth-of-type(3) *::before {content: '';}

#id_comments h2 + div a::before {
  content: 'ADD COMMENT';
  font: 11px/1 'Open Sans Condensed', sans-serif;
  letter-spacing: .05em;
  position: fixed;
  top: 375px;
  left: 44px;
}

/* Tiles */

#id_comments .dropBox, #id_friends li, #friendGroup.panel .dropBox {
  background: #FFFFFFC0;
  width: 48px;
  height: 48px;
  border: 3px solid var(--lite-color);
  overflow: hidden;
}

/* Comments */

#id_comments {
  width: 295px;
  height: calc(240px - 30px);
  padding-left: 15px;
  top: calc(403px + 15px);
  left: calc(39px + 15px);
  direction: rtl;
}
#id_comments dl {direction: ltr;}

#id_comments #alert_container, #id_comments h2 + div, #id_comments h2 ~ p {display: contents;}
#id_comments #alerts_banner, #id_comments h2 ~ p {display: none;}

#id_comments dt {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: revert;
  line-height: normal;
  padding: 0 0 5px 0;
  margin: 0 0 3px 0;
  border-bottom: 1px dotted #00000060;
}
#id_comments .username {float: revert;}
#id_comments .date a {font-size: 0;}

#id_comments .date a::before {
  content: '';
  font: 900 10px 'Font Awesome 5 Free';
}

#id_comments dd {margin: 0 0 20px 0;}
#id_comments dd:last-of-type {margin: 0;}

#id_comments .dropBox {
  height: 54px;
  margin: 5px 10px 0 0;
}

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

/* Friends */

#id_friends {
  top: 74px;
  right: 17px;
}

#id_friends h2 + div, #id_friends li:nth-of-type(n+10) {display: none;}
#id_friends li p, #id_friends li span {display: contents;}
#id_friends p {margin-bottom: 14px;}
#id_friends .dropBox {margin: 0;}

#id_friends h2 ~ p a {
  display: block;
  background: #40000050;
  width: 100%;
  height: 24px;
  color: #FFFFFF;
  font: 11px/23px 'Open Sans Condensed';
  text-align: center;
  text-transform: uppercase;
  border-radius: 2px;
}
#id_friends h2 ~ p a:hover {background: var(--dark-color);}

#id_friends ul {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-auto-rows: max-content;
  gap: 10px;
}

#id_friends li {
  float: none;
  position: relative;
}
#id_friends li:hover {opacity: .8;}

#id_friends li a {
  width: 100%;
  height: 100%;
  font-size: 0;
  position: absolute;
  left: 0;
}

/* Media */

.media_panel {
  background: url('https://i.imgur.com/gqTTTvw.png') -21px -6px, url('https://i.imgur.com/SVFgwHH.png') -300px -200px;
  background-blend-mode: difference, normal;
  width: 76px;
  height: 38px !important;
  bottom: 43px;
  right: 202px;
  border: 3px solid #40000060;
}

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

/* Misc */

#pictures_container, #texts_container {
  width: 0;
  height: 0;
  position: absolute;
  top: var(--top-offset);
  right: 40px;
}

/* Full-Size Friends */

#friendGroup.panel {
  background: burlywood;
  margin: 0;
  top: 50%;
  left: 50%;
  border: 5px solid #40000060;
  transform: translate(-50%, -50%);
}
#friendGroup.panel h2 + a, #friendGroup.panel p, #friendGroup.panel .user_info {display: none;}
#friendGroup.panel ul {margin: 5px 0 0 0;}

#friendGroup.panel li {
  display: grid;
  gap: 5px;
  width: 54px;
  padding: 0;
  margin: 0 10px;
}

#friendGroup.panel span {
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  grid-row: 2;
}