the fragile by nine inch nails themed layout!

i had a lot of fun making the downward spiral one (https://blog.spacehey.com/entry?id=1945398) so i decided to make one for my fav album of theirs! some cool stuff this one has is the disc pfp, the other disc is spinning in the corner, the gif url box, and the fragile font!

and the autoplay is set to the wretched

credit is appreciated but not needed!

<style>

.url-info{

    border: none !important;

    background: 

url('https://i.postimg.cc/fTSzTJNY/IMG-3238.gif');

    background-position: center;

    height: 150px;

    background-size:cover;

.url-info p{

    opacity: 0.0;

}

}

</style>

<div class="fragile2"></div>

<style>

div.fragile2 {

background: url(https://i.postimg.cc/vDFnLwqR/IMG-3253.gif) no-repeat;

background-size: 100%!important;

position: fixed;

right: 10px;

top: 10px;

height: 175px;

width: 175px;

z-index: 1;

</style>

<style>

@font-face {

font-family: “The Fragile”;

src: url('https://file.garden/aOwMaaibliiWL-1A/The%20Fragile.ttf');

</style>

<style>

body {

   background: url(https://i.postimg.cc/bvq5ZFK4/IMG-3230.jpg)  no-repeat fixed;

    background-size: cover;

    font-family: “The Fragile”;

    font-size: 10px;

    letter-spacing: 1px;

}

a {

    color: #FFFFFF;

    font-weight: bold;

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

}

p {

    margin: initial;

}

.award a {

    color: #530B0B;

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

}

.award img {

    height: 1.2em;

    width: 1.2em;

}

.count {

    color: #FFFFFF;

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

}

.profile .friends .person p {

    color: #FFFFFF;

}

.profile .blurbs .section h4 {

   color: #FFFFFF;

}

.logout-btn {

    font-family: “The Fragile”;

    letter-spacing: 2px;

}

.icon {

    height: initial;

    width: initial;

}

nav .top {

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

    background-size: cover;

    padding: 20px;

}

.icon.emoji {

   font-size: initial;

}

.logo {

content:url("");

}

main {

    background: #02010196;

    color: white;

    font-size: 95%;

    padding: 0px;

}

nav .links {

    background: transparent;

    text-align: center;

}

nav .links a {

     text-shadow: 0 0 7px #000000;

}

nav .links a:hover {

    color: #FFFFFF;

    text-decoration: none;

}

a:hover {

    color: #FFFFFF;

    text-decoration: none;

}

.profile-info {

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

    background-size: cover;

    padding: 70px;

}

.profile-info .inner {

    display: none;

}

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

     background: #000000;

     color: #FFFFFF

}

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

    border: 5px outset #000000;

    background: #000000;

}

.blurbs, .friends {

    border: 5px outset #000000;

    background-image: url(https://i.postimg.cc/zXzCsYYV/IMG-3230.jpg);

}

.details-table td {

    background: #98C0A6;

    border: none

}

.comments-table td {

    background: transparent;

    border: none;

}

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

    background: #D5E3DA;

    color: #FFFFFF;

}

.comment-replies {

     border: 5px outset #000000;

}

table.comments-table {

     border: none;

}

footer {

     background-image: url('https://i.postimg.cc/fTqyNNjJ/IMG-3216.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/t4r2SCsr/IMG-3237.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 {

   border-radius: 8px;

   background: url(https://i.postimg.cc/zXzCsYYV/IMG-3230.jpg);

   background-position: center;

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/NFgXvmSq/IMG-3223.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/ANjQ8wI-W7g?si=FFc70OTPLulsOx6w//?&;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>