← Back to Layouts
MY AWESOME ABYSS

Name: FriendRewind
Author: FriendRewind
Author: Abyssal_ink
Category: Classic
Created: November 11, 2026
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>
/* =========================================
   THE ABYSS — FRIENDREWIND THEME
   Inspired by abyssalink.neocities.org
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=UnifrakturCook:wght@700&display=swap');

/* COLOUR PALETTE */

:root {
    --abyss-black: #05080e;
    --abyss-dark: #080d16;
    --abyss-panel: #0a101b;
    --abyss-blue: #263b50;
    --abyss-muted: #66849e;
    --abyss-text: #c5dbea;
    --abyss-bright: #a9d4ed;
}

/* PAGE BACKGROUND */

body.profile-page {
    background: var(--abyss-black) !important;
    color: var(--abyss-text) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 14px;
    line-height: 1.7;
}

/* MAIN PROFILE CONTAINER */

body.profile-page .master-container {
    background: transparent !important;
    max-width: 1100px !important;
    box-shadow: none !important;
    border: none !important;
}

/* NAVIGATION */

body.profile-page nav {
    background: #05080e !important;
    border-bottom: 1px solid var(--abyss-blue) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

body.profile-page nav .top,
body.profile-page nav .links {
    background: #080d16 !important;
    border-color: var(--abyss-blue) !important;
}

body.profile-page nav a {
    color: var(--abyss-muted) !important;
    text-decoration: none !important;
    letter-spacing: 1px;
}

body.profile-page nav a:hover {
    color: var(--abyss-bright) !important;
    text-shadow: 0 0 8px #477b9d;
}

/* PROFILE COLUMNS */

body.profile-page .col {
    color: var(--abyss-text) !important;
}

/* ALL SECTION BOXES */

body.profile-page .section,
body.profile-page .contact,
body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .general-about,
body.profile-page .url-info,
body.profile-page .table-section,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .comments-table {
    background: var(--abyss-panel) !important;
    border: 1px solid var(--abyss-blue) !important;
    border-radius: 0 !important;
    color: var(--abyss-text) !important;
    box-shadow: 0 0 14px rgba(31, 75, 105, 0.08);
}

/* SECTION HEADINGS */

body.profile-page .heading {
    background: transparent !important;
    border-bottom: 1px dashed var(--abyss-blue) !important;
    padding: 10px 12px !important;
}

body.profile-page .heading h1,
body.profile-page .heading h4 {
    color: var(--abyss-muted) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    font-weight: normal !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
}

/* GOTHIC PROFILE NAME */

body.profile-page h1 {
    color: var(--abyss-bright) !important;
    font-family: 'UnifrakturCook', cursive !important;
    text-shadow: 0 0 12px rgba(105, 170, 210, 0.25);
}

/* GENERAL TEXT */

body.profile-page p,
body.profile-page td,
body.profile-page li,
body.profile-page .section {
    font-family: 'Share Tech Mono', monospace !important;
}

body.profile-page a {
    color: #91b9d5 !important;
    text-decoration: none !important;
}

body.profile-page a:hover {
    color: #d2edff !important;
    text-shadow: 0 0 7px rgba(105, 170, 210, 0.45);
}

/* PROFILE PICTURE */

body.profile-page .profile-pic img {
    border: 1px solid var(--abyss-blue) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 15px rgba(67, 119, 155, 0.15);
}

/* STATUS */

body.profile-page .mood,
body.profile-page .online,
body.profile-page .offline,
body.profile-page .last-login {
    color: var(--abyss-muted) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

/* TABLES */

body.profile-page .details-table td,
body.profile-page .comments-table td {
    background: transparent !important;
    color: var(--abyss-text) !important;
    border-color: var(--abyss-blue) !important;
}

body.profile-page .details-table td:first-child {
    color: var(--abyss-muted) !important;
}

/* FRIEND GRID */

body.profile-page .friends-grid img,
body.profile-page #top8-grid img {
    border: 1px solid var(--abyss-blue) !important;
    border-radius: 0 !important;
    filter: saturate(0.75);
    transition: 0.3s ease;
}

body.profile-page .friends-grid img:hover,
body.profile-page #top8-grid img:hover {
    filter: saturate(1);
    box-shadow: 0 0 10px rgba(105, 170, 210, 0.35);
}

/* BUTTONS */

body.profile-page button,
body.profile-page input[type="submit"],
body.profile-page .button {
    background: #0a1420 !important;
    color: var(--abyss-bright) !important;
    border: 1px solid var(--abyss-blue) !important;
    border-radius: 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 1px;
    padding: 7px 12px;
}

body.profile-page button:hover,
body.profile-page input[type="submit"]:hover {
    background: #132235 !important;
    box-shadow: 0 0 10px rgba(105, 170, 210, 0.2);
}

/* COMMENTS */

body.profile-page #comments {
    background: var(--abyss-panel) !important;
    border: 1px solid var(--abyss-blue) !important;
}

body.profile-page .cb-author-name {
    color: var(--abyss-bright) !important;
}

body.profile-page .cb-content-cell {
    color: var(--abyss-text) !important;
}

/* MUSIC PLAYER */

body.profile-page .music-bar {
    background: #080d16 !important;
    border-top: 1px solid var(--abyss-blue) !important;
}

body.profile-page .music-bar::before {
    display: none !important;
}

body.profile-page .music-bar .bar-title,
body.profile-page .bar-now-playing {
    color: var(--abyss-text) !important;
}

body.profile-page .bar-progress {
    background: #1a2b3c !important;
}

body.profile-page .bar-progress-fill {
    background: #6c9bb9 !important;
}

body.profile-page .music-bar .bar-btn {
    color: var(--abyss-bright) !important;
    background: transparent !important;
}

body.profile-page .volume-slider {
    background: #263b50 !important;
}

/* PROFILE PLAYLIST */

body.profile-page .profile-playlist-widget {
    background: var(--abyss-panel) !important;
    border: 1px solid var(--abyss-blue) !important;
    color: var(--abyss-text) !important;
}

body.profile-page .profile-playlist-widget h3 {
    color: var(--abyss-muted) !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 2px !important;
}

body.profile-page .profile-playlist-widget li.current .song-info {
    color: var(--abyss-bright) !important;
}

body.profile-page .pp-equalizer span {
    background: #78a9c5 !important;
}

/* TEXT SELECTION */

body.profile-page ::selection {
    background: #29455f;
    color: #e3f5ff;
}

/* SCROLLBAR */

body.profile-page ::-webkit-scrollbar {
    width: 8px;
}

body.profile-page ::-webkit-scrollbar-track {
    background: #05080e;
}

body.profile-page ::-webkit-scrollbar-thumb {
    background: #263b50;
    border: 1px solid #080d16;
}

/* MOBILE */

@media (max-width: 700px) {
    body.profile-page .master-container {
        width: 100% !important;
        padding: 8px !important;
    }

    body.profile-page .section {
        margin-bottom: 12px;
    }
}
</style>