Static White Noise Layout

<style>

/*Intro GIF Animation (fade out)*/

  body:before {

    content: " ";

    height: 100vh;

    width: 100vw;

    display: block;

    position: fixed; 

    top: 0; 

    left: 0; 

    z-index: 100;

    background-image: url('https://i.giphy.com/media/3ohryjTWP5EyfaJB2o/giphy.webp'); /*gif link here*/

    background-size: cover;

    background-repeat: no-repeat;

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

    pointer-events: none;

  }

  @keyframes yourAnimation { 0.0%{ opacity: 8;} 80%{ opacity: 0; } 100%{ opacity: 0;} }

</style>

<style>

main:before {

 width:auto;

 height: 130px;

 display: block;

 content: "";

 background-image: url('https://cdn.shopify.com/s/files/1/0822/4115/articles/101519_-_Blog_-_Ghosted_Assets_v02_hero_394x.gif?v=1582224882');

 background-position: center center;

 background-size: cover;

}

</style>

<style>

body{

background:url("https://media0.giphy.com/media/26u6blNhgI9Imh0uA/giphy.gif")

    no-repeat fixed; 

background-size: cover;

</style>

<style>

img {

  opacity: 0.80;

}

img:hover {

  opacity: 1.0;

}

</style>

<style>

main {

    background-image: url();

    background-repeat: no-repeat;

    background-size: 100%  ;

background-color:transparent;

  }  

</style>

<img src="https://64.media.tumblr.com/53c997fc89ad32190475e486c8ca1ae2/tumblr_mhrehrSUR81qj73e2o1_500.gif" alt="Forest" width="500" height="400"/>

<style>

h1, h2, h3, h4,h5,a, p, nav label, .section {color: firebrick;}

h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;

}

.online. {

  color: red!important;  

}

</style>

<style>

@import url('https://fonts.googleapis.com/css2?family=Francois+One&family=Press+Start+2P&family=Stalinist+One&display=swap');

body {

  font-family: 'Press Start 2P',cursive ;

  font-size: 17px

}

</style>

<style>

:root {

        --logo-blue: rgba(48, 48, 48, 0.7) ;

        --darker-blue: firebrick ;

        --lighter-blue: rgba(48, 48, 48, 0.7) ;

        --even-lighter-blue:rgba(48, 48, 48, 0.7) ;

        --lightest-blue:  rgba(48, 48, 48, 0.7) ;

        --dark-orange:  firebrick ;

        --light-orange:  rgba(48, 48, 48, 0.7) ;

        --even-lighter-orange:  rgba(48, 48, 48, 0.7) ;

        --green: rgba(48, 48, 48, 0.7) ;

        

    }

</style>

<style>

/*customising contact box*/

  .profile .contact .heading{

    background:insert color;

    text-align: center;

  }

  .profile .contact {

    border-radius: 15px;

    border:2px solid insert color ;

    background-image: url()

    background-position: right top;

    background-repeat: repeat;

    background-attachment: scroll;

    Height:180px;

    color:  ;

    text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px #8A2BE2 ;

  }

  .contact a{

    color: red ;

  }

  .contact a:hover{

    color: red ;

  }

</style>

<style>

/*making the comments section have a scroller*/

  .comments-table{

    display: block;

    height: 380px;

    overflow-y: scroll;

    Border-radius: 15px;

    background-color: ;

  }

/*customising comments section*/

  .comments-table td:first-child{

    background-color: ;

  }

  .comments-table td:first-child a{

    color: ;

  }

  .comments-table td:first-child a:hover{

    color: ;

  }

  .comments-table td{

    background-color: ;

  }

  .comments-table td a{

    color: ;

  }

  .comments-table td a:hover{

    color:  ;

  }

</style>

<style>

.blurbs .heading{display:none !important;}

</style>

<style>

/* profile photo */

.profile-pic img{

    outline:none !important;

    border-radius: 50px;

}

</style>

<style>.online { visibility: hidden; } .online img { content: url("https://ct.pimp-my-profile.com/online/26.gif"); animation-name: none; visibility: visible; height: 43px; width: 90px; }</style>

<style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1163.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1163.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2018/06/08/hell-yeah-pointer-6.html" target="_blank" title="Hell Yeah Pointer 6"><img src="https://cur.cursors-4u.net/cursor.png" alt="Hell Yeah Pointer 6" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

footer {

border-radius: 15px;

background-color:#000;

background-position: center bottom;

background-image: url(https://media2.giphy.com/media/YRcXl6VfNhCorklI0R/giphy.gif);

</style>

<style>

.profile .friends .person img {

        border-radius: 10px;

    }

</style>

<style>

/*top search bar customisation*/

  .search-wrapper input[type=text] {

    background-color: rgb(105,105,105) !important;

    border: 1px dotted var(--headers) !important;

    color:(--names) !important;

    border-radius: 10px !important;

  }

</style>