← Back to Layouts
Resident Eviler

Name: FriendRewind
Author: FriendRewind
Author: Marcel | TheHiddenDraft
Category: ?
Created: August 3, 2026
idk
Comments (0)

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

<style>
<style>
/* ==========================================================================
   1. FONTS, CURSOR & GRAIN OVERLAY
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

/* Umbrella Target Crosshair Cursor */
* { 
  cursor: url("https://www.clipartmax.com/png/middle/149-1491286_resident-evil-series-umbrella-resident-evil-logo-vector.png"), crosshair !important; 
}

/* Subtle Animated Noise Overlay */
html::before {
  content: "";
  position: fixed;
  top: -100%; left: -50%;
  width: 300%; height: 300%;
  background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeXpwM3NyZ2t2eXNsZ3o3eXQ3anJ4aHhzNWdiOWhqazI2MW5idDJ4MyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/FSqYDfsdaiG9W/giphy.gif');
  opacity: 0.05;
  pointer-events: none;
  animation: grain 8s steps(10) infinite;
  z-index: 10;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0); }
  10% { transform:translate(-5%, -10%); }
  20% { transform:translate(-15%, 5%); }
  30% { transform:translate(7%, -25%); }
  40% { transform:translate(-5%, 25%); }
  50% { transform:translate(-15%, 10%); }
  60% { transform:translate(15%, 0%); }
  70% { transform:translate(0%, 15%); }
  80% { transform:translate(3%, 35%); }
  90% { transform:translate(-10%, 10%); }
}

/* Page Background: Dark Raccoon City Rain / Ambient Fog */
body, 
body.profile-page {
  background-image: url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW5pZDFraWUxY3JsbG9hbnRoZTFoenAwd3l4NHRoYzhxcGZmcm95YSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/26DMWExfbZSiV0Btm/giphy.gif") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #d1d5db !important;
  font-family: 'Share Tech Mono', monospace !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, 
  body.profile-page {
    background-attachment: fixed !important;
  }
}

/* Links & Text Styles */
a, 
.profile a, 
.table-section a, 
.module a { 
  color: #ff3333 !important; 
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px #ff0000 !important;
}

h1, h2, h3, h4, h5, h6, 
.table-section h4, 
.module h4, 
.blurbs h4, 
.section h4 {
  font-family: 'Press Start 2P', cursive !important;
  color: #ff3333 !important;
  text-shadow: 2px 2px 0px #000000, 0 0 10px rgba(255, 0, 0, 0.7) !important;
  letter-spacing: 1px;
}

/* ==========================================================================
   2. HERO BANNER & NAVIGATION
   ========================================================================== */
/* Header Banner: Classic RE Franchise Animated Collage */
main::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  background-image: url('https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGEwMThvbGxkaHd4YWxiYjEzZnF2ZDl5emoyZzRoNW1pMm5hNHVyaCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/S9gCTpB8SInEQ/giphy.gif') !important;
  background-size: cover !important;
  background-position: center center !important;
  border-bottom: 3px solid #cc0000 !important;
  box-shadow: 0 4px 15px rgba(204, 0, 0, 0.5);
}

/* Nav Bar: Deep Dark Mesh + Crimson Accent Line */
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
  background-color: #0d0d0d !important;
  background-image: url("https://i.pinimg.com/1200x/be/cb/64/becb640ee2ddde2d2a7a220033a88ed0.jpg") !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  border-bottom: 2px solid #8b0000 !important;
}

.myspace-header .main-nav li a {
  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.75rem !important;
}

.myspace-header .main-nav li a:hover {
  color: #ff3333 !important;
  text-shadow: 0 0 8px #ff0000 !important;
}

/* ==========================================================================
   3. PROFILE & AVATAR FRAME
   ========================================================================== */
.profile {
  background-image: url("https://media.giphy.com/media/v1.Y2lkPWVjZjA1ZTQ3NGJ6NGc2aGVxcW42YXc2bnZpcnVwOGRxMnJhbWtxYTV2cjF0NzJkNCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/ftfVpeWsm95QgGfOZ8/giphy.gif") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top center !important;
}

.profile-pic {
  position: relative;
  width: 180px;
  height: 180px;
  display: inline-block;
  overflow: hidden;
  border: 2px solid #ff3333;
  box-shadow: 0 0 12px rgba(255, 51, 51, 0.6);
}

.profile-pic img {
  position: absolute;
  top: 8% !important;
  left: 8% !important;
  width: 84% !important;
  height: 84% !important;
  object-fit: cover;
  z-index: 1;
  border-radius: 4px !important;
}

.profile-pic::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://friendrewind.com/uploads/gallery/1/img_69704d3bc43999.36134691.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   4. MODULE CONTAINERS & ANIMATIONS
   ========================================================================== */
