body{ background: url(https://i.pinimg.com/564x/73/2c/09/732c09169383f6b9094d35a3f4de342a.jpg) no-repeat fixed; background-size: cover; text-transform: lowercase; } nav .top{ margin-top: 10px; background: url(https://i.pinimg.com/564x/5a/2e/43/5a2e436be6d6f7a9d42de62202e31d7f.jpg); background-size: cover; background-position-y: center; border: 1px solid white; border-radius: 5px; box-shadow: 0 0 8px white; } nav .top .left .logo { width: 165px; height: 42px; filter: drop-shadow(2px 4px 6px black); } button, input { overflow: visible; background: white; color: black; border: none; box-shadow: 0 0 5px white; border-radius: 5px; } nav .links { background-color: transparent; padding: 3.5px 16px; text-align: center; margin-top: 10px!important; margin-bottom: 10px!important; } nav .links a { text-decoration: none; color: white; text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000; font-size: max(0.98em, 12px); } nav .links .special a { color: white; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " | "; color: white; } main{ background: url(https://i.pinimg.com/564x/83/db/b6/83dbb678c05d144ad491517113ba8e8c.jpg); border: 1px solid white; box-shadow: 0 0 10px white; border-radius: 8px; color: white; text-shadow: 1px 1px black; } footer { text-align: center; font-size: 70%; margin: 10px 0 10px; padding: 10px 5px; background-color: transparent; color: white; } a { color: white; text-decoration: none; } a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active { color: #6da5ac; text-decoration: none; font-style: italic; } .comments-table td:first-child, .music-table td:first-child { background: #29282b; text-align: center; font-weight: bold; width: 38%; } .comments-table td, .music-table td { background: #403f43; vertical-align: top; } .profile .blurbs .heading, .profile .friends .heading { background: white; color: black; border-radius: 8px; padding: 2px 7px; box-shadow: 0 0 10px white, 0 0 5px white; } .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions { width: 100%; border: none; margin: 10px 0; } .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading { background: white; color: black; padding: 2px 7px; box-shadow: 0 0 5px white, 0 0 10px white; border-radius: 8px; } .icon, .award img { display: inline-block; height: 1.4em; width: 1.4em; aspect-ratio: 1/1; margin: 0 0.05em 0 0.1em; vertical-align: -0.3em; color: rgba(0,0,0,0); filter: brightness(10); } .details-table td:first-child { background: #29282b; border-radius: 8px; color: white; font-weight: bold; width: 33%; box-shadow: 0 0 10px #ffffff, inset 3px 5px #5d5b68, inset -7px -9px #151617; padding: 11px; } .details-table td { background: #403f43; vertical-align: top; border-radius: 8px; box-shadow: 0 0 10px #ffffff, inset 5px 6px #cecaea61, inset -5px -7px #2a2a2e; padding: 14px; } .profile-info{ background: url(https://i.pinimg.com/564x/59/49/85/59498522322ca36103b706ab9b904984.jpg); background-position: center; border: 1px solid white; border-radius: 8px; box-shadow: 0 0 10px white; } .profile .blurbs .section h4 { margin: 0; color: white; text-transform: uppercase; } .count { color: white; } .profile .friends .person p { color: inherit; font-weight: bold; width: 100%; overflow-wrap: break-word; word-break: break-word; font-size: 100%; text-align: center; } img.pfp-fallback { border: 1px solid white; box-shadow: 0 0 10px white; border-radius: 8px; } ::-webkit-scrollbar { width: 12px; background-color: #fff; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: black; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff; } .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) { max-width: 95px; max-height: 95px; display: block; margin: 0 auto; filter: grayscale(1); } .online { color: #0C8C00; font-weight: bold; font-size: 95%; filter: saturate(0) brightness(10); } body::before { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgb(15 18 82 / 48%) 50%, rgb(0 0 0 / 0%) 50%); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes float { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 8px); } 100% { transform: translate(0, -0px); } .profile-pic { position: relative; width: 183px; filter: drop-shadow(0 0 0.25rem gray); } .profile-pic:after { content: ""; background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6)); background-size: contain, cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .profile-pic:before { content: ""; background: var(--cd-image); position: absolute; top: 5px; left: -20px; width: 150px; height: 150px; background-repeat: no-repeat; z-index: -1; animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; transition: left ease 0.5s; } .profile-pic:hover:before { left: -75px; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .profile-pic .pfp-fallback { float: right; width: 163px; height: 160px; border: none; } .general-about .profile-pic img { max-width: inherit; }