Pro for Teumes

/* Code by AlthIndor */

html, body {min-height: 100vh;}
html {--primary-color: orangered;}

body {background: url('https://images.fineartamerica.com/images-medium-large-5/foggy-woods-melissa-wegner.jpg') #000 center / cover;}
body a {transition: all .5s ease-in-out;}

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

#profile .caption, #profile .items, #profile #bar, #commonFriends, .section h2 {display: none;}
#header, #comments, #journal, #friends, #multimedia, #signature, #avatar_dropbox {display: none;}

/* Fonts */

@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 {box-shadow: 0 1px 2px #00000080;}
#gaia_header li {margin: 0 5px;}
#gaia_header li.spacer {display: none;}

#gaia_header #header_left, #gaia_header #header_right {
 width: 50%;
 height: 30px;
 font: 400 0/27px 'Open Sans', sans-serif;
 padding: 0 3px;
 box-sizing: border-box;
}

#header_left img {
 background: #FFFFFF;
 width: 0 !important;
 padding: 0 34px 0 0;
 mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
-webkit-mask: url('https://i.imgur.com/cGGVY2x.png') 0 3px no-repeat;
 transition: background .5s ease-in-out;
}
#header_left li:nth-of-type(2) a:hover img {background: var(--primary-color);}

#gaia_header a {
 color: #FFFFFF !important;
 font-size: 11px;
 text-decoration: none;
 text-transform: uppercase;
}
#gaia_header a:hover {color: var(--primary-color) !important;}

#gaia_header .favorites_add {
 background: #FFFFFF !important;
 margin: 0;
 top: 7px;
 right: 0;
 mask: url('https://graphics.gaiaonline.com/images/icons/heartIcon2_small.png');
-webit-mask: url('https://graphics.gaiaonline.com/images/icons/heartIcon2_small.png');
 transition: background .5s ease-in-out;
}
#gaia_header .favorites_add:hover {background: var(--primary-color) !important;}

/* Main Sections */

#site {
 width: 470px;
 height: 330px;
 margin: 0;
 position: absolute;
 top: calc(50% - 160px);
 left: calc(50% - 235px);
}
#content, #content #main {border: none;}

#content {
 background: none;
 width: 100%;
 height: 100%;
 padding: 0;
}

#content #sidebar, #content #main {
 width: 1px;
 height: 100%;
 overflow: visible;
}
#content #sidebar {left: 0;}

#content #main {
 min-height: 0;
 margin: 0;
}

/* Scrollbars */

#site ::-webkit-scrollbar, #site ::-webkit-scrollbar-thumb {border-radius: 4px;}
#site ::-webkit-scrollbar {background: #00000080; width: 8px;}
#site ::-webkit-scrollbar-thumb {background: #FFFFFF80 content-box; border: 1px solid transparent;}

#site * {
 scrollbar-color: #FFFFFF80 #00000080;
 scrollbar-width: thin;
}

/* Sections */

.section {
 background: #FFFFFF60 !important;
 color: #202020;
 font: 11px/1.7 'Open Sans', sans-serif;
 padding: 0;
 position: absolute;
 border: 10px solid transparent;
 border-radius: 10px;
 box-shadow: 0 1px 2px #00000080;
 box-sizing: border-box;
 overflow: hidden;
}
.section a {font-weight: bold;}

.section a:link, .section a:visited {color: inherit !important;}
.section a:hover, .section a:active {color: var(--primary-color) !important;}

/* About Me and Wish List */

#about, #wishlist {
 width: 320px;
 left: 150px;
}

#about, #wishlist .items {
 padding-right: 10px;
 overflow-y: scroll;
}

#about {
 height: 260px;
 top: 70px;
}

#about .links {
 display: flex;
 justify-content: center;
 margin: 0 0 10px 0;
}
#about .links li {margin: 0 5px;}

/* Wish List */

#wishlist {
 height: 60px;
 top: 0;
}
#wishlist .item {background: none;}

#wishlist .items {
 display: grid;
 grid-template-columns: repeat(6, 40px);
 grid-auto-rows: 40px;
 gap: 8px;
 width: 100%;
 height: 100%;
 scroll-snap-type: y mandatory;
 box-sizing: border-box;
}

#wishlist .items li {
 background: #00000040;
 display: block;
 width: 30px;
 height: 30px;
 padding: 5px;
 border-radius: 5px;
 transition: background .5s ease-in-out;
 scroll-snap-align: start;
 scroll-snap-stop: always;
}
#wishlist .items li:hover {background: var(--primary-color);}

/* Avatar and Details  */

#profile, #details {width: 140px;}
#profile {height: 170px;}

#details {
 height: 150px;
 top: 180px;
}

#details #stats {
 float: none;
 width: 100%;
 margin: 0;
}
#details #stats dt::after {content: ':';}
#details #stats ~ * {display: none;}