/* Glowing Biohazard Pulse Effect for Modules */
@keyframes bioGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(204, 0, 0, 0.4), inset 0 0 5px rgba(0, 0, 0, 0.8); }
  50% { box-shadow: 0 0 18px rgba(255, 0, 0, 0.8), inset 0 0 10px rgba(139, 0, 0, 0.5); }
}

.table-section, 
.friends, 
.blurbs, 
.module, 
.profileInfo,
.contact,
.interests,
.url-info {
  background-color: rgba(15, 15, 18, 0.92) !important;
  border: 2px solid #8b0000 !important;
  border-radius: 4px !important;
  animation: bioGlow 3s infinite ease-in-out !important;
}

/* Contact / Warning Module Unique Pulse */
@keyframes warningPulse {
  0%, 100% { transform: scale(1); border-color: #ff3333; }
  50% { transform: scale(1.02); border-color: #ffcc00; }
}

.contact {
  animation: warningPulse 2.5s infinite ease-in-out !important;
}

/* Header Bars inside Modules */
.table-section .heading, 
.friends .heading, 
.blurbs .heading, 
.section .heading, 
.module .heading, 
.profileInfo .heading,
.interests .heading {
  background-color: #4a0000 !important;
  color: #ffffff !important;
  font-family: 'Press Start 2P', cursive !important;
  font-size: 0.8rem !important;
  border-bottom: 2px solid #8b0000 !important;
  padding: 6px !important;
}

.contact .heading {
  background-color: #8b0000 !important;
  color: #ffcc00 !important;
  font-family: 'Press Start 2P', cursive !important;
  font-size: 0.8rem !important;
}

.profile, 
.table-section, 
.module, 
.blurbs, 
.section, 
.profileInfo, 
.friend-space, 
.badges-section, 
.url-info, 
.contact, 
.interests {
  color: #d1d5db !important;
}

/* ==========================================================================
   5. FANDOM & CHARACTER BACKGROUND GIFS FOR MODULES
   ========================================================================== */
/* Contact Box: Umbrella Corp Logo / Glitch GIF Overlay */
.contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGEwMThvbGxkaHd4YWxiYjEzZnF2ZDl5emoyZzRoNW1pMm5hNHVyaCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/8LKb9mwpkvddwknHTB/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* URL Info / Details: Save Typewriter / Ink Ribbon Vibe */
.url-info {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGEwMThvbGxkaHd4YWxiYjEzZnF2ZDl5emoyZzRoNW1pMm5hNHVyaCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/4NkvL7F4bGtA58TBaz/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Profile Blurbs: Raccoon City Police Dept (RPD) Ambient Fog */
.blurbs {
  background-image: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)), 
                    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaDgxbGN3djh0cDc1cmYyODluOTNkdTcxYmZ6b3loNXV5aTV4eHlmZCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/RI42LtoMA5mxi/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Friend Space: Classic RE Character Collage / Action Shots */
.friends {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHNwdnJieXY4cGFtbmFlOWo4ajNqNDF3Nmp5Z200MnZveW92MWhobiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/3b5FC8Oqkvev6ZpDF9/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Music Player / Tunes Box: ECG Health Meter Loop */
.tunes {
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), 
                    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXBxOHdkMW4yNzRhZzZ5ZHc3aDJ1Y256Y3U2ZHNtNmkwczlzM243OCZlcD12MV9naWZzX3NlYXJjaCZjdD1n/ZKw0NDn10ljSE/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Blog / Table Sections: Spooky Corridor Visuals */
.table-section, 
.blog-preview {
  background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), 
                    url("https://media.giphy.com/media/v1.Y2lkPWVjZjA1ZTQ3bzJhbnRiZ25nNHl5ajg2OTZxOG5nNWw2ODQ2aDV1b3QyNmw0bGNlaSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/FFevI1AfTabHohd0O4/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Comments Box & Comment Cells: Biohazard Warning Glitch Overlay */
#comments, 
.comments-table td {
  background-image: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), 
                    url("https://media.giphy.com/media/v1.Y2lkPWVjZjA1ZTQ3eHViemI0NmZ1YWt0N25objk4NGkyMm1laTlnZHUyNnNwb3FwcDJ4cSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/Vhi87PgHro6D2VGTxy/giphy.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
}

.videos-preview { display: none; }

.photos-preview { display: none; }

/* ==========================================================================
   6. SCROLLABLE COMMENTS BOX
   ========================================================================== */
#comments {
  max-height: 315px !important; /* Adjust this height value as needed to align with Interests */
  overflow-y: auto !important;
  display: block !important;
}

/* Custom Scrollbar to match the Resident Evil Red Theme */
#comments::-webkit-scrollbar {
  width: 8px;
}

#comments::-webkit-scrollbar-track {
  background: #0d0d0d;
}

#comments::-webkit-scrollbar-thumb {
  background: #8b0000;
  border-radius: 2px;
}

#comments::-webkit-scrollbar-thumb:hover {
  background: #ff3333;
}
</style></style>