← Back to Layouts
Lover

Name: FriendRewind
Author: FriendRewind
Author: Cat :3
Category: 2000s
Created: July 11, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
/* ==========================================================================
   2000s SCENE/EMO MEGA PROFILE OVERRIDE TEMPLATE
   ========================================================================== */

/* 1. FLASHING RAINBOW BACKGROUND & PAGE SEAMLESS SETUP */
@keyframes rainbowFlash {
    0%   { background-color: #ff007f; } /* Hot Pink */
    16%  { background-color: #ff9900; } /* Neon Orange */
    33%  { background-color: #ffff00; } /* Neon Yellow */
    50%  { background-color: #00ff00; } /* Neon Green */
    66%  { background-color: #00ffff; } /* Neon Cyan */
    83%  { background-color: #9900ff; } /* Purple */
    100% { background-color: #ff007f; } /* Loop back */
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    animation: rainbowFlash 4s infinite linear;
    cursor: crosshair !important;
    box-sizing: border-box;
}

/* 2. HIDE ALL GLOBAL SCROLLBARS */
html, body, * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 3. UNIVERSAL COMIC SANS FONT & COLOURED TEXT CONTROLS */
html, body, p, div, span, td, a, h1, h2, h3, .title, b, i {
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif !important;
    color: #ffff00 !important; /* Base Yellow text */
    -webkit-text-stroke: 1.2px #ff007f !important; /* Thick Pink Stroke */
    text-stroke: 1.2px #ff007f !important;
    text-shadow: 1px 1px 0px #000, -1px -1px 0px #000 !important;
}

a, a:link, a:visited {
    color: #00ffff !important;
    text-decoration: underline !important;
}
a:hover {
    color: #ffff00 !important;
    background: #000000 !important;
}

/* 4. PINK, YELLOW, AND BABY LIGHT (CYAN) PATTERN TRIMS AROUND ALL CONTAINERS */
.card, .table, .profile-table, [class*="section"], [class*="box"], .profile-info {
    background-color: rgba(0, 0, 0, 0.9) !important; /* Opaque Black Core */
    border-radius: 0px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    
    /* Triple Layered 2000s Shadow Border Matrix */
    border: 4px solid #ff007f !important; /* Inner Pink Ring */
    outline: 4px solid #ffff00 !important; /* Middle Yellow Ring */
    box-shadow: 0 0 0 8px #00ffff, 0 10px 20px rgba(0,0,0,0.8) !important; /* Outer Baby Cyan Ring */
}

/* 5. GLITTER PROFILE PICTURE BORDER SETTINGS */
[class*="avatar"], [class*="profile-pic"], .profile-table img:first-of-type, [src*="avatar"], .pfp-container img {
    border: 8px double #ff007f !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    margin: 20px !important;
    overflow: visible !important;
    animation: glitterSparkle 0.2s infinite alternate steps(2) !important;
}

@keyframes glitterSparkle {
    0% {
        border-color: #ff007f !important;
        box-shadow: 0 0 4px #fff, 0 0 12px #ff007f, inset 0 0 4px #fff !important;
        filter: brightness(1) contrast(1);
    }
    100% {
        border-color: #ff66cc !important;
        box-shadow: 0 0 8px #fff, 0 0 20px #ff66cc, inset 0 0 8px #fff !important;
        filter: brightness(1.3) contrast(1.2);
    }
}

/* Inside Picture Glitter Sparkle Overlay Generator */
[class*="avatar"]::after, [class*="profile-pic"]::after, .pfp-container::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 10;
    background-image: 
        radial-gradient(circle, #fff 10%, transparent 11%),
        radial-gradient(circle, #ff007f 10%, transparent 11%),
        radial-gradient(circle, #00ffff 10%, transparent 11%);
    background-size: 8px 8px, 12px 12px, 16px 16px;
    background-position: 0 0, 4px 4px, 2px 6px;
    mix-blend-mode: screen; 
    opacity: 0.7;
    animation: insideGlitter 0.15s infinite steps(2);
}
@keyframes insideGlitter {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1.2); }
    50% { transform: scale(1.05) rotate(90deg); filter: brightness(1.5); }
    100% { transform: scale(1) rotate(180deg); filter: brightness(1.2); }
}

/* 6. BRUTE FORCE STATE REMOVAL UTILITY */
td:contains("Tennessee"), [class*="location"], .profile-info h3 {
    font-size: 0px !important;
    color: transparent !important;
}
td:contains("Tennessee")::before, [class*="location"]::before, .profile-info h3::before {
    content: "📍 Pallet Town, United States " !important;
    font-size: 14px !important;
    color: #ff007f !important;
}

/* 7. FULL MONITOR BACKGROUND HEART SPRINKLES LAYERING */
.heart-sprinkles-matrix {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" width="40" height="40" viewBox="0 0 24 24"><path fill="%23ff007f" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" width="60" height="60" viewBox="0 0 24 24"><path fill="%2300ffff" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    background-position: 0 0, 20px 30px;
    background-size: 80px 80px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
}

/* 8. FLASHING POKEBALL VIEWPORT BADGE */
.pokeball-border-pet {
    position: fixed;
    bottom: 25px; right: 25px;
    z-index: 99999;
    pointer-events: none;
}
@keyframes pokeballFlash {
    0%, 49% { opacity: 1; filter: invert(0%); }
    50%, 99% { opacity: 0; filter: invert(100%); }
}
.pokeball-border-pet img {
    width: 32px; height: auto;
    image-rendering: pixelated;
    animation: pokeballFlash 0.3s infinite;
}
</style>

<!-- BACKGROUND TEXTURE ELEMENT -->
<div class="heart-sprinkles-matrix"></div>

<!-- ANCHORED FLASHING POKEBALL -->
<div class="pokeball-border-pet">
    <img src="https://pokemondb.net" alt="Pokeball">
</div>

<!-- ==========================================================================
     9. SCENE IDENTITY BIO ELEMENT (Place at the Top of Your Blurb/About Me)
     ========================================================================== -->
<div style="position: relative; margin-top: 40px; display: block; width: 100%;">
    
    <!-- Pikachu Bio-Pet Resting Element -->
    <div style="position: absolute; top: -26px; left: 25px; z-index: 9999;">
        <img src="https://pokemondb.net" style="width: 32px; height: auto; image-rendering: pixelated;" alt="Pikachu Pet">
    </div>

    <!-- Core Bio Text Box Container -->
    <div style="text-align: center; padding: 15px; background: #000; border: 2px dashed #ff007f;">
        <h2 style="margin: 0 0 10px 0; font-size: 24px; letter-spacing: 2px;">⚡ My Scene Space ⚡</h2>
        
        <p style="font-size: 18px; font-weight: bold; margin: 5px 0; text-transform: uppercase;">
            rawr xD he/him minor
        </p>

        <!-- Online Now Badge Simulation -->
        <div style="display: inline-flex; align-items: center; gap: 6px; background: #111; padding: 4px 8px; border: 1px solid #00ffff; margin-top: 8px;">
            <span style="font-size: 16px; filter: grayscale(100%); line-height: 1; animation: pokeballFlash 0.4s infinite;">🌹</span>
            <span style="color: #ff6633; font-size: 12px;">(((🧝))) Online Now!</span>
        </div>
    </div>
</div></style>