My Current Layout!

Posted by kass ! >.<

posted 1759602508
updated 1759602683

i've attached all the code to my entire layout!! i tried uploading this to the layouts section so that it would have been neater, but it wouldn't let me! i take no credit for the actual codes used and give full credit to those that originally made the code! i believe there is credit for each section, if not, apologies! i just copy pasted code from the layouts page and edited some of it to fit my page better! i found that the autoplay song wasn't working when i put it with the other code?? but splitting it up into the about me section makes it work just fine ^_^

Screenshot-2025-10-04-192116

ABOUT ME

</iframe>

HEROES

<style>

/* replace with cd image that has transparent background. must be 150px by 150px. */

:root {

--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');

}

.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;

}

</style>

<style>

/* the image displayed ! place an url inside the parentheses. */

:root {

--image: url(https://i.ibb.co/TMvfg2fK/IMG-0319.jpg);

}

/* wall of code itself ! */

#dokia a:hover{background:transparent!important;}#dokia *{text-shadow:none;}#dokia #keyboard p{margin:0px!important;}#front:after,#front:before{width:7px;background:#2b2442;top:-3px;outline:black solid 2px;content:"";display:block}#front,#topscreen{width:calc(100% - 10px)}#keyboard,.openphone{z-index:999;position:absolute}#keyboard,.openopen:not(:target){visibility:hidden}#keyboard,#topscreen{background:linear-gradient(30deg,var(--dokiasteel) 40%,var(--dokiablue) 200%);outline:2px solid var(--dokiablue);transform:perspective(300px) rotateX(10deg) scale(.95);box-shadow:2px 3px 5px 3px #000}#front .labelidk:before,.screenframe:before{height:20px;background:url(data:image/png;base64,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) center/contain no-repeat}:root{--dokiablue:#040011;--dokiasteel:#323238}#dokia{z-index:999999;box-sizing:border-box;width:100px;height:340px;position:fixed;bottom:20px;right:40px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:red;gap:10px;border-radius:30px}#dokia *{box-sizing:content-box}#front{height:165px;margin-bottom:2px;background:#fff;border-radius:5px 5px 30px 30px;box-shadow:2px 3px 5px 3px #000,0 40px 20px -2px var(--dokiablue) inset,0 -2px 5px 2px var(--dokiablue) inset;outline:2px solid var(--dokiablue);border:3px solid #fff;position:relative;transform:perspective(300px) rotateX(10deg) scale(.95);transform-origin:top center;visibility:visible}#front:before{height:20px;position:absolute;left:-3px;border:2px solid #fff;border-bottom:1px solid #fff;border-radius:5px 0 0 2px;box-shadow:0 12px 6px -4px #fff inset,2px 3px 0 0 #fff}#front:after{height:20px;position:absolute;right:-3px;border:2px solid #fff;border-bottom:1px solid #fff;border-radius:0 5px 2px 0;box-shadow:0 12px 6px -4px #fff inset,-2px 3px 0 0 #fff}#front .labelidk{height:82%;width:82%;margin:auto;border-radius:0 0 30px 30px;border:1px solid #fff;border-top:5px solid var(--dokiablue);box-shadow:0 10px 5px -5px rgba(255,255,255,.522) inset;background:var(--dokiablue);position:relative;top:-6px;z-index:2}#front .labelidk:after,#front .labelidk:before,#topscreen:before{position:absolute;left:0;right:0}#front .labelidk:before{content:"";display:block;top:0;bottom:50px;margin:auto;width:44px}#front .labelidk:after,.screenframe:before{width:45px;display:block;content:"";margin:auto}#front .labelidk:after{top:0;bottom:20px;height:4px;background:#cb0c2d;border-radius:5px;border:1px inset #a9a9a9;box-shadow:-1px 1px 2px var(--dokiablue) inset}#topscreen{height:150px;border-radius:30px 30px 5px 5px;border-top:2px solid gray;border-right:1px solid gray;border-bottom:2px solid #1f1f23;border-left:1px solid #1f1f23;position:relative;transform-origin:top center;z-index:99999}#topscreen:before{content:"_";top:10px;margin:auto;color:transparent;text-shadow:0 -3px 0 #000;font-family:arial;white-space:nowrap;font-size:10px;text-align:left;text-indent:13px;line-height:0;background:#fff;border-radius:5px;display:block;width:20px;height:3px;border:2px solid gray;box-shadow:0 3px 2px #d3d3d3 inset;outline:white solid 1px}.openopen:target{visibility:visible}:has(:target:is(#topscreen)) #front{visibility:hidden}:has(:target:is(#topscreen)) #keyboard{visibility:visible}#antenna{width:13px;height:48px;background:var(--dokiasteel);position:absolute!important;bottom:172px;right:12px;border-radius:5px 5px 0;box-shadow:2px 3px 5px 3px #000,0 -10px 10px -10px #fff inset,0 10px 10px -6px #fff inset,0 20px 20px 0 var(--dokiablue) inset;outline:2px solid var(--dokiablue);border:2px solid var(--dokiasteel);transform:perspective(150px) rotateX(40deg);z-index:-1}.openphone{display:block;height:103%;background:0 0;width:106%;top:-6px;right:-3px;margin:0;padding:0;text-decoration:none;border-radius:0 0 30px 30px}#keyboard{height:165px;margin-bottom:4px;width:calc(100% - 8px);border-radius:5px 5px 30px 30px;border:2px solid #1f1f23;transform-origin:top center}.screenframe{width:88%;height:80%;background:var(--dokiablue);margin:30px auto;border-radius:20px 20px 15px 15px;box-shadow:3px 0 15px -5px #4e4e5a inset;border-inline:1px inset var(--dokiasteel)}.screenframe:before{padding-top:10px;text-align:center}.screenframe p{background:#000;box-shadow:2px -2px 10px rgba(255,255,255,.8) inset;width:63px;height:68px;border:1px outset gray;margin:auto!important;padding:2px;border-radius:5px}.screenframe img{width:100%!important;height:100%!important;object-fit:cover;border-radius:2px;position:relative}.screenframe img::before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;height:100%;width:100%;background:url(https://images2.imgbox.com/90/69/pI2sVOjT_o.png) center center/contain no-repeat #fff}.screenframe:after{display:block;position:relative;content:"";width:92%;margin:auto;height:10px;background:var(--dokiasteel);bottom:-5px;border-radius:8px 8px 0 0;border-bottom:solid var(--dokiablue) 8px;outline:black solid 1px}.divisorsor:after,.divisorsor:before{content:"";width:10px;height:20px;background:#2b2442;top:-3px;border-bottom:1px solid #000;position:absolute;outline:black solid 1px;display:block}.divisorsor{width:100%;height:5px;border-bottom:solid var(--dokiablue) 12px}.divisorsor:before{left:-3px;border:1px solid #000;border-radius:5px 0 0 2px;box-shadow:0 12px 6px -4px #fff inset,1px 6px 0 0 var(--dokiablue)}.divisorsor:after{right:-3px;border:1px solid #000;border-radius:0 5px 2px 0;box-shadow:0 12px 6px -4px #fff inset,-1px 6px 0 0 var(--dokiablue)}#dokia .screenframe img{content:var(--image)}.sillyring{height:32px;width:44px;background:linear-gradient(40deg,#fff 0,#282828 40%,#fff 60%,#fff 100%);outline:black solid 1px;border:1px solid #fff;border-radius:20px;margin:33px auto;padding:6px;position:absolute;inset:0}.sillyring div{width:95%;height:calc(95% - 8px);border-top:1px solid #fff;background:linear-gradient(30deg,var(--dokiablue) 50%,#fff 120%);border-radius:14px;padding-top:10px}.sillyring div span{display:block;width:calc(60% - 10px);height:50%;margin:auto;background:silver;border-radius:4px;outline:gray solid 3px;box-shadow:-1px 1px 1px 1px #000 inset,0 0 0 3.5px #fff}.decoratione{width:105%;max-width:105%!important;height:30px;background:0 0;position:absolute;margin-top:9px;left:-2px;border-top:1px solid var(--dokiablue);border-bottom:2px solid var(--dokiablue);text-align:center;white-space:nowrap;word-spacing:35px;font-size:26px!important;font-weight:700;color:#599399}.decoratione p:last-child:first-letter{color:#1d6145}.decoratione p{text-shadow:none!important;position:relative;margin:0!important;line-height:30px;font-family:arial;font-size:26px!important}.decoratione p:last-child{line-height:30px;color:#893728}.decoratione p:last-child:after{content:".";font-size:15px;position:absolute;right:10px;bottom:2px}.decoratione p:last-child:before{content:"O";font-size:7px;position:absolute;right:6px;bottom:7px}.rowrowro{width:90%;margin:auto auto 3px;height:11px;background:#fff;display:flex;padding:1px;padding-inline:2px;border-radius:5px 5px 10px 10px;outline:black solid 1px}.rowrowro#thefirsty{margin-top:70px;padding-top:2px}.rowrowro p{width:20px;background:var(--dokiasteel);display:inline-block;flex:1;margin:0!important;text-align:center;color:#fff;font-family:Calibri;font-size:8px!important;line-height:6px;box-shadow:0 1px 2px #000 inset}.rowrowro:nth-child(4) p:first-child:after{content:" o_o";color:#fff;font-size:5px;letter-spacing:-1px;margin-left:3px}.rowrowro:nth-child(4) p:nth-child(2):after{content:" abc";color:#fff;font-size:5px;margin-left:3px}.rowrowro:nth-child(4) p:last-child:before{content:"def ";color:#fff;font-size:5px;margin-right:3px}.rowrowro:nth-child(5) p:first-child:after{content:" ghi";color:#fff;font-size:5px;margin-left:3px}.rowrowro:nth-child(5) p:nth-child(2):after{content:" jkl";color:#fff;font-size:5px;margin-left:3px}.rowrowro:nth-child(5) p:last-child:before{content:"mno ";color:#fff;font-size:5px;margin-right:3px}.rowrowro:nth-child(6) p:first-child:after{content:"pqrs";color:#fff;font-size:5px}.rowrowro:nth-child(6) p:nth-child(2):after{content:" tuv";color:#fff;font-size:5px;margin-left:3px}.rowrowro:nth-child(6) p:last-child:before{content:"wxyz ";color:#fff;font-size:5px;margin-right:2px}.rowrowro:nth-child(7) p:first-child:after{content:" +";color:#fff;font-size:5px;margin-left:1px}.rowrowro:nth-child(7) p:nth-child(2):after{display:inline-block;content:"⏘";color:#fff;font-size:5px;margin-left:3px;transform:translateY(1px)}.rowrowro:nth-child(7) p:last-child:before{content:"⌂ ";color:#fff;font-size:4px;margin-right:3px}.rowrowro p:nth-child(2){border-radius:0;border:1px solid var(--dokiablue);border-block:2px solid var(--dokiablue)}.rowrowro p:first-child{border-radius:5px 0 0 10px;border:2px solid var(--dokiablue);border-right:0px solid var(--dokiablue)}.rowrowro p:last-child{border-radius:0 5px 10px 0;border:2px solid var(--dokiablue);border-left:0 solid var(--dokiablue)}#keyboard:after{content:"ˊˋ";display:block;color:var(--dokiasteel);text-align:left;width:100%;margin-top:-27px;font-family:Arial;font-size:35px!important;transform:scale(-1) translateX(6px);letter-spacing:55px;text-shadow:0 0 1px var(--dokiablue),0 0 1px var(--dokiablue),0 0 1px var(--dokiablue),0 0 1px var(--dokiablue),0 0 1px var(--dokiablue),0 0 1px var(--dokiablue),0 0 1px var(--dokiablue)}</style><div id="dokia"><div class="openopen" id="topscreen"><a class="openphone" href="#front"></a><div class="screenframe"><p><img src=""/></p></div></div><div id="keyboard"><div class="divisorsor"></div><a class="openphone" href="#front"></a><div class="decoratione"><p>◜ ◝</p><p>◟ ◞</p></div><div class="rowrowro" id="thefirsty"><p>1</p><p>2</p><p>3</p></div><div class="rowrowro"><p>4</p><p>5</p><p>6</p></div><div class="rowrowro"><p>7</p><p>8</p><p>9</p></div><div class="rowrowro"><p>*</p><p>0</p><p>#</p></div><div class="sillyring"><div><span></span></div></div></div><div class="openopen" id="front"><a class="openphone" href="#topscreen"></a><div class="labelidk"></div></div><div id="antenna"></div></div>

<style>

customization

:root {

--background-color: #1a1a1a;

--background-image: url();

--banner-image: url(https://i.pinimg.com/1200x/cc/43/e5/cc43e549b85222ffaf53ab606c537fb4.jpg);

--accent: #292929;

}

code itself

.container,

nav {

width: 100%;

}

.top .right *,

footer a {

color: #00f !important;

}

.center button,

.center label,

.mood b a,

.top .right a:first-child,

.url-info,

nav .links a,

nav .links a:not([title="Notifications"]):hover:after {

font-size: 0px;

}

.table-section,

.url-info {

margin-bottom: 0 !important;

}

.mood b,

.report a,

.section h4,

nav .links a {

text-transform: uppercase;

}

.blog-preview h4,

.f-col,

.friends-grid .person p,

.mood p:last-child {

overflow: hidden;

text-overflow: ellipsis;

}

.f-col a,

.section h4,

footer a {

text-decoration: underline;

}

::-webkit-scrollbar {

width: 16px;

}

::-webkit-scrollbar:horizontal {

height: 17px;

}

::-webkit-scrollbar-corner {

background: #dfdfdf;

}

::-webkit-scrollbar-track {

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");

}

::-webkit-scrollbar-thumb {

background-color: #dfdfdf;

box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;

}

::-webkit-scrollbar-button:horizontal:end:increment,

::-webkit-scrollbar-button:horizontal:start:decrement,

::-webkit-scrollbar-button:vertical:end:increment,

::-webkit-scrollbar-button:vertical:start:decrement {

display: block;

}

::-webkit-scrollbar-button:vertical:start {

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");

height: 17px;

}

::-webkit-scrollbar-button:vertical:end {

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");

height: 17px;

}

::-webkit-scrollbar-button:horizontal:start {

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");

width: 16px;

}

::-webkit-scrollbar-button:horizontal:end {

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");

width: 16px;

}

body::-webkit-scrollbar-corner {

margin-top: 60px;

}

body {

font-family: "MS PGothic";

background: var(--background-color) var(--background-image);

background-attachment: fixed;

}

main {

background: 0 0;

}

nav {

height: 100px;

position: fixed;

z-index: 999;

}

.col a,

.online {

color: color-mix(in srgb, var(--accent) 50%, #000);

filter: saturate(3);

}

.count,

.friends-grid .person p {

color: color-mix(in srgb, var(--accent) 50%, #000) !important;

filter: saturate(3);

}

.edit-link,

.online img,

.profile-info,

.supporter .icon,

footer p:nth-child(2) {

display: none;

}

.col,

.table-section + .table-section tbody,

.top .left:before,

.url-info::after {

display: block;

}

.top {

height: 50px;

background: #fff !important;

color: #000 !important;

}

.center label::after {

content: "ユーザーを検索する:";

font-size: 12px;

}

.center button::after {

content: "サーチ";

font-size: 12px;

}

.top .right * {

font-size: 12px;

font-family: "MS Pgothic";

text-decoration: underline !important;

}

.contact .heading,

.profile h1 {

color: #fff !important;

text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000),

-1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);

}

.top .right a:first-child::after {

content: "ヘルプ";

font-size: 12px;

}

.top .left {

position: relative;

height: fit-content;

margin-top: -10px !important;

}

.top .left:before {

content: "";

position: absolute;

background: var(--accent);

width: 110%;

height: 130%;

top: -10px;

mix-blend-mode: lighten;

z-index: 9999;

opacity: 0.9;

pointer-events: none;

}

.logo-fallback {

filter: drop-shadow(1px 1px 0px black) drop-shadow(1px 0px 0px black) drop-shadow(0px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black);

}

.links {

text-align: center;

}

.col {

width: 100% !important;

background: #fff;

border-left: 1px solid #000;

}

.row {

top: 65px;

width: 75%;

position: absolute;

right: 0;

}

.general-about,

.mood,

.profile h1 {

position: fixed;

left: 1%;

}

.profile h1 {

top: 90px;

background: #fff;

width: 23%;

padding-inline: 10px;

padding-bottom: 3px;

border-radius: 10px 10px 0 0;

background: var(--accent);

box-shadow: 0 -8px 3px 3px rgba(255, 255, 255, 0.5) inset;

border: 1px solid #000;

border-bottom: 0;

}

.general-about,

footer {

width: 23%;

border: 1px solid #000;

background: #fff;

}

.general-about {

top: 115px;

padding: 5px 5px 40px;

height: 250px;

}

.blog-preview h4,

.blog-preview p,

.inner > p,

.mood {

padding-inline: 5px;

}

.mood {

top: 310px;

width: 21% !important;

left: 2vw;

border-top: 1px dashed var(--accent);

padding-top: 5px;

}

.contact,

footer {

position: fixed;

left: 1%;

}

.mood p:last-child {

white-space: nowrap;

}

.contact {

width: 23% !important;

top: 365px;

border: 0 !important;

}

#comments,

.blog-preview,

.url-info {

position: relative;

}

footer {

top: 520px;

padding: 2px 0;

}

.profile-pic .pfp-fallback {

border: 1px solid gray;

width: 100% !important;

height: 100% !important;

object-fit: cover;

}

.profile-pic {

width: 11vw;

height: 11vw !important;

}

.details {

text-align: right;

margin-right: 10px;

}

.mood b {

font-weight: 400;

}

footer .links,

footer p {

margin: 0;

}

footer p:first-child {

width: 100px;

display: inline-block;

vertical-align: top;

}

footer p:first-child::after {

content: "Disclaimer: This is a fan-based project and is not affiliated with MySpace® in any way. 'インターウェブ' layout by .../coedcaine";

display: block;

}

/* AD Replacement - below profile/footer/credits */

footer::before {

content: "";

display: inline-block;

width: 175px;

height: 100px;

background: url("") 0 0 / contain;

margin-right: 10px;

cursor: pointer;

}

.blog-preview h4,

nav .links a {

padding-top: 3px;

background: var(--accent);

white-space: nowrap;

}

.contact .heading {

background: #fff;

border-radius: 8px 8px 0 0;

background: var(--accent) !important;

box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset;

border: 1px solid #000;

border-bottom: 0;

}

.contact .inner {

background: #fff;

border: 1px solid #000;

height: 120px;

}

.url-info::before {

content: "ᴋᴀꜱꜱᴀɴᴅʀᴀ！";

font-size: 35px;

color: #fff;

text-shadow: var(--accent) 3px 0 0, var(--accent) 2.83487px 0.981584px 0, var(--accent) 2.35766px 1.85511px 0, var(--accent) 1.62091px 2.52441px 0, var(--accent) 0.705713px 2.91581px 0, var(--accent) -0.287171px 2.98622px 0,

var(--accent) -1.24844px 2.72789px 0, var(--accent) -2.07227px 2.16926px 0, var(--accent) -2.66798px 1.37182px 0, var(--accent) -2.96998px 0.42336px 0, var(--accent) -2.94502px -0.571704px 0,

var(--accent) -2.59586px -1.50383px 0, var(--accent) -1.96093px -2.27041px 0, var(--accent) -1.11013px -2.78704px 0, var(--accent) -0.137119px -2.99686px 0, var(--accent) 0.850987px -2.87677px 0,

var(--accent) 1.74541px -2.43999px 0, var(--accent) 2.44769px -1.73459px 0, var(--accent) 2.88051px -0.838247px 0;

}

.url-info {

background: #fff var(--banner-image);

background-size: cover;

background-position: center;

height: 200px;

grid-column: span 3;

image-rendering: pixelated;

border: 1px solid #000 !important;

width: calc(100% - 210px) !important;

}

#comments,

.blurbs,

.table-section:not(.table-section + .table-section) {

grid-column: span 2;

}

/* AD replacement - After banner */

.url-info::after {

content: "";

width: 200px;

height: 197px;

background: url("") center/cover no-repeat;

position: absolute;

left: calc(100% + 10px);

top: 0;

border: 1px solid #000;

cursor: pointer;

}

.table-section + .table-section tr {

margin-bottom: 5px;

}

.table-section + .table-section td:first-child p {

pointer-events: none;

text-align: left;

}

.table-section + .table-section td:first-child a {

color: color-mix(in srgb, var(--accent) 80%, #000) !important;

filter: saturate(1) !important;

}

.table-section + .table-section td:last-child p {

white-space: nowrap;

max-width: 125px;

overflow: hidden;

text-overflow: ellipsis;

}

.table-section + .table-section td {

height: 20px !important;

}

.table-section a img {

border: 1px solid gray;

border-radius: 4px;

filter: saturate(5);

}

.table-section {

width: 100% !important;

display: inline-block;

background: #fff;

border: 0 !important;

max-height: 320px;

}

.table-section .heading {

background: #fff;

border-radius: 10px 10px 0 0;

background: var(--accent) !important;

box-shadow: 0 -3px 3px 3px rgba(255, 255, 255, 0.5) inset;

border: 1px solid #000;

border-bottom: 0;

color: #fff !important;

-1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);

}

.blog-preview h4,

.blurbs .heading,

.friends .heading,

nav .links a {

box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset;

color: #fff !important;

-1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);

}

.table-section .inner {

border: 1px solid #000;

height: calc(100% - 20px);

overflow-y: auto;

text-align: right;

}

.table-section td:first-child {

background: linear-gradient(color-mix(in srgb, var(--accent) 40%, #fff 50%), #fff 100%);

height: 20px;

}

.table-section td:first-child p {

color: color-mix(in srgb, var(--accent) 80%, #000);

text-decoration: underline;

font-weight: 400;

font-size: 11px;

letter-spacing: 1px;

text-transform: uppercase;

text-align: left;

}

.table-section td:last-child {

height: calc(100% - 20px);

background: #fff;

}

.table-section tbody {

display: grid;

width: 100%;

grid-template-columns: 1fr 1fr;

gap: 5px;

}

.table-section tr {

display: block;

width: 100%;

border: 1px solid color-mix(in srgb, var(--accent) 50%, #000);

}

.table-section td {

display: block;

width: 100% !important;

}

.col.left {

display: grid;

grid-template-columns: repeat(2, 1fr) 15%;

grid-column-gap: 10px;

padding-bottom: 0;

}

.col.right {

display: grid;

padding-top: 10px;

grid-template-columns: 240px calc(100% - 240px);

grid-column-gap: 5px;

}

#comments::after,

.blog-preview::after {

content: "";

display: block;

position: absolute;

cursor: pointer;

}

.blog-preview h4 {

border-radius: 10px 10px 0 0;

border: 1px solid #000;

position: absolute;

width: calc(100% + 2px);

left: -1px;

top: -1px;

margin: 0 !important;

}

.blog-preview {

order: 1;

width: 236px;

background: #fff;

height: calc(100% - 70px);

border: 1px solid #000;

padding-top: 20px;

border-radius: 20px 20px 0 0;

}

/* AD Replacement - below blog */

.blog-preview::after {

background: url("") center/cover no-repeat;

border: 1px solid #000;

width: 234px;

height: 60px;

bottom: -74px;

}

.friends:not(#comments) {

order: 2;

height: 290px;

}

#comments,

.blurbs {

order: 3;

}

#comments {

order: 4;

width: calc(100% - 147px);

height: 530px;

}

.friends:not(#comments) .inner {

height: calc(100% - 20px);

padding: 0;

overflow-y: auto;

}

.friends-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

margin-top: -2px;

}

.friends-grid .person {

margin: auto auto 5px;

padding: 0 !important;

}

.friends-grid .person p {

margin: 2px 0;

width: 100%;

height: 14px;

white-space: nowrap;

}

.friends-grid .person .pfp-fallback {

border: 1px solid gray;

height: 100px !important;

width: 100px !important;

object-fit: cover;

}

.inner > p {

position: sticky;

top: 0;

background: #fff;

width: 100%;

z-index: 1;

border-bottom: 1px solid gray;

font-size: 12px;

}

.inner > p b {

font-weight: 400 !important;

}

.blurbs .heading,

.friends .heading {

border-radius: 10px 10px 0 0;

background: var(--accent) !important;

border: 1px solid #000;

margin: 0 !important;

font-weight: 400;

}

.blurbs .inner,

.friends .inner {

border: 1px solid #000;

border-top: 0;

}

.section h4 {

color: color-mix(in srgb, var(--accent) 80%, #000) !important;

font-weight: 400;

font-size: 11px;

letter-spacing: 1px;

text-align: left;

}

.section:first-child {

border-bottom: 1px dashed var(--accent);

}

.blurbs {

margin-block: 10px !important;

}

#comments .inner {

height: calc(100% - 22px);

padding: 0;

overflow-y: auto;

}

/* AD Replacement - Next to comments */

#comments::after {

top: -8px;

right: -147px;

width: 145px;

height: 398px;

margin-top: 10px;

border: 1px solid #000;

background: url("") 0 0 / cover;

}

.comments-table {

border-collapse: collapse;

width: calc(100% - 20px) !important;

margin: 10px;

}

.comments-table tr {

border: 1px solid var(--accent);

}

.comments-table td:first-child {

width: 10%;

}

.comments-table td {

background: linear-gradient(color-mix(in srgb, var(--accent) 50%, #fff) 0, #fff 10%) !important;

}

.comments-table .pfp-fallback {

border: 1px solid gray;

}

.comments-table b,

.comments-table small {

font-weight: 400 !important;

font-size: 10px;

color: color-mix(in srgb, var(--accent) 80%, #000);

letter-spacing: 1px;

}

.contact a,

.table-section td:first-child {

white-space: nowrap;

}

[title="Notifications"] {

font-size: 12px !important;

display: inline-block !important;

margin-bottom: -1px;

margin-right: 10px;

transform: translateY(0) !important;

}

[title="Notifications"]:after {

content: "|";

display: inline-block;

text-shadow: none;

color: #000;

transform: translate(35px, 2px);

line-height: 10px;

}

nav .links {

padding-inline: 0px !important;

padding-bottom: 0 !important;

padding-top: 5px !important;

border-bottom: 2px solid #000;

background: #fff;

margin-top: -8px;

}

nav .links a {

width: 75px;

border-radius: 10px 10px 0 0;

border: 1px solid #000;

transform: translateY(1px);

margin-top: 2px;

display: inline-block;

font-family: SimSun;

font-weight: 400 !important;

text-decoration: none !important;

}

/* START OF JAPANESE TRANSLATION , IF YOU WANT ENGLISH !!DELETE EVERYTHING!! BELOW THIS LINE UNTIL THE "END OF JAPANESE TRANSLATION" LINE */

.blog-preview h4,

.f-col a,

.heading h4,

footer .links a {

font-size: 0px;

text-transform: uppercase;

font-weight: 400;

}

nav .links a:after,

nav .links a:hover {

font-size: 14px;

}

nav .links li:first-child a:not([title="Notifications"]):after {

content: "家";

}

nav .links li:nth-child(2) a:after {

content: "ブラウズ";

}

nav .links li:nth-child(3) a:after {

content: "サーチ";

}

nav .links li:nth-child(4) a:after {

content: "メッセージ";

}

nav .links li:nth-child(5) a:after {

content: "ブログ";

}

nav .links li:nth-child(6) a:after {

content: "速報";

}

nav .links li:nth-child(7) a:after {

content: "フォーラム";

}

nav .links li:nth-child(8) a:after {

content: "グループ";

}

nav .links li:nth-child(9) a:after {

content: "レイアウト";

}

nav .links li:nth-child(10) a:after {

content: "お気に入り";

}

nav .links li:nth-child(11) a:after {

content: "招く";

}

nav .links li:nth-child(12) a:after {

content: "ショップ";

}

nav .links li:nth-child(13) a:after {

content: "について";

}

nav .links li:nth-child(14) a:after {

content: "アート";

}

:is(.heading h4, .blog-preview h4):hover {

font-size: 14px;

}

:is(.heading h4, .blog-preview h4):hover:after {

font-size: 0px !important;

}

.contact .heading h4:after {

font-size: 14px;

content: "コンタクト";

}

.table-section:not(.table-section + .table-section) .heading h4:after {

font-size: 14px;

content: "好き";

}

.table-section + .table-section .heading h4:after {

font-size: 14px;

content: "リンクス";

}

.blog-preview h4:after {

font-size: 14px;

content: "ブログ投稿";

}

.blurbs .heading h4:after {

font-size: 14px;

content: "について";

}

.friends:not(#comments) .heading h4:after {

font-size: 14px;

content: "友達";

}

#comments .heading h4:after {

font-size: 14px;

content: "コメント";

}

.f-col a:hover,

.mood b a:hover,

footer .links a:hover {

font-size: 11px;

}

.f-col a:hover:after,

.mood b a:hover:after,

footer .links a:hover:after {

font-size: 0px !important;

}

.f-row:first-child .f-col:first-child a:after {

font-size: 14px;

content: "友人を追加する";

}

.f-row:first-child .f-col:last-child a:after {

font-size: 14px;

content: "お気に入りを追加";

}

.f-row:nth-child(2) .f-col:first-child a:after {

font-size: 14px;

content: "メッセージを送る";

}

.f-row:nth-child(2) .f-col:last-child a:after {

font-size: 14px;

content: "友人に転送";

}

.f-row:nth-child(3) .f-col:first-child a:after {

font-size: 12px;

content: "インスタント・メッセージ";

}

.f-row:nth-child(3) .f-col:last-child a:after {

font-size: 12px;

content: "ユーザーをブロックする";

}

.f-row:nth-child(4) .f-col:first-child a:after {

font-size: 12px;

content: "グループに追加する";

}

.f-row:nth-child(4) .f-col:last-child a:after {

font-size: 14px;

content: "レポートユーザー";

}

footer .links li:first-child a:after {

font-size: 9px;

content: "について";

}

footer .links li:nth-child(2) a:after {

font-size: 9px;

content: "ニュース";

}

footer .links li:nth-child(3) a:after {

font-size: 9px;

content: "ルール";

}

footer .links li:nth-child(4) a:after {

font-size: 9px;

content: "プレス";

}

footer .links li:nth-child(5) a:after {

font-size: 9px;

content: "ブランド";

}

footer .links li:nth-child(6) a:after {

font-size: 9px;

content: "クレジット";

}

footer .links li:nth-child(8) a:after {

font-size: 9px;

content: "条項";

}

footer .links li:nth-child(9) a:after {

font-size: 9px;

content: "プライバシー";

}

footer .links li:nth-child(10) a:after {

font-size: 9px;

content: "刻印";

}

footer .links li:nth-child(11) a:after {

font-size: 9px;

content: "コンタクト";

}

footer .links li:nth-child(12) a:after {

font-size: 9px;

content: "宣伝する";

}

footer .links li:nth-child(13) a:after {

font-size: 9px;

content: "状態";

}

footer .links li:nth-child(14) a:after {

font-size: 9px;

content: "SpaceHey ショップ";

}

.mood b a:first-child:after {

font-size: 12px;

content: "ブログ";

}

.mood b a:nth-child(2):after {

font-size: 12px;

content: "速報";

}

.mood b a:last-child:after {

font-size: 12px;

content: "フォーラム";

}

/* END OF JAPANESE TRANSLATION , DO NOT DELETE BELOW */

.f-col a :first-child {

font-size: 13px;

margin-right: 5px;

}

.f-col a {

color: #00f;

}

footer .links {

height: 25px;

}

.more {

color: #fff !important;

text-transform: uppercase;

-1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000);

filter: saturate(1) !important;

}

@media only screen and (max-width: 800px) {

.col.left,

.col.right,

.row {

border: 0 !important;

}

.general-about .profile-pic {

width: 40% !important;

height: 100% !important;

}

.general-about .profile-pic img {

max-height: 100% !important;

max-width: 100% !important;

}

nav .links {

margin-top: 22px;

}

nav {

background: #fff;

}

.profile h1 {

margin-bottom: 0 !important;

}

.contact,

.general-about,

.mood,

span h1 {

display: block !important;

position: static !important;

width: 100% !important;

}

footer,

footer * {

width: 0;

height: 0;

opacity: 0 !important;

pointer-events: none;

}

.col.left {

display: block;

}

.row {

width: 100%;

}

footer::before {

display: none !important;

}

nav {

position: relative !important;

}

.profile {

margin-top: 80px !important;

}

</style>

<style>

/* Old School Computer by Cory Anotado - PacdudeGames.com */

html::after {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: rgba(18, 16, 16, 0.1);

opacity: 0;

z-index: 2;

pointer-events: none;

animation: flicker 0.15s infinite;

}

html::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

html {

animation: textShadow 1.6s infinite;

font-size:24px;

filter: grayscale(100%) sepia(1%) hue-rotate(75deg);

}

</style>

<style>

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/s2hxc0K8/pentagrama.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

.profile .friends .person img {-webkit-mask-image: url( https://i.postimg.cc/s2hxc0K8/pentagrama.png );-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

<style>

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;