f2u gothic layout!!

i'm not confident enough in my goth knowledge, so i won't fully call this goth just yet... 

however i feel like my code is the neatest i've gotten it, so that's a plus!! there's descriptions of what every piece of code does at the top of it so that you can easily adjust to your liking!! i purposefully gave this one a lot of wiggle room to make your own ;)

feel free to use my code to help you w/ your own layout!! that's why i labelled it so heavily!!

comment if you use :)

layout includes:

custom spacehey logo

custom online indicator

custom colors (w/ pretty detailed locations in the code if i do say so myself...)

image under url

banner

custom contact icons

custom cursor

autoplay song (the kiss by the cure)

elvira loading screen

fun image hover effect when hovering over friends' profiles

&& lots of room to make it your own! 

code starts here

<style>
  body{
  /*main background*/
  background-image: url('https://i.pinimg.com/1200x/0a/16/bd/0a16bdfa188236a5ce4a86c66256957c.jpg')!important ;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: cover !important;
  }
</style>

<style>
  /*inner background*/
  main{
  background-color:rgb(52,52,52);
  }
</style>

<style>
  /*top bar*/
  .top, .links{
  background-color: black !important ;
  }
</style>

<style>
  /*footer*/
  footer{
  background-color: black !important;
  color: white !important;
  }
</style>

<style>
  /*blurb window colors*/
  .contact, .table-section, .blog-preview, .profile-info, .url-info, .friends, .blurbs{
  background-color: rgb(224,224,224) !important;
  color: black !important;
  }
</style>

<style>
/*blurb heading colors*/
.contact .heading, .table-section .heading, .blurbs .heading, .friends .heading{
background-color: black !important;
color: white;
}
</style>

<style>
/*blurb border colors*/
.contact, .url-info, .table-section, .blurbs, .friends{
border 1px solid !important;
border-color: black !important;
}
</style>

<style>
/*link colors*/
a{
color: rgb(130, 7, 12);
}
</style>

<style>
/*link hover effect*/
a:hover {
text-transform: underline;
color: rgb(82, 6, 9);
}
</style>

<style>
/*mood box*/
.mood{
background-color: rgb(224,224,224) !important;
border: 2px solid black !important;
}
</style>

<style>
/*profile and status text*/
.general-about, h1{
color: black !important;
}
</style>

<style>
/*blurb text*/
.blurbs .heading,  .profile .table-section .heading, .profile .friends .heading{
color: white !important
}
</style>

<style>
/*about me/who i'd like to meet*/
 .profile .blurbs .section h4{
color: rgb(130, 7, 12); !important
}
</style>

<style>
/*interest table colors*/
.table-section .inner td:first-child{
background-color: rgb(130, 7, 12);
}
.table-section .inner td{
background-color: rgb(148, 55, 59);
color: black !important
}
</style>

<style>
/*custom logo*/
.logo{
content: url('https://i.postimg.cc/xXhjZHqj/image.png');
width: 165px !important;
height: 42 !important;
}
</style>

<style>
/*online indicator*/
.online{
content: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/660.gif') !important;
}
</style>

<style>
li.active .icon {
content:url('https://www.glitter-graphics.com/images/t/b/55x50/375/375034mlf314q73l.webp');
}
</style>

<style>
/*contact icons*/
.contact img.icon {
display: none;
}
.contact{background-color: !important;}
/* add to friends */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://www.glitter-graphics.com/images/t/b/55x50/1171/1171130w3p5vfo9j7.webp');
background-size: 100% 100%;
}
/* add to favorites */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/622.gif');
background-size: 100% 100%;
}
/* send message */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/248.gif');
background-size: 100% 100%;
}
/* forward to friend */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/736.gif');
background-size: 100% 100%;
}
/* instant message */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/264.gif');
background-size: 100% 100%;
}
/* block user */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/271.gif');
background-size: 100% 100%;
}
/* add to group */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/663.gif');
background-size: 100% 100%;
}
/* report user */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://file.garden/Ze88s1ucmRDZDhMX/pixels/247.gif');
background-size: 100% 100%;
}
</style>

<style>
/*loading screen*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://media1.giphy.com/media/l2YWmkmxgm8uwoeKA/giphy-downsized.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>

<style>
/*image under url*/
.profile .url-info
p:last-child:after
{
content: "";
display: block;
background-image: url('https://www.glitter-graphics.com/images/t/b/100x100/1194/1194556jr34xt27wo.webp');  
width: auto;
height: 150px;
background-position: top center;
background-size: 50%;
background-repeat: no-repeat;
}
.profile .url-info
p {text-align: center;
}
</style>

<style>
/*banner*/
main:before {
background-image: url('https://i.pinimg.com/originals/fe/e8/47/fee8478fc9ec7a2dd6c30a60f9537e4a.gif');
background-position: center center;
background-size: cover;
display: block;
content: "";
width: 100%;
height: 200px;
}
</style>

<style>
/*cursor below*/
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-4/oth378.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/04/29/ankh.html" target="_blank" title="Ankh"><img src="https://cur.cursors-4u.net/cursor.png" alt="Ankh" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/*autoplay song below*/
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/BNTrm67-g8Q?controls=0//?&; 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>

<style>
/*profile hover effect*/
.friends-grid img:hover{filter: grayscale(100%) !important;}

</style>