My Website :3

<style>

body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgb(59 77 55 / 54%) 50%, rgb(10 10 9 / 0%) 50%);
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

body{background:url("https://64.media.tumblr.com/854c74fd0abda2258319614768633cd8/9ada094737f9f273-8b/s1280x1920/3970401ca4dbc64bddd69a8e0c4dfe4d13953dc6.pnj") no-repeat fixed; background-size:cover;
}


small {
font-size:100%;
}


main {
background-image: url("https://64.media.tumblr.com/29f319e9265ce46c828ae909db5ecc31/9ada094737f9f273-8f/s1280x1920/ee81d85d98ec9a5f205a1f190faffaffcb402bb1.gifv");
border: 3px solid white;
}

main:before {
      background-image: url('https://64.media.tumblr.com/cf9c7b9df3d05a0a549cde11de32f0f9/1a99913525f29fa8-dd/s1280x1920/09aeaa199fd5cc982e57233e0bf97291c5f5961a.pnj');
      background-position: center center;
      background-size: cover;
display: block;
content: "";
    width: 98%;
    height: 150px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
  }

b {
font-size: 14px;
}


time.ago {
color: white;
}


h1{
font-size: 30px !important;
color: white;
}

.url-info{display:none !important;}

.profile .friends .inner b, .profile .friends .inner a{
color: white;
text-shadow: 3px #369125;
}


.profile h1{
color: white !important;
font-size: 14px;
}


.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}


.friends p, .friends a {
color: white;
}


p{
font-size: 16px;
}


.details-table td a {
color: white;
}


.details-table td p {
color: white;
font-size: 14px;
}

.profile .table-section .heading{
background: transparent;
}


.profile .table-section .heading h4{
color: transparent;
background: transparent;
}
.profile .table-section .heading:before{ content: url(https://64.media.tumblr.com/5bf3799efc8206425c846c3b516e220c/6435a2cb77289f34-f2/s400x600/961818b0eebe399e03d10281e2a4169eba952c3a.gifv);
}


.contact .heading h4{
font-size:14px;
}


.profile .contact {
  font-family: Arial, sans-serif;
background: transparent;
border: 0px solid transparent;
}


.profile .contact a{
font-size: 12px;
}


.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}


.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 5px solid white;
}


.profile .friends .inner{
    text-align: center;
background-image: url("https://64.media.tumblr.com/abedafbb48c0eb706933f476f4dcdd24/9ada094737f9f273-f0/s640x960/5eda0ca65ee18b35422de64c3694f8db34c7325d.gifv");
border: 3px solid white;
box-shadow: 0px 0px 10px 0px #369125;
background-position: center;
}


.contact .heading h4{
display:none !important;}


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

.contact .heading:before{ content: url(https://64.media.tumblr.com/94a8dcc4abeed845b586acf77e1f8e7e/9ada094737f9f273-5b/s400x600/645838be0b520a77d623055822f4be941a0f91b2.gifv);
overflow:hidden;
}


.blog-preview{
text-align: center;
background-image: url(https://64.media.tumblr.com/abedafbb48c0eb706933f476f4dcdd24/9ada094737f9f273-f0/s640x960/5eda0ca65ee18b35422de64c3694f8db34c7325d.gifv);
color: white;
border: 2px solid white;
box-shadow: 0px 0px 10px 0px #369125;
}


.contact .heading h4{
font-size:14px;
}


.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px #369125;
border: 3px solid white;
}


.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: white;
border: 3px white;
}


.button {
    background: transparent;
    color: white;
}


.profile-info{
background: transparent;
border: 3px solid white;
box-shadow: 0px 0px 15px 0px #369125;
}


.profile-info a{
font-size: 14px;
color:white;
}


.profile-info h3{
color:white;
}


.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:transparent;
}


.profile .blurbs .inner{
background: transparent;
box-shadow: 0px 0px 10px 0px #369125;
border: 3px solid white;
}

