nine inch nails: the downward spiral themed layout!!

since we havent been able to post layouts for over a year i figured id post this here! the code is probably a hot mess since i havent attempted to make a layout in foreverrr… some cool stuff this layout has is a little spinning trent in the top right corner, a loading screen, and the font is the one on the album cover!! 

also the autoplay is set to closer to god !!

<style>

.url-info{

    border: none !important;

    background: 

url('https://i.postimg.cc/LsJFw9dD/IMG-3186.gif');

    background-position: center;

    height: 150px;

    background-size:cover;

.url-info p{

    opacity: 0.0;

}

}

</style>

<div class="spin"></div>

<style>

div.spin {

background: url(https://i.postimg.cc/85jW7nFw/IMG-3179.gif) no-repeat;

background-size: 100%!important;

position: fixed;

right: 10px;

top: 10px;

height: 100px;

width: 200px;

z-index: 1;

</style>

<style>

@font-face {

font-family: “Reznot TDS”;

src: url('https://file.garden/aOwMaaibliiWL-1A/Reznot%20TDS.TTF');

</style>

<style>

body {

    background: url(https://i.postimg.cc/4d6zs88s/IMG-3158.jpg)  no-repeat fixed;

    background-size: cover;

    font-family: “Reznot TDS”;

    font-size: 20px;

    letter-spacing: 2px;

}

a {

    color: #F5E9BC;

    font-weight: bold;

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

}

p {

    margin: initial;

}

.award a {

    color: #9928d9;

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

}

.award img {

    height: 1.2em;

    width: 1.2em;

}

.count {

    color: #F5E9BC;

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

}

.profile .friends .person p {

    color: #F5E9BC;

}

.profile .blurbs .section h4 {

   color: #F5E9BC;

}

.profile .blurbs .heading h4, .profile .friends .heading h4 {

    filter: none;

}

.online { visibility: hidden; } .online img { content: url("https://i.ibb.co/Nj5F9gw/oh-shit-fuck-online.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; }

.logout-btn {

    font-family: “Reznot TDS”;

    letter-spacing: 2px;

}

.icon {

    height: initial;

    width: initial;

}

nav .top {

    background: url(https://i.postimg.cc/FRx1Rw0h/IMG-3157.jpg) no-repeat;

    background-size: cover;

    padding: 69px;

}

.icon.emoji {

   font-size: initial;

}

.logo {

content:url("");

}

main {

    background: #02010196;

    color: white;

    font-size: 95%;

    padding: 0px;

}

nav .links {

    background-image:linear-gradient(180deg, #F5E9BC, #DBBB6F);

    text-align: center;

}

nav .links a {

     text-shadow: 0 0 7px #000000;

}

nav .links a:hover {

    color: #F5E9BC;

    text-decoration: none;

}

a:hover {

    color: #F5E9BC;

    text-decoration: none;

}

.profile-info {

     background-image: url('https://i.postimg.cc/TPzHw4Tf/IMG-3172.jpg');

    background-size: cover;

    padding: 70px;

}

.profile-info .inner {

    display: none;

}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {

     background-image: url('https://i.postimg.cc/mrj1XSsx/Untitled1501-20251012155954.png');

}

.profile .contact, .profile, .profile .table-section, .setting-section, .home-actions {

    border: 5px outset #67626a;

    background: #151312b3;

}

.blurbs, .friends {

    border: 5px outset #67626a;

    background: #423d3aa3;

}

.details-table td {

    background: #423d3aa3;

    border: none

}

.comments-table td {

    background: transparent;

    border: none;

}

.details-table td:first-child, .comments-table td:first-child {

    background: #151312b3;

    color: #bab4a5;

}

.comment-replies {

     border: 5px outset #67626a;

}

table.comments-table {

     border: none;

}

footer {

     background-image: url('https://i.postimg.cc/B6M4391V/IMG-3153.jpg');

     color: white;

}

body::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%);

    z-index: 2;

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

    pointer-events: none;

}

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

:root {

--cd-image: url('https://i.postimg.cc/zGqtHhm8/IMG-3165.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;

}

.blog-preview:after {

    height: 110px;

    display: block;

    content: "";

    background-image: url('https://i.postimg.cc/3x25XSHP/IMG-3184.jpg');

    background-repeat: no-repeat;

}

.general-about {

   border-radius: 8px;

   background: url(https://i.postimg.cc/hv827cc0/IMG-3152.jpg);

   background-position: center;

   background-size: cover;

padding: 5px;

}

::-webkit-scrollbar { width: 16px; height: 10px; } 

::-webkit-scrollbar-thumb { background-color: #fff; background-image: url(https://i.ibb.co/NNj6dQg/retro-scrollbar-thumb.png); border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; } 

::-webkit-scrollbar-track { background-color: #fff; background-image: url(https://i.ibb.co/rpqDr6p/retro-scrollbar-track.png); background-size: 3px; } 

::-webkit-scrollbar-button:vertical:increment { background-image: url(https://i.ibb.co/4VS5nfB/retro-scrollbar-increment.png); width: 14px; height: 16px; border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; } 

::-webkit-scrollbar-button:vertical:decrement { background-image: url(https://i.ibb.co/xD64cwd/retro-scrollbar-decrement.png); border-top: 1px solid #bdbdbd; border-left: 1px solid #bdbdbd; border-right: 1px solid black; border-bottom: 1px solid black; width: 14px; height: 16px; } </style>

<style>

}

</style>

<!-- (c) Layout created by 𝐥𝐞𝐱𝐥𝐲 (𝟐𝟕𝟕𝟕𝟓𝟐𝟐𝟎) (https://layouts.spacehey.com/layout?id=24375) -->

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://i.postimg.cc/HsPq5rPt/IMG-3173.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/TmWShm6JPw0?si=0GmVk17PbsRjFCZS//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player " frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>