Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Rainbow Skies

Author: Def3ct
Category: Colors
Created: June 17, 2025
Comments (0)

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

<style>
/* -- (1) THEME VARIABLES -- */
:root {
    /* New background image and the GIF for the overlay */
    --static-background-image: url('https://friendrewind.com/static/uploads/imageb/img_68512439cde782.23962586.jpg');
    --gif-overlay-image: url('https://i.gifer.com/ZNeT.gif');

    --background-color: #000;
    --primary-text-color: #f0f0f0;
    --container-bg-color: rgba(10, 0, 20, 0.75);
    --heading-font: 'Courier New', Courier, monospace;
    --body-font: 'Arial', sans-serif;
}

/* -- (2) KEYFRAME ANIMATIONS (UNCHANGED) -- */
@keyframes colorCycle {
  0%   { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; border-color: #00ffff;}
  25%  { color: #00ffff; text-shadow: 0 0 10px #00ffff; border-color: #ffff00;}
  50%  { color: #ffff00; text-shadow: 0 0 10px #ffff00; border-color: #00ff00;}
  75%  { color: #00ff00; text-shadow: 0 0 10px #00ff00; border-color: #ff00ff;}
  100% { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; border-color: #00ffff;}
}
@keyframes intenseGlow {
  0%   { box-shadow: 0 0 5px #00e5ff, inset 0 0 3px #00e5ff; }
  50%  { box-shadow: 0 0 25px #fff, inset 0 0 10px #fff; }
  100% { box-shadow: 0 0 5px #00e5ff, inset 0 0 3px #00e5ff; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(3px, -2px) rotate(0.5deg); }
  50% { transform: translate(-2px, 2px) rotate(-0.5deg); }
  75% { transform: translate(1px, -3px) rotate(0.2deg); }
}
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 50px; }
}
@keyframes aggressiveFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* -- (3) CORE PAGE SETUP - NEW LAYERED BACKGROUND -- */

/* The static image is now the base background for the entire page */
html {
    background-color: var(--background-color) !important;
    background-image: var(--static-background-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

body {
    background: transparent !important; /* Body must be transparent to see the HTML background */
    font-family: var(--body-font) !important;
    color: var(--primary-text-color) !important;
    position: relative; /* Needed for z-index stacking of pseudo-elements */
}

/* NEW: GIF overlay pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--gif-overlay-image);
    background-size: cover;
    background-position: center;
    opacity: 0.4; /* Lower opacity to make it a subtle overlay */
    z-index: -2; /* Sits on top of the html background */
}

/* NEW: Scanlines pseudo-element, layered on top of the GIF */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: repeating-linear-gradient(transparent 0, rgba(0,0,0,0.5) 2px, transparent 4px);
    pointer-events: none;
    z-index: -1; /* Sits on top of the GIF overlay */
    animation: scanlines 0.2s linear infinite;
}

/* Force containers to be transparent so all background layers show through */
.master-container, .container, main, .row, .col {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* -- (4) OVER-ANIMATED MODULES -- */
.contact, .blurbs, .friends, #comments, .table-section, .blog-preview, .url-info {
    background-color: var(--container-bg-color) !important;
    border: 3px solid;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 25px !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    position: relative; /* Ensures modules sit on top of all background layers */
    z-index: 1;

    animation: 
        intenseGlow 2s ease-in-out infinite, 
        aggressiveFloat 8s ease-in-out infinite,
        colorCycle 5s linear infinite reverse,
        shake 10s linear infinite;
}
.friends { animation-duration: 2s, 7s, 4s, 11s; }
.blurbs { animation-duration: 2.2s, 9s, 5.5s, 9s; }
#comments { animation-duration: 1.8s, 6s, 4.8s, 12s; }

.profile-pic img {
    border-radius: 50% !important;
    animation: 
        spin 5s linear infinite,
        intenseGlow 1.5s ease-in-out infinite;
}

/* -- (5) HEADINGS & TEXT (UNCHANGED) -- */
.contact .heading, .blurbs .heading, .friends .heading, 
#comments .heading, .table-section .heading h4, .blog-preview h4 {
    font-family: var(--heading-font) !important;
    font-size: 1.5rem !important;
    text-align: center !important;
    background: none !important;
    border: none !important;
    font-weight: bold !important;
    animation: colorCycle 4s linear infinite;
}
a {
    font-weight: bold;
    text-decoration: none !important;
    animation: colorCycle 3s linear infinite reverse;
    transition: all 0.2s;
}
a:hover {
    transform: scale(1.1);
    animation: 
        colorCycle 3s linear infinite reverse,
        shake 0.3s linear infinite;
}
.online {
    content: url("https://i.gifer.com/origin/e1/e1b0682a83e0e37768565c8223630c72_w200.gif");
    height: 25px;
    width: 25px;
    animation: spin 1s linear infinite;
}</style>