•*°. "Jus wanna cause a little chaos and entropy! (๑ↀᆺↀ๑)„ Hello I'm Loki--nice to meet you hehehehe. I love the internet, and I like a whole lot of media. I spend most of my time watching shows, playing games, and DOOM SCROLLING! I'm a positive person who doesn't like to dwell and sulk, I love feeling happy and being happy! I enjoy my time alone, though on the net, I'd love to meet new people hehehehe I'm about to be a freshman in college... a bit nervous about that, but t's okay! What's scary is the employment part . . . Other than the job I'm predestined to have, I would love to be a professional cosplayer one day--at least as a side hustle. For now, I just cosplay as a hobby. Hmm I guess the rest are in my interests box :D

<style>
@keyframes yourAnimation {
  0%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

body:before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.wikia.nocookie.net/lomando/images/2/28/Konkonsan.gif/revision/latest?cb=20191031132414');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  animation: yourAnimation 3s ease 0s 1 forwards;
}
</style>

<img src="https://i.pinimg.com/736x/4d/e1/8d/4de18d5478c541621c19a1186dc3ad3b.jpg"/>


<!-- (c) Layout created by aerin ^_^ VHS PART (https://layouts.spacehey.com/layout?id=36718) -->

<style>
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
opacity: 0.8;
pointer-events: none;
opacity: 1;
z-index: 450;
}

.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}

.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.6;
will-change: opacity;
animation: opacity 3s linear infinite;
}

.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.2s linear infinite;
}

.main {
}

.main .noise:before {
background-size: 170%;
}

.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}

.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}

@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}

@keyframes opacity {
0% {
opacity: 0.6;
}
20% {
opacity: 0.3;
}
35% {
opacity: 0.5;
}
50% {
opacity: 0.8;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.7;
}
100% {
opacity: 0.6;
}
}

@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>

<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}

</style></div>


