/* Design by SugaSharra, Code by AlthIndor */ html, body {background: url('https://images2.imgbox.com/7b/d8/DkIXFa7t_o.png');} html { --azure-color: #BEFBF5; --green-color: #708854; --brown-color: #482012; --yellw-color: #C4C084; --ornge-color: #E03A1C; } @keyframes RotateDisc { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @keyframes OpaqueDisc { from {opacity: 75;} to {opacity: .25;} } /* Fonts */ @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v13/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2'); } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v10/jizaRExUiTo99u79D0KExQ.woff2) format('woff2'); } /* Header */ #viewer #gaia_header { background: #181818; width: calc(100% - 20px) !important; height: 30px !important; position: absolute !important; top: 10px !important; left: 10px !important; border-bottom: 3px solid var(--yellw-color); box-shadow: 0 1px 5px rgba(0,0,0,.5), 0 0 3px 2px #304050; } #gaia_header li.spacer {display: none !important;} #gaia_header li {margin: 0 5px;} #gaia_header #header_left, #gaia_header #header_right { background: none !important; font-size: 0 !important; padding: 0 6px 0 4px !important; box-sizing: border-box; } #gaia_header #header_right {float: right !important;} #gaia_header #header_left img { background: var(--yellw-color); width: 0; height: 16px; padding: 0 36px 0 0; transition: background .5s ease-in-out; mask-image: url('https://i.imgur.com/5FTB40o.png'); -webkit-mask-image: url('https://i.imgur.com/5FTB40o.png'); } #gaia_header #header_left img:hover {background: #FFFFFF;} #gaia_header a { color: var(--yellw-color) !important; font: normal 12px/28px 'Pacifico', cursive !important; transition: color .5s ease-in-out; text-decoration: dotted underline !important; } #gaia_header a:hover {color: #FFFFFF !important;} /* Columns */ #columns, #column_1, #column_2, #column_3 { display: block; float: none; margin: 0; position: absolute; } #columns { background: url('https://images2.imgbox.com/36/e0/juHFw72e_o.png') no-repeat top left / contain; width: 1050px; height: 1000px; left: calc(50% - 525px); top: 60px; transform: translateZ(0); } @media screen and (min-height: 1070px) {#columns {top: calc(50% - 500px + 30px);}} @media screen and (min-height: 1400px) {#columns {top: calc(50% - 500px);}} #column_1, #column_2, #column_2::after { top: 0; left: 0; } #column_1, #column_2 { width: 100%; height: 100%; } #column_2 {background: url('https://images2.imgbox.com/fd/0f/g8R0rK4z_o.png') no-repeat top left / contain;} #column_2::after { content: url('https://images2.imgbox.com/f0/b7/nSIMDNfo_o.png'); position: absolute; transform-origin: 0 0; transform: scale(.5); pointer-events: none; } #column_3 { width: 410px; height: 410px; top: 197px; left: 191px; } #columns ::-webkit-scrollbar { background: rgba(0,0,0,.5); width: 10px; border-radius: 3px; } #columns ::-webkit-scrollbar-thumb { background: rgba(254,244,234,.4) content-box; border: 1px solid transparent; border-radius: 3px; } /* Column 1 is Animation Layer */ #column_1 .custom_panel, #column_1 .custom_panel div { width: 100%; height: 100%; position: absolute; } #column_1 .custom_panel b, #column_1 .custom_panel b::after {position: absolute;} #column_1 .custom_panel br {display: none;} #column_1 .custom_panel b:nth-of-type(1)::after, #column_1 .custom_panel b:nth-of-type(2)::after { top: -97px; left: -97px; } #column_1 .custom_panel b:nth-of-type(1)::after { content: url('https://images2.imgbox.com/f4/37/yjFo4y8i_o.png'); animation: RotateDisc 180s linear infinite, OpaqueDisc 10s 3.3s linear infinite alternate; } #column_1 .custom_panel b:nth-of-type(2)::after { content: url('https://images2.imgbox.com/2e/0b/pbHyPD78_o.png'); animation: RotateDisc 140s linear infinite reverse, OpaqueDisc 10s linear infinite alternate; } #column_1 .custom_panel b:nth-of-type(3):after { content: url('https://images2.imgbox.com/03/06/o0Z76iAK_o.png'); top: 73px; left: 66px; } #column_1 .custom_panel b:nth-of-type(4)::after { content: url('https://images2.imgbox.com/f7/5b/XiNm847u_o.png'); top: 642px; left: 502px; animation: RotateDisc 120s linear infinite; } /* Panels */ .panel, .panel h2 { padding: 0; margin: 0; box-sizing: border-box; } .panel a { color: var(--azure-color); font-weight: normal; text-decoration: none; transition: color .5s ease-in-out; } .panel a:hover {color: var(--yellw-color);} .panel { background: none; color: #FFFFFF; font: 12px/1.5 'PT Sans', sans-serif; position: absolute; overflow: hidden; overscroll-behavior-y: contain; } #column_3 .panel { width: 100%; height: 100%; top: -100%; left: 0; } #column_3 .panel:hover {top: 0%;} #id_about img, #id_comments .postcontent img, #id_signature img {max-width: 100%;} #id_about, #id_comments, #id_interests { text-align: justify; padding-right: 10px; overflow-y: scroll; } #id_friends, #id_signature {text-align: center;} #id_wishlist, #id_signature {overflow-y: auto;} /* Headers */ #column_3 .panel::after { display: none; color: #000; font: 30px/0px 'Pacifico', cursive; letter-spacing: .01em; text-shadow: -1px 0 var(--yellw-color), 1px 0 var(--yellw-color), 0 1px var(--yellw-color), 0 -1px var(--yellw-color), 0 1px 5px var(--azure-color); position: fixed; top: 629px; left: 186px; transform: scaleY(1.15); pointer-events: none; } #column_3 .panel:hover::after, #column_3 #id_about::after {display: block;} @-moz-document url-prefix() { .panel::after { paint-order: stroke fill; text-shadow: 0 1px 10px var(--azure-color); -webkit-text-stroke: 3px var(--yellw-color); } } #id_about::after {content: 'About Me';} #id_comments::after {content: 'Comments';} #id_wishlist::after {content: 'Wish List';} #id_interests::after {content: 'Interests';} #id_friends::after {content: 'Friends List';} #id_footprints::after {content: 'Recent Visitors';} #id_signature::after {content: 'Signature';} #column_3 .panel h2 { background: linear-gradient(135deg, rgba(255,255,255,.2) 40%, transparent 40%) var(--ornge-color); width: 60px; height: 30px; color: #FFFFFF; font: 0/30px 'Pacifico', sans-serif; text-transform: capitalize; text-align: center; position: fixed; top: 142px; border-radius: 5px; box-shadow: 0 0 0 2px var(--brown-color) inset, 1px 2px 8px var(--azure-color); transition: all .5s ease-in-out; } #column_3 .panel h2::before {font-size: 12px;} #column_1 h2, #column_2 h2 {display: none;} #column_3 .panel:hover h2 { background-color: var(--azure-color); color: var(--ornge-color); text-shadow: 0 0 2px #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF inset, 0 0 0 4px rgba(0,0,0,.1) inset, 1px 2px 10px var(--azure-color); } #id_about h2 {display: none;} #id_comments h2 {left: 191px;} #id_wishlist h2 {left: 261px;} #id_interests h2 {left: 331px;} #id_friends h2 {left: 401px;} #id_footprints h2 {left: 471px;} #id_signature h2 {left: 541px;} #id_comments h2::before {content: 'Notes';} #id_wishlist h2::before {content: 'Wishes';} #id_interests h2::before {content: 'Likes';} #id_friends h2::before {content: 'Friends';} #id_footprints h2::before {content: 'Guests';} #id_signature h2::before {content: 'Mark';} #column_3 h2::after { content: ''; display: none; width: 100%; height: 40px; position: absolute; top: 25px; left: 0; } #column_3 .panel:hover h2::after {display: block;} /* Default Panel */ #id_about {top: 0 !important;} #column_3 .panel:hover ~ #id_about {top: -100% !important;} #column_3 .panel:hover ~ #id_about::after {display: none !important;} /* Buttons */ #id_contact, #id_store {bottom: 258px;} #id_contact *, #id_store * {font-size: 0;} #id_contact {right: 71px;} #id_store {right: 35px;} #id_store h3 + div {display: none;} #id_contact ul:not(.buttons) li, #id_store, #id_contact ul:not(.buttons) a, #id_store a[href*='userstore'], #id_comments h2 + div, #id_comments h2 ~ p, #id_comments h2 + div a, #id_comments h2 ~ p a { background: url('https://images2.imgbox.com/1f/ba/Did5Vp7s_o.png'); width: 36px; height: 36px; } #id_contact ul:not(.buttons) li, #id_store, #id_comments h2 + div, #id_comments h2 ~ p {border-radius: 5px;} #id_contact ul:not(.buttons) li { float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } #id_contact ul:not(.buttons) li:nth-of-type(1), #id_contact ul:not(.buttons) li:nth-of-type(1) a {background-position: 0 0;} #id_contact ul:not(.buttons) li:nth-of-type(2), #id_contact ul:not(.buttons) li:nth-of-type(2) a {background-position: -36px 0;} #id_contact ul:not(.buttons) li:nth-of-type(3), #id_contact ul:not(.buttons) li:nth-of-type(3) a {background-position: -72px 0;} #id_store, #id_store a[href*='userstore'] {background-position: -108px 0;} #id_comments h2 + div, #id_comments h2 + div a {background-position: -180px 0;} #id_comments h2 ~ p, #id_comments h2 ~ p a {background-position: -144px 0;} #id_contact ul:not(.buttons) li a, #id_store a[href*='userstore'], #id_comments h2 + div a, #id_comments h2 ~ p a { display: block; background-position-y: -36px !important; opacity: 0; transition: opacity .5s ease-in-out; } #id_contact ul:not(.buttons) a:hover, #id_store a[href*='userstore']:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {opacity: 1;} #id_contact ul:not(.buttons) a, #id_store a[href*='userstore'] { position: absolute; top: 0; left: 0; } #id_comments h2 + div, #id_comments h2 ~ p { display: block; font-size: 0; position: fixed; left: 643px; overflow: hidden; } #id_comments h2 + div {top: 300px;} #id_comments h2 ~ p {top: 348px;} /* Details */ #id_details { width: 120px; height: 150px; top: 530px; right: 35px; } #id_details .forum_userstatus {display: none;} /* Comments */ #id_comments #alert_container {padding: 0;} #id_comments #alerts_banner {display: none;} #id_comments .date {font: 85% monospace;} #id_comments .deletecomment {margin: 0 0 0 10px;} #id_comments dd {margin-bottom: 15px;} #id_comments dd:last-of-type {margin: 0;} #id_comments dt { line-height: normal; margin: 0 0 3px 0; padding: 0; border-bottom: 1px dotted rgba(255,255,255,.3); } #id_comments .dropBox { background: var(--brown-color) content-box; width: 48px; height: 48px; margin: 3px 7px 0px 0px; border: 1px dotted rgba(255,255,255,.3); overflow: hidden; transition: background .5s ease-in-out; } #id_comments dd:hover .dropBox {background: #FFFFFF;} #id_comments .dropBox img { width: 120px; height: 150px; margin: -26px 0 0 -46px; } /* Wish and Equipped List */ #id_wishlist, #id_equipment { display: grid; grid-auto-rows: max-content; gap: 10px 0; justify-items: center; } #id_equipment {grid-template-columns: repeat(4, 1fr);} #id_wishlist { grid-template-columns: repeat(7, 1fr); padding-right: 5px; } #id_wishlist .item, #id_equipment .item { background: var(--green-color); background-clip: padding-box; width: 30px; height: 30px; padding: 5px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; outline: 1px dotted rgba(255,255,255,.5); outline-offset: -4px; transition: all .5s ease-in-out; } .premium_sparkle {display: none;} #id_wishlist .item:hover, #id_equipment .item:hover { background: #FFFFFF; border-color: var(--azure-color); outline-color: var(--azure-color); } #id_wishlist .item img[src*='thumbnails'], #id_equipment .item img[src*='thumbnails'] {transition: transform .5s ease-in-out;} #id_wishlist .item:hover img[src*='thumbnails'], #id_equipment .item:hover img[src*='thumbnails'] {transform: rotate(360deg);} /* Equipped List */ #id_equipment { width: 215px; height: 146px; bottom: 120px; right: 290px; opacity: .5; transition: all .5s ease-in-out; } #id_equipment:hover { width: 225px; right: 285px; overflow-y: auto; opacity: 1; } /* Friends */ #id_friends h2 ~ div {display: none;} #id_friends h2 ~ p {display: none;} #id_friends .style1 p {margin-bottom: 15px;} #id_friends .style1 li { background: linear-gradient(135deg, rgba(0,0,0,.1) 30%, transparent 30%) var(--green-color); width: 74px; height: 84px; margin: 0 10px 10px 0; padding: 10px; position: relative; border: 2px solid var(--yellw-color); border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; box-sizing: border-box; transition: all .5s ease-in-out; } #id_friends .style1 li:nth-of-type(5n) {margin-right: 0;} #id_friends .style1 li:hover { background: #FFFFFF; outline-color: var(--brown-color); } #id_friends .style1 a { display: block; width: 100%; height: 100%; line-height: 2em; position: absolute; top: 0; left: 0; } /* Interests */ #id_interests h3 {margin-bottom: 2px;} #id_interests h3::after {content: ':';} #id_interests h3:nth-of-type(n+2) {margin-top: 10px;} #id_interests .interest_tags li:nth-last-of-type(n+2)::after {content: ',';} /* Media */ .media_panel { background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat var(--ornge-color); width: 27px; height: 28px !important; top: 709px; right: 252px; border-radius: 2px; transform: rotate(-3deg); transition: filter .5s ease-in-out; } .media_panel:hover {filter: brightness(200%) saturate(65%);} .media_panel iframe { position: absolute; bottom: 0; left: 0; opacity: .01; }