downward spiral layout

<style>

body{background:url("https://i.ibb.co/ycJv3zqY/THE-EGOIST-Mikul-Medek-Czech-1926-1974-D-colletage.jpg") no-repeat fixed; background-size:cover;}

</style>

<style>

/*Profile (Background Color/Background Image)*/

    main{

background-color: #332421 !important;

    background-image: url('https://i.ibb.co/8nGmsKtT/mr-self-destruct.jpg') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

    box-shadow: 0px 0px 20px #fff;

}

</style>

<style>

/*Adding rounded corners to profile*/

   .top{

        border-radius: 25px 25px 25px 25px !important;

        box-shadow: 0px 0px 10px #fff;

}

.pfp-fallback{

border-radius: 15px !important;

box-shadow: 0px 0px 19px 0px white;

}

.img{

box-shadow: 0px 0px 10px #fff;

}

    main{

        border-radius: 25px 25px 25px 25px !important;}

</style>

<style>

/*Top (Background Color/Background Image)*/

   .top{

    background-image: url("https://i.ibb.co/SwX5WGdj/Nine-Inch-Nails-1994-The-Downward-Spiral.jpg") !important;

no-repeat fixed; 

height:100%;

}

</style>

<style>

/*Top Links (Background Color/Background Image)*/

 .links{

     text-align:center;

    background-color: transparent !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Search Users Box (Background Color/Background Image)*/

    .top input{

    background-color: COLOR !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Buttons (Background Color/Background Image)*/

    button{

    border-radius: 25px 25px 25px 25px !important;

    background-color: COLOR !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*General About (Background Color/Background Image)*/

    .general-about{

    background-color: e4d5b7  !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Mood (Background Color/Background Image)*/

    .mood{

    text-align:center;

    background-color: #332421  !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

box-shadow: 0px 0px 19px 0px white;

    border-radius: 15px !important;

}

</style>

<style>

/*Contact Heading (Background Color/Background Image)*/

    .contact .heading{

    border-radius: 25px 25px 25px 25px !important;

    background-color: #B7410E !important;

    background-image: url('URL');

    background-repeat: repeat;

    background-position: center;}

</style>

<style>

/*Contact Box (Background Color/Background Image)*/

    .contact{

    background-color: #B7410E !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

box-shadow: 0px 0px 19px 0px white;

}

</style>

<style>

/*Interests Section/Social Links Heading (Background Color/Backround Image)*/

    .table-section .heading{

    border-radius: 25px 25px 25px 25px !important;

    text-align:center;

    background-color: #332421 !important;

    background-image: url('URL');

    background-repeat: repeat;

box-shadow: 0px 0px 19px 0px white;

    background-position: center;}

</style>

<style>

/*Interests Table & Links Table (Background Color/Background Image)*/

    table.details-table{

    background-color: #332421 !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

box-shadow: 0px 0px 19px 0px white;

}

.profile h1 {

font-size: 24px;

}

    .profile .details-table td{

    background-color: #B7410E !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Blogs Heading (Background Color/Background Image)*/

    .blog-preview h4{

    border-radius: 25px 25px 25px 25px !important;

    background-color: #B7410E; 

    background-image: url('URL');

    background-repeat: repeat;

    background-position: center;}

.profile .blurbs .section h4 {

color: white !important;

font-family: courier !important;

}

.blurbs .heading:before, .blog-preview h4:before, .friends .heading:before {

font-family: courier !important;

font-size: 14px;

}

</style>

<style>

.profile-info{

border-radius:5px;

background-color: #332421;

box-shadow: 0px 0px 19px 0px white;

}

.general-about .details {

    background-image: url('https://i.ibb.co/Q7MtQHVk/download-2.jpg');

no-repeat fixed; background-size:cover;

box-shadow: 0px 0px 19px 0px white;

}

</style>

<style>

/*Blog (Background Color/Background Image)*/

    .blog-preview{

    background-color: #332421  !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Blurbs Heading (Background Color/Background Image)*/

    .blurbs .heading{

    border-radius: 25px 25px 25px 25px !important;

    background-color: #B7410E !important;

    background-image: url('URL');

    background-repeat: repeat;

    background-position: center;}

.profile .blurbs , .profile .friends , .blog-entry .comments , .bulletin .comments {

border-radius:15px;

box-shadow: 0px 0px 19px 0px white;

}

</style>

<style>

/*About Me/Who I'd Like To Meet (Background Color/Background Image)*/

    .blurbs{

    background-color: #332421  !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Friends/Comments Heading (Background Color/Background Image)*/

    .friends .heading{

    border-radius: 25px 25px 25px 25px !important;

    background-color: #B7410E !important;

    background-image: url('URL');

    background-repeat: repeat;

    background-position: center;}

.count {

    color: seagreen;

</style>

<style>

/*Friends (Background Color/Background Image)*/

    .friends{

    background-color:  !important;

no-repeat fixed; background-size:cover;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

.friends-grid{

    background-image: url('https://i.ibb.co/DPBrLcx9/The-Definitive-Nine-Inch-Nails-The-Singles.jpg') !important;

background-size:cover;

}

</style>

<style>

/*Comments (Background Color/Background Image)*/

    .comments-table td{

    background-color: #332421  !important;

    background-image: url('https://i.ibb.co/Q7MtQHVk/download-2.jpg') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

    border-radius: 25px 25px 25px 25px !important;

    border-width : 0

}

.comments-table td:first-child{

 background-color: #332421  !important;

    background-image: url('https://i.ibb.co/Q7MtQHVk/download-2.jpg') !important;

no-repeat fixed; background-size:cover;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

    border-radius: 25px 25px 25px 25px !important;

    border-width : 0;

}

</style>

<style>

/*Put Your Comments In A Scroll Box*/

table.comments-table{

background-color:#332421 ;

display: block;

height: 300px!important;

overflow-y: scroll;

border-radius:15px;

border-color:white;

border-width: 3px;

}

</style>

<style>

/*Customize Scrollbar*/

    ::-webkit-scrollbar {

    width: 8px;

    height: 10px;

}

    ::-webkit-scrollbar-thumb {

    background: rgba(0, 0, 0, 1);}

    ::-webkit-scrollbar-track {

    background:e4d5b7 ;

}

</style>

<style>

/*spacehey logo color.

you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{

    filter: brightness(100%) saturate(100%) ;!important;

}

</style>

<style>

/*SpaceHey Logo (Background Color/Background Image)*/

    .logo{

    background-color: COLOR !important;

    background-image: url('URL') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>

/*Footer Links (Background Color/Background Image)*/

    footer{

    background-color: #332421  !important;

    background-image: url('https://i.ibb.co/1JqVTMmw/download-4.jpg') !important;

    background-attachment: FIXED OR SCROLL !important;

    background-repeat: REPEAT OR NO-REPEAT !important;

    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;

    border-radius:15px;

    box-shadow: 0px 0px 10px #fff;

}

</style>

<style>

/*Change Text Colors*/

    .top{

    color: white;

font-size:13px;

}    

    main{

    color: white !important;}

    footer{

    color: white;}

</style>

<style>

/*Change Link Colors*/

    a{

    color: white !important;}

    a:hover{

    color: red !important;}

    a:visited{

    color: white !important;}

    .top a{

    color: white !important;}

    .top a:hover{

    color: red !important;}

    .top a:visited{

    color: white !important;}

    .links a{

    color: white !important;}

    .links a:hover{

    color: red !important;}

    .links a:visited{

    color: white !important;}

    .friends-grid p{

    color: white !important;}

    footer .links a{

    color: white !important;}

    footer .links a:hover{

    color: red !important;}

    footer .links a:visited{

    color: white !important;}

</style>

<style>

/*Change Interests Section Titles*/

table, th, td {

  border: 0px trans;text-align:center;border-radius: 15px;}

</style>

<style>

/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */

/*Change normal text font*/

.body{

font family: courier !important;}

</style>

<style>

/*Change link font*/

a{

font-family: courier !important;}

a:hover{

font-family: courier !important;}

a:visited{

font-family: courier !important;}

</style>

<style>

/*Change Profile Name Font*/

h1{

font-family: courier !important;

color:white;

}

</style>

<style>

/* this centers your friend space */

    .profile .friends .inner, .profile .blurbs .section h4{

    text-align: center;

    }

</style>

<style>

/* this edits your friends' icons */

.profile .friends .person img:not(.icon) {

border-radius:15px;

}

</style>

<style>

/* contact icons */

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {font-size:20px;

/* add to friends */

content: "♪"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {font-size:20px;

/* add to favorite */

content: "♪"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {font-size:20px;

/* send a message */

content: "♪"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {font-size:20px;

/* foward to friend*/

content: "♪"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {font-size:20px;

/* instant message */

content: "♪"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {font-size:20px;

/* block user */

content: "♪"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {font-size:20px;

/* add 2 group  */

content: "♪"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {font-size:20px;

/* report */

content: "♪️"

}   

</style>

<style>

/*Rounds profile picture*/

    .profile-pic img{

border-radius:25px;

box-shadow: 0px 0px 19px 0px white;

}

</style>

<style>

/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/

.contact .heading{ font-size:0; text-align:center; }

.contact .heading:before{ content: "Contact Me"; font-size:.8rem; font-weight:bold;color:white }

/*"Latest Blogs Entries" Title*/

.blog-preview h4{ font-size:0; text-align:center;}

.blog-preview h4 a{font-size:.8rem;margin-left:5px; }

.blog-preview h4:before{ content: "Blog Entries"; font-size:.8rem; }

/*"Your Blurbs" Title*/

.blurbs .heading{ font-size:0; text-align:center;}

.blurbs .heading:before{ content: "Blurbs"; font-size:.8rem; font-weight:bold;color:white; }

/*"Your Friend Space" Title*/

.friends .heading{ font-size:0; text-align:center;}

.friends .heading:before{ content: "My Friends"; font-size:.8rem; font-weight:bold;color:white; }

/*"Your Friend Comments" Title*/

.friends#comments .heading{ font-size:0; text-align:center; }

.friends#comments .heading:before{ content: "Comments"; font-size:.8rem; font-weight:bold;color:black; border-width : 0 }

</style>

<style>

/*contact box border*/

    .contact{

border: 1px transparent !important;

border-radius: 15px;}

</style>

<style>

/* for this box, you can add an image of your choice. it's right under the contact box. */

.url-info{

    background: url('https://i.ibb.co/N6yn6JvY/tumblr-nk03ebk3pl1unlf9zo4-r1-400-gif-360-270.gif');

    background-position: center;

    border: var(--borders)!important;

    border-radius: 20px;

    height:300px;

box-shadow: 0px 0px 19px 0px white;

}

.url-info p{

    opacity: 0.0;}

</style>

<style>

/*removes boxes around the interests/links table*/

body  

    {

--lighter-blue: none;

}

</style>

<style>

/*hides white box around comments table*/

    .table.comments-table:{

    border-color:transparent;}

</style>

<style>

.online {

    margin:auto;

    padding-bottom: 5px;

    content: url(https://i.ibb.co/YBxY6rhj/nobackgroundcd.png);

}

</style>

<style>

li.active .icon { 

    content:url('https://i.ibb.co/hRPYgWzZ/image.png'); 

    width: HOW WIDE U WANT ITpx;

    height: HOW TALL YOU WANT ITpx;

    }

.icon, .award img {

content:url('https://i.ibb.co/hRPYgWzZ/image.png'); 

}

<style>

html:before , body:before{

  animation: grain 8s steps(10) infinite;

  background-image: url(https://i.imgur.com/QpnTsrV.jpg);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.1;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

@keyframes grain {

  0%, 100% { transform:translate(0, 0) }

  10% { transform:translate(-5%, -10%) }

  20% { transform:translate(-15%, 5%) }

  30% { transform:translate(7%, -25%) }

  40% { transform:translate(-5%, 25%) }

  50% { transform:translate(-15%, 10%) }

  60% { transform:translate(15%, 0%) }

  70% { transform:translate(0%, 15%) }

  80% { transform:translate(3%, 35%) }

  90% { transform:translate(-10%, 10%) }

}

h1{

  animation: type 3s steps(27);

  color: white;

  font-size: 10px;

  font-family: consolas;

  white-space: nowrap;

  overflow: hidden;

  }

@keyframes type{

  0%{

    width:0ch;

  }

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

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

}

</style>

<style>

.online {

  animation: rotation 8s infinite linear;

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}

</style>

<style>

.contact .heading h4{

display:none !important;}

.contact .heading{ font-size:0.1px; }

.contact .heading:before{ content: url(https://i.ibb.co/Mx2vhPZK/NIN-Nine-Inch-Nails.jpg); 

border-radius: 15px !important;

overflow:hidden;

}

</style>