.profile .contact .heading, .home-actions .heading {
background-color: transparent;
color: white;
}

.online {
    margin:auto;
    content: url(https://64.media.tumblr.com/77c1976b12b7c99cf1317c1262ab67e2/e2c4d3c4e0f36e85-9f/s250x400/ac47529e3ee462c499a01f40d35d7e7a9bf87d36.pnj);
}

.icon {
        content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}


h4 {
font-size: 14px !important;
color: white;
  font-family: Arial, sans-serif;
}


p {
  font-family: Arial, sans-serif;
color: white;
   }


   a {
font-size: 14px;
     color: white;
   }


a:hover {
     color: #369125;
}

    .count {
        color: #369125;
    }


.profile .friends .person p {
color: white; 
}

.profile .friends .person p:hover {
color: #369125; 
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add friend */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv);
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add 2 fav */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* chat */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant msg */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://64.media.tumblr.com/225e1f640a665a977f90f0c41619696a/b4a4905dbbf354a9-c6/s75x75_c1/d69c958530b246e2974b61e2da03d6c89bd72abf.gifv)
}


.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}


.profile .table-section .details-table td {
background:url("https://64.media.tumblr.com/abedafbb48c0eb706933f476f4dcdd24/9ada094737f9f273-f0/s640x960/5eda0ca65ee18b35422de64c3694f8db34c7325d.gifv");
background-image: center;
border: 3px solid white;
box-shadow: 0px 0px 10px 0px #369125;
}


.profile .friends .comments-table td {
background: transparent;
border: 2px solid #369125;
position: center;
}

.profile .friends .comments-table td:first-child {
background: url(https://64.media.tumblr.com/abedafbb48c0eb706933f476f4dcdd24/9ada094737f9f273-f0/s640x960/5eda0ca65ee18b35422de64c3694f8db34c7325d.gifv);
}

.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comments-table td:first-child img{
border: 1px solid #369125;

box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
}


.comment-replies{
border: 1px solid #369125;
color: white;
}


.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}


.general-about .details a{
  font-family: Arial, sans-serif;
color: white !important;
font-size: 14px;
}


.links{
width=810px;
}


nav .links {
background: transparent;
}


nav .links a:hover {
color: #369125;
}


nav .top label{
background: transparent;
}


nav .top label{
color: white;
}


  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px solid white;   
  }

.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #369125;
}

.profile .table-section {
border: none;
}


.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #369125;
}

.profile .table-section {
border: none;
}


table.comments-table {
border: 0.5px solid #369125;
background: black;
}


footer p{
color: white;
font-size: 100%;
}


footer a{
color: white;
}


footer {
color: white;
box-shadow: 0px 0px 15px 6px #369125;
text-decoration: underline;
text-decoration-style: dotted;
background-color: #369125;
border: 3px solid white;
}   

<style>

    .table.comments-table:{
    border-color:#369125;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello.</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .profile {
            background-color: white;
            margin: 20px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .profile img {
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }
        .bio {
            margin-top: 20px;
        }
        .friends {
            margin-top: 20px;
        }
        .friends ul {
            list-style-type: none;
            padding: 0;
  -radius: 5px;
        }
    </style>
</head>
<body>

    <div class="header">
        <h1>w31c0m3!</h1>
    </div>

    <div class="profile">
        <img src="https://media1.tenor.com/m/pWpwtp29ueoAAAAC/gnarpy-regretevator.gif" alt="Profile Picture">
        <h2>Username: heartcatch/spaceheyspacenay</h2>
        <div class="bio">
            <h3>About Me</h3>
            <p>hi!</p>
        </div>
        <div class="friends">
            <h3>Friends</h3>
            <ul>
                <li>none XD</li>
                
            </ul>
        </div>
    </div>

</body>
</html>
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://cdn.lowgif.com/medium/35533ca912e13f85-.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>