Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Nature Aesthetic

Author: Def3ct
Category: Aesthetic
Created: June 28, 2025
Comments (0)

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

<style>
/* Import a fitting, elegant font */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

/* --- 1. THEME VARIABLES & KEYFRAMES -- */
:root {
    --font-ocean: 'Lora', serif;
    
    /* Deep Sea Colors */
    --abyss-black: #010314;
    --abyss-blue: #0A143B;
    --text-light: #E0F7FA;
    --glow-cyan: #40E0D0;
    --glow-magenta: #C92C6D;
    --glow-green: #7FFF00;

    --container-bg-color: rgba(10, 20, 59, 0.7);
}

/* Floating particles (plankton/bubbles) */
@keyframes float {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

/* The main creature drifting across the screen */
@keyframes drift {
    0% { transform: translate(110vw, 80vh) rotate(0deg) scale(0.8); }
    25% { transform: translate(60vw, 30vh) rotate(20deg) scale(1); }
    50% { transform: translate(20vw, 60vh) rotate(-10deg) scale(1.2); }
    75% { transform: translate(-20vw, 20vh) rotate(5deg) scale(1); }
    100% { transform: translate(-120vw, 70vh) rotate(0deg) scale(0.8); }
}

/* The gentle pulse of bioluminescence */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px 2px var(--glow-cyan); opacity: 0.8; }
    50% { box-shadow: 0 0 25px 5px var(--glow-cyan); opacity: 1; }
}

/* The "breathing" animation for containers */
@keyframes breathe {
    0%, 100% { border-radius: 40% 60% 70% 30% / 30% 50% 50% 70%; }
    50% { border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%; }
}

/* Text wavering effect */
@keyframes waver {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(2deg); }
}

/* --- 2. BASE STYLES & DEEP SEA ATMOSPHERE --- */
body {
    background-color: var(--abyss-black) !important;
    background-image: url('https://w.wallhaven.cc/full/6l/wallhaven-6lqpk6.jpg') !important; /* Animated caustics */
    background-attachment: fixed !important;
    background-size: cover !important;
    font-family: var(--font-ocean) !important;
    font-size: 16px !important;
    color: var(--text-light) !important;
    text-shadow: 0 0 5px rgba(64, 224, 208, 0.5);
    position: relative;
    overflow: hidden !important; /* CRITICAL for preventing scrollbars from animations */
}

/* Layer 2: Floating Particles */
body::before {
    content: '' !important;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Using box-shadows to create dozens of particles without extra elements */
    box-shadow: 
        10vw 80vh 1px 1px var(--glow-cyan), 90vw 20vh 1px 1px var(--glow-green),
        50vw 50vh 2px 2px var(--glow-magenta), 20vw 10vh 2px 2px var(--text-light),
        80vw 30vh 1px 1px var(--glow-green), 30vw 90vh 1px 1px var(--glow-cyan),
        5vw 40vh 2px 2px var(--glow-magenta), 60vw 5vh 1px 1px var(--text-light),
        70vw 60vh 1px 1px var(--glow-green), 45vw 75vh 2px 2px var(--glow-cyan);
    animation: float 25s linear infinite;
    z-index: 10;
    pointer-events: none;
}

/* Layer 3: Drifting Jellyfish (replaces corner gif) */
body::after {
    content: '' !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 250px !important; height: 250px !important;
    background: url('https://bestanimations.com/media/jellyfish/1798369322glowing-jellyfish-animated-gif-14.gif') no-repeat center center / contain !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 0.7;
    animation: drift 45s linear infinite;
}

main, .container, .master-container { background: none !important; border: none !important; box-shadow: none !important; position: relative; z-index: 100; }

* { cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat997.cur), auto !important; }

/* --- 4. THEMED MODULE CONTAINERS (LIVING CORAL) --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 3px solid var(--glow-cyan) !important;
    background: var(--container-bg-color) !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    position: relative !important;
    backdrop-filter: blur(8px) !important;
    animation: breathe 15s infinite ease-in-out, pulseGlow 8s infinite ease-in-out !important;
    transition: all 0.5s ease;
}
.contact:hover, .url-info:hover, .table-section:hover, .tunes:hover, .blog-preview:hover, .blurbs:hover, .friends:hover, #comments:hover {
    border-color: var(--glow-magenta) !important;
    transform: scale(1.02);
}

/* --- 6. THEMED HEADERS --- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    color: var(--text-light) !important;
    font-weight: bold !important;
    font-size: 26px !important;
    text-shadow: 0 0 8px var(--glow-cyan) !important;
    padding: 15px !important;
    margin: 0 !important;
    border-bottom: 2px solid var(--glow-cyan) !important;
    text-align: center !important;
    background: linear-gradient(rgba(10, 20, 59, 0.5), transparent) !important;
    font-style: italic;
    animation: waver 5s infinite ease-in-out;
}

/* --- 7. CONTENT & LINKS --- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner,
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 20px !important;
    line-height: 1.8;
}

a { color: var(--glow-cyan) !important; text-decoration: none !important; transition: all 0.3s ease !important; }
a:hover { color: var(--glow-magenta) !important; text-shadow: 0 0 10px var(--glow-magenta) !important; letter-spacing: 1px; }

/* --- 8. FRIENDS GRID (BUBBLES) --- */
.friends-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px; }
.friends-grid img {
    max-width: 80px !important;
    border-radius: 50% !important;
    padding: 5px !important;
    background: rgba(64, 224, 208, 0.2) !important;
    border: 2px solid rgba(64, 224, 208, 0.5) !important;
    box-shadow: 0 0 15px rgba(64, 224, 208, 0.5), inset 0 0 10px rgba(224, 247, 250, 0.3);
    transition: all 0.5s ease;
}
.friends-grid img:hover { transform: scale(1.1) translateY(-10px) !important; background: rgba(201, 44, 109, 0.3) !important; border-color: var(--glow-magenta); }

/* --- 9. THEMED TABLES (DEEP SEA VENTS) --- */
.details-table { border: 2px solid var(--glow-cyan); border-radius: 10px; overflow: hidden; }
.details-table th, .details-table td { border: 1px solid rgba(64, 224, 208, 0.3) !important; }
.details-table th { background: var(--glow-cyan) !important; color: var(--abyss-black) !important; text-shadow: none !important; }
.details-table tr:nth-child(even) td { background-color: rgba(10, 20, 59, 0.5) !important; }

/* --- 10. SCROLLBARS (BUBBLE STREAM) --- */
::-webkit-scrollbar { width: 15px !important; }
::-webkit-scrollbar-track { background: var(--abyss-black) !important; }
::-webkit-scrollbar-thumb { background: var(--glow-cyan) !important; border-radius: 20px; box-shadow: 0 0 10px var(--glow-cyan); }

/* --- 11. HEADER & NAVIGATION (CORAL REEF) --- */
.main-header, .myspace-header {
    background: rgba(10, 20, 59, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    border-radius: 50px !important;
    margin: 20px auto !important;
    padding: 10px !important;
    box-shadow: 0 0 20px var(--glow-cyan);
}</style>