Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Gloomy Bear </3

Author: xXtoxinXx
Category: Characters
Created: June 14, 2026
Simple gloomy bear theme with falling gloomies and custom gloomy online graphic
Comments (0)

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

<style>
<div class="skull-rain s1"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s2"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s3"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s4"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s5"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>

<div class="skull-rain s1" style="animation-delay: -2s;"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s2" style="animation-delay: -5s;"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>
<div class="skull-rain s3" style="animation-delay: -8s;"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>

<div class="custom-banner">
    <img src="https://64.media.tumblr.com/adddd625dfe777dc1ad1fe3da2d25132/00679c7766889ce3-d4/s1280x1920/63ddf9236f433b5a3a48c759779eff5f5c400477.gifv" alt="Banner">
</div>
<style>
/* -- 1. THEME VARIABLES -- */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --font: 'New Rocker';
    --heading-font: 'Creepster', serif;
    
    --bold: #ff9ee0;
    --dark-red: #f936b5;
    --deep-black: #050505;
    --off-white: #e0e0e0;

    --container-bg-color: rgba(10, 10, 10, 0.9);
    --text-color: #cccccc;
}

/* --- 2. RESET & BASE STYLES --- */
  
 body, body * {
    color: var(--text-color) !important;
    font-family: var(--font) !important;
}
 
.master-container {
  max-width: 650px;
  }
body {
    background-color: #000 !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3392/3392924j7rio9a2io.gif') !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    font-family: var(--font) !important;
    font-size: 14px !important;
    color: var(--text-color) !important;
    line-height: 1.5 !important;
}