<!-- (c) Layout created by ray ☆ 🍉 (https://layouts.spacehey.com/layout?id=82840) -->

<style>

body {
    background-color: black;
    font-family: verdana, arial, sans-serif, helvetica;
}

nav .top {

    padding: 15px 10px 14px 10px;
    position: relative;
    margin-top: 20px;
    border: 5px ridge darkred;
}

button, input {
    overflow: visible;
    border: 5px ridge darkred;
    color: white;
    padding-bottom: 3px;
    background: black;
}

nav .links {
    background-color: black;
    padding: 3.5px 16px;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    border: 5px ridge darkred;
    text-align: center;
    width: 750px;
    transform: translateX(28px);
}

main {
    background: black;
    color: white;
    padding: 6px 0px;
    font-size: 95%;
    border: 5px ridge darkred;
}

.profile-info {
    background: black;
    border: 5px ridge darkred;
    width: 100%;
    padding: 5px;
    overflow-wrap: break-word;
    word-break: break-word;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: transparent;
    color: white;
}

a {
    color: red;
    text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: darkred;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

nav .links .special a {
    color: red;
}

nav .links a:hover {
    text-decoration: none;
    color: darkred;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: none;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: white;
}

HTML,BODY{cursor: 
url(https://cur.cursors-4u.net/others/oth-8/oth701.png;;}


A:hover{cursor: 
url(https://cur.cursors-4u.net/others/oth-8/oth701.png;}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    width: 2px;
    border: 1px solid darkred;
}
::-webkit-scrollbar-thumb {
    background: darkred;
}
::-webkit-scrollbar-thumb:hover {
    background: red;  
}

.comments-table td, .music-table td {
    background: black!important;
    font-weight: bold;
    border: 5px ridge darkred!important;
}

table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    border: none!important;
}

.heading {
    background: black!important;
    border: 5px ridge darkred!important;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none!important;
    margin: 10px 0;
}

.inner {
    border: 5px ridge darkred;
    margin-top: 10px;
}

.profile-info .inner {
    border: none!important;
    margin-top: 0!important;
}

.profile .friends .person p {
    color: red;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.details-table td:first-child, .details-table td {
    background: black!important;
    color: white;
    font-weight: bold;
    border: 2px double darkred;
}

.online {
    color: #0C8C00;
    font-weight: bold;
    font-size: 95%;
    filter: hue-rotate(245deg) saturate(2.5);
}

.comment-replies {
    padding: 0 5px;
    border: 5px ridge darkred;
    margin-top: 10px;
}

.icon, .award img {
    display: none;
    height: 1.4em;
    width: 1.4em;
    aspect-ratio: 1/1;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
}

.f-col:before {
    content: ">";
    color: red;
}

</style>
<!-- STATIC BACKGROUND -->

<style>
body {
  background: url("https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExczJxbzBmZ2R1Z243ZW0xOHR4aTljY20yZXRlcTk0NWZsaDltYnd6dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/f8XI1mz0wsZ0I/giphy.gif") no-repeat center center fixed;
  background-size: cover;
  background-color: black; /* fallback color while gif loads */
}
</style>

<!-- BACKGROUND OF CONTACT BOX -->
<style>
.contact {

  border-radius: 25px;
  background: url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExbGN4aDJxcTRhNjB2MXV4anU1c3JyN3c3ZmV3Y2hxNXp2d2pvbnZkZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/v5SPGQSifcBQwQN5CS/giphy.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

</style>

<!-- TOP CORNER RIGHT GIF-->
<style>
#corner-gif {
  position: fixed;
  top: 10px;         /* distance from the top */
  right: 10px;       /* distance from the right */
  width: 350px;       /* adjust size if needed */
  height: auto;
  z-index: 3;     /* ensures it stays visible above everything */
  pointer-events: none; /* lets users click through it */
}
</style>

<img id="corner-gif" src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDE2cjBocTBzODcyNm9nYmZraGN5NG13NTBnYmdvZnhicm1laThjbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/2P0FpUVTZax3lKMARE/giphy.gif"/>

<!-- (c) Layout created by Nora Lumwood EDIT BOX (https://layouts.spacehey.com/layout?id=102949) -->

<style>
.profile-info {
border: white 3px dotted;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 5px;
margin-bottom: 10px;
background-image: url(https://i.pinimg.com/736x/ab/cf/e7/abcfe77d5d4807ce5b571b083a9d9d49.jpg);
}
</style>


<!--SHAKE WHEN HOVER-->
<style>

@-webkit-keyframes buzz-on-hover {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes buzz-on-hover {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.buzz-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-on-hover:hover, .buzz-on-hover:focus, .buzz-on-hover:active {
  -webkit-animation-name: buzz-on-hover;
  animation-name: buzz-on-hover;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
</style>

<style>

.profile-pic:hover{
    animation-name: buzz-on-hover;
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-left: 0px;
    margin-top: 0px;
}    

</style>

<!-- (c) Layout created by Generic_Dev ONLINE INDICATOR (https://layouts.spacehey.com/layout?id=106700) -->

<style>.online { visibility: hidden; } .online img { content: url("https://64.media.tumblr.com/9f3ac1bf9da2ebbfbf439c0cb7779cd4/b0e5e81e2eeb9f41-7b/s100x200/69fd3d158ac2c928200bbd5a50466272708a4b9b.gifv"); animation-name: none; visibility: visible; height: 25px; width: 90px; } </style>


<style>
:root{
/* [background color]: header on top */
 --logo-blue:url(https://i.pinimg.com/736x/b0/8d/ee/b08dee9b40c5bab7e47d1e2c67d9cd0d.jpg);
}

nav .links {
    background-image:url(https://i.pinimg.com/736x/d9/b0/e5/d9b0e5731a7ac1aa4a6ff321cc5dbdf0.jpg);
    padding: 3.5px 16px 5.5px 16px;
}

</style>

<!-- (c) Layout created by 𐔌   .  ⋮ 𝘙𝘢𝘪𝘯𝘺  .ᐟ  ֹ   ₊ ꒱ TEETH BANNER (https://layouts.spacehey.com/layout?id=84870) -->

<style>
main:before {
width: 100%;
height: 150px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/736x/16/95/42/16954241499b953b732490e76f676c8d.jpg');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>

<!-- SCROLLBOX -->
<style>

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}



</style>

<!-- (c) Layout created by ♡ ~H₃ₐᵣ𝚝@𝚌𝓱₃~ ♡ (https://layouts.spacehey.com/layout?id=98877) -->

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth701.ani), url(https://cur.cursors-4u.net/others/oth-8/oth701.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/29/bloody-stabbing-knife.html" target="_blank" title="Bloody Stabbing Knife"><img src="https://cur.cursors-4u.net/cursor.png" alt="Bloody Stabbing Knife" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

/*Changing the tables*/
.profile, .profile .url-info, .profile .table-section{
    background: none;
    border-color: black;
}
/*This edits each entry on the table*/
td{
    background-color: transparent !important;
}
</style>

<style>
/* FORCE RED BORDERS FIX */
main,
nav .links,
.profile-info,
.heading,
.comment-replies,
.comments-table td,
.music-table td,
.details-table td,
.contact,
.inner {
  border: 5px ridge darkred !important;
  background-color: black !important;
  color: white !important;
}

/* Optional: Fix links inside boxes to stay red */
a {
  color: red !important;
}

a:hover {
  color: darkred !important;
}
</style>

<style>
/* Make internal module content transparent */
.profile .contact, 
.profile .url-info, 
.profile .table-section, 
.setting-section, 
.home-actions,
.details-table td,
.profile .friends .person p,
.music-table td,
.comments-table td,
.heading,
.inner {
    background-color: transparent !important;
    border-color: darkred !important;
}

/* Optional: remove black bg from 'Edit Your Profile' box too */
main {
    background-color: transparent !important;
}

/* But keep black background ONLY on labels like "Contacting LOKI" */
.profile-info {
    background-color: black !important;
}
</style>

<style>
/* Only yellow background for "LOKI'S BLURBS" header */
.profile .blurbs .heading {
  background-color: #F8D863 !important;
  color: black !important;
}

/* Only yellow background for "LOKI'S INTERESTS" header */
.profile .table-section .heading {
  background-color: #F8D863 !important;
  color: black !important;
}

/* Make the SpaceHey URL text black again */
.profile .url-info a {
  color: black !important;
}
</style>

<style>
/* REMOVE red border inside "Edit Profile" box ONLY */
.profile-info .inner {
  border: none !important;
  background-color: transparent !important;
}

/* Optional: override any leftover .inner border styles */
.inner {
  border: none !important;
}
</style>

<style>
/* Remove only the red border from the Edit Profile box */
.profile-info .inner {
  border: none !important;
}

/* Restore red border for Loki's Blurbs and About Me box */
.profile-info {
  border: 5px ridge darkred !important;
}
</style>

<style>
/* Restore red border for Loki's Blurbs / About Me box */
.profile-info {
  border: 5px ridge darkred !important;
  background-color: black !important;
}

/* Remove border ONLY from the inner box around "Edit Profile" */
.profile-info .inner {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
</style>

<style>
/* Remove border from ONLY the "Edit Profile" section inside .profile-info */
.profile-info > .inner {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

/* Ensure the outer "Loki's Blurbs" box keeps its red border */
.profile-info {
  border: 5px ridge darkred !important;
  background-color: black !important;
}
</style>

<style>
/* Restore red border and black background ONLY for 'About Me' section */
.profile .blurbs .profile-info {
  border: 5px ridge darkred !important;
  background-color: black !important;
}

/* Remove inner border from 'Edit Profile' without affecting outer box */
.profile .blurbs .profile-info .inner {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
</style>
<style>
/* Remove only the red border from the Contact box */
.profile .contact {
  border: none !important;
  box-shadow: none !important;
}

/* Restore red border for the "About Me" (Loki’s Blurbs) box */
.profile .blurbs .profile-info {
  border: 5px ridge darkred !important;
  background-color: black !important;
}
</style>


<style>
/* Prevent the horizontal scrollbar */
html, body {
  overflow-x: hidden;
}
<!-- IMAGES -->
<img src="https://i.pinimg.com/736x/4d/e1/8d/4de18d5478c541621c19a1186dc3ad3b.jpg"/>

<!-- BOTTOM LEFT IMAGE-->
<style>
#bottom-left-image {
  position: fixed;
  bottom: 40px;   /* distance from the bottom */
  left: 40px;     /* distance from the left */
  width: 300px;   /* adjust size as needed */
  height: auto;
  z-index: 4;
  pointer-events: none;
}
</style>

<img id="bottom-left-image" src="https://i.pinimg.com/736x/61/d4/49/61d4498b913288026090e989961d2dd8.jpg"/>

<!-- BOTTOM LEFT IMAGE 2-->
<style>
#bottom-left-image {
  position: fixed;
  bottom: 40px;   /* distance from the bottom */
  left: 40px;     /* distance from the left */
  width: 300px;   /* adjust size as needed */
  height: auto;
  z-index: 3;
  pointer-events: none;
}
</style>

<img id="bottom-left-image" src="https://i.pinimg.com/736x/d7/21/11/d7211123062c8c9d8e73001e006a042c.jpg"/>

<style>
.glitch-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200; /* Below your PNG and loading screen */
  pointer-events: none;
  animation: glitch-flicker 5s infinite;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 0, 0, 0.02),
    rgba(0, 255, 0, 0.02),
    rgba(0, 0, 255, 0.02) 2px
  );
}

<style>
@keyframes glitch-flicker {
  0%, 100% { opacity: 1; transform: none; }
  3% { opacity: 0.9; transform: skewX(0.5deg); }
  5% { opacity: 0.85; transform: skewY(-0.5deg); }
  7% { opacity: 1; transform: none; }
  13% { opacity: 0.92; transform: skewX(0.3deg); }
  17% { opacity: 0.88; transform: scale(1.01); }
  23% { opacity: 1; transform: none; }
  32% { opacity: 0.9; transform: skewY(0.4deg); }
  47% { opacity: 1; transform: none; }
  63% { opacity: 0.92; transform: scale(1.01); }
  78% { opacity: 0.85; transform: skewX(-0.3deg); }
  92% { opacity: 1; transform: none; }
}
</style>

<div class="glitch-layer"></div>

<style>
@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.90626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.83891;
  }
  30% {
  opacity: 0.65583;
  }
  35% {
  opacity: 0.67807;
  }
  40% {
  opacity: 0.26559;
  }
  45% {
  opacity: 0.84693;
  }
  50% {
  opacity: 0.96019;
  }
  55% {
  opacity: 0.08594;
  }
  60% {
  opacity: 0.20313;
  }
  65% {
  opacity: 0.71988;
  }
  70% {
  opacity: 0.53455;
  }
  75% {
  opacity: 0.37288;
  }
  80% {
  opacity: 0.71428;
  }
  85% {
  opacity: 0.70419;
  }
  90% {
  opacity: 0.7003;
  }
  95% {
  opacity: 0.36108;
  }
  100% {
  opacity: 0.24387;
  }
}
/* the crt filter */
body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgb(0 0 0 / 48%) 50%, rgb(0 0 0 / 0%) 50%);

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

animation: flicker 0.15s infinite;

}
</style>