/* --- 4. THEMED MODULE CONTAINERS --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 3px solid var(--bold) !important;
    border-radius: 0px !important;
    background: var(--container-bg-color) !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading, .heading h4, h1 {
    font-family: var(--heading-font) !important;
    color: #fff !important;
    font-size: 24px !important;
    text-shadow: none !important;
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 15px !important;
    background: var(--blood-red) !important;
    border-bottom: 3px solid #000 !important;
    text-align: left !important;
  background-image: url('https://i3.glitter-graphics.org/pub/2181/2181393ogvc7fn2ia.png') !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}

a {
    color: var(--bold) !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

a:hover {
    color: #ff51c5 !important;
}

.friends-grid img {
    border: 2px solid var(--bold) !important;
    border-radius: 0px !important;
    background: #000 !important;
}

.details-table {
    border: 2px solid var(--bold) !important;
    background: #111 !important;
}
.details-table th, .details-table td {
    border: 1px solid var(--dark-red) !important;
}
.details-table th {
    background: var(--dark-red) !important;
    font-family: var(--heading-font) !important;
}

.main-header, .myspace-header {
    background: #000 !important;
    border: 3px solid var(--bold) !important;
    border-radius: 0px !important;
}

.main-nav a {
    font-family: var(--font) !important;
    color: var(--off-white) !important;
    background: #1a0000 !important;
}

.main-nav a:hover {
    background: var(--bold) !important;
}
  
.comments-table {
    background-color: transparent !important;
    border: 1px solid var(--bold) !important;
}

.cb-author-cell {
    background-color: #0a0a0a !important;
    border-right: 1px solid var(--bold) !important;
    color: var(--off-white) !important;
    font-family: var(--goth-font) !important;
}

.cb-content-cell {
    background-color: #141414 !important;
    color: var(--off-white) !important;
    font-family: var(--goth-font) !important;
}

.cb-actions a, .cb-reply-form input[type="submit"], .cb-actions button {
    background-color: #1a0000 !important;
    border: 1px solid var(--bold) !important;
    color: var(--off-white) !important;
    font-family: var(--goth-font) !important;
    padding: 2px 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.cb-actions a:hover, .cb-reply-form input[type="submit"]:hover {
    background-color: var(--bold) !important;
    color: #ffffff !important;
}

.cb-content-cell p {
    color: var(--off-white) !important;
}
  
.myspace-header, .top-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

#site-logo-link {
    display: flex !important;
    justify-content: center !important;
    padding-bottom: 10px !important;
}

.main-nav a, .nav a {
    background: transparent !important;
    border: none !important;
    color: var(--off-white) !important;
    font-family: var(--goth-font) !important;
    text-shadow: 1px 1px 2px #000 !important;
    padding: 5px 10px !important;
}

.main-nav a:hover {
    color: var(--bold) !important;
    background: transparent !important;
}

.main-nav-wrapper, 
.main-nav-container, 
.main-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main-nav li {
    background: transparent !important;
    border: none !important;
}

.main-nav a {
    font-family: var(--goth-font) !important;
    color: var(--off-white) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 10px !important;
    transition: color 0.2s ease !important;
}

.main-nav a:hover {
    color: var(--bold) !important;
}

.main-nav .dropdown > a {
    color: var(--off-white) !important;
}
  
  .profile-playlist-widget {
    background: transparent !important;
    border: none !important;
}

.pp-header {
    background: var(--bold) !important;
    border-bottom: 3px solid #000 !important;
    padding: 10px !important;
}

.pp-header h3 {
    font-family: var(--heading-font) !important;
    color: #fff !important;
    margin: 0 !important;
    font-size: 20px !important;
}

.pp-help-btn {
    background: #000 !important;
    color: var(--bold) !important;
    border: 1px solid var(--bold) !important;
    font-family: var(--font) !important;
    cursor: pointer !important;
}

.profile-playlist-widget ul {
    background: rgba(10, 10, 10, 0.9) !important;
    border: 3px solid var(--bold) !important;
    border-top: none !important;
    padding: 10px !important;
    margin: 0 !important;
}

.profile-playlist-empty {
    color: var(--text-color) !important;
    font-family: var(--font) !important;
    list-style: none !important;
}
  
  footer[role="contentinfo"] {
    background: transparent !important;
    padding: 20px !important;
    text-align: center !important;
    border-top: 3px solid var(--boldd) !important;
    margin-top: 40px !important;
}

footer a {
    color: var(--bold) !important;
    font-family: var(--font) !important;
    text-decoration: none !important;
}

footer a:hover {
    color: #ff51c5 !important;
    text-decoration: underline !important;
}

footer nav ul.links {
    list-style: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 0 !important;
}

footer nav ul.links li a {
    font-size: 12px !important;
}

footer p.copyright {
    color: var(--text-color) !important;
    font-family: var(--font) !important;
    margin-top: 10px !important;
    font-size: 11px !important;
}
  
.online img {
    height: 1.5em !important;
    margin-right: 5px !important;
    animation: none !important;
    content: url('https://i4.glitter-graphics.org/pub/2114/2114564qztfwew91t.png') !important;
}

  .person img.pfp-fallback {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}

.person:hover img.pfp-fallback {
    filter: grayscale(0%) !important;
}
  
  .person img.pfp-fallback,
img.cb-pfp-img {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}

.person:hover img.pfp-fallback,
.cb-author-link:hover img.cb-pfp-img {
    filter: grayscale(0%) !important;
}
  
  body::after {
    content: '' !important;
    position: fixed !important;
    bottom: 50px !important;
    right: 50px !important;
    width: 300px !important;
    height: 300px !important;
    background-image: url('https://gloomy-poison.neocities.org/spookycute_graphics/gloomyglittergifwithgrey.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}
  
.skull-rain {
    position: fixed;
    top: -50px;
    font-size: 20px;
    user-select: none;
    pointer-events: none;
    z-index: 9997;
}

@keyframes rain {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

.s1 { left: 10%; animation: rain 8s linear infinite; }
.s2 { left: 30%; animation: rain 12s linear infinite; }
.s3 { left: 55%; animation: rain 10s linear infinite; }
.s4 { left: 80%; animation: rain 15s linear infinite; }
.s5 { left: 95%; animation: rain 9s linear infinite; }
  
  .custom-banner {
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    border: 3px solid var(--blood-red) !important;
    background: #000 !important;
    overflow: hidden !important;
}

.custom-banner img {
    width: 100% !important;
    display: block !important;
}
</style></style>