← Back to Layouts
EmyVox1

Name: FriendRewind
Author: FriendRewind
Author: EmyVox
Category: :D
Created: August 16, 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>

/* =========================================================
   EMYVOX — FRIENDREWIND CUSTOM LAYOUT
   =========================================================

   This stylesheet is designed to work WITH FriendRewind's
   existing profile HTML.

   You should only need to edit this one file.

   QUICK CUSTOMIZATION:
   --red        = main red
   --acid       = acid green
   --black      = darkest background
   --panel      = section background
   --text       = normal text
   --radius     = rounded corner amount

   ========================================================= */


/* =========================================================
   01 — EASY SETTINGS
   ========================================================= */

:root {

    /* Main colors */
    --black: #050505;
    --dark: #0b0b0b;
    --panel: #111111;

    --red: #f70814;
    --acid: #16e500;

    --white: #ffffff;
    --grey: #9b9b9b;

    /* Text */
    --text: #16e500;
    --heading: #ffffff;

    /* Borders */
    --border: #16e500;
    --border-width: 1px;
    --radius: 6px;

    /* Typography */
    --font: 'Space Mono', monospace;

    /* Effects */
    --shadow: 0 0 12px rgba(22,229,0,0.15);
}


/* =========================================================
   02 — FONT
   ========================================================= */

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


/* =========================================================
   03 — GLOBAL RESET
   ========================================================= */

* {
    box-sizing: border-box;
    cursor: url(https://friendrewind.com/uploads/gallery/16974/img_6a49a2dad3e960.76251976.webp), auto !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body,
body.profile-page {
    font-family: var(--font) !important;
    color: var(--text) !important;

    background-color: var(--black) !important;

    background-image:
        url("https://friendrewind.com/uploads/gallery/16974/img_6a49a37fbe18c2.36505359.webp") !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
}


/* =========================================================
   04 — GRAIN / OLD INTERNET TEXTURE
   ========================================================= */

html::before {
    content: "";

    position: fixed;

    top: -100%;
    left: -50%;

    width: 300%;
    height: 300%;

    background-image:
        url('https://friendrewind.com/uploads/gallery/16974/img_6a49a2ea8f9208.06820241.gif');

    opacity: 0.20;

    pointer-events: none;

    animation: emyGrain 8s steps(10) infinite;

    z-index: 9999;
}

@keyframes emyGrain {

    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%);
    }
}


/* =========================================================
   05 — MAIN PAGE CONTAINER
   ========================================================= */

main {
    position: relative;
}


/* =========================================================
   06 — HERO / HEADER IMAGE
   ========================================================= */

main::before {

    content: "";

    display: block;

    width: 100%;

    height: 300px;

    background-image:
        url('https://friendrewind.com/media/photos/photo-83f736a2426b9e78.webp');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border-bottom:
        2px solid var(--acid);

    box-shadow:
        0 4px 20px rgba(0,0,0,0.8);
}


/* =========================================================
   07 — NAVIGATION
   ========================================================= */

.myspace-header {

    background-color: #050505 !important;

    border-bottom:
        1px solid var(--acid) !important;

    box-shadow:
        0 2px 15px rgba(0,0,0,0.8);
}

.myspace-header .main-nav li a {

    color: var(--acid) !important;

    font-family: var(--font) !important;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition:
        color 0.15s ease,
        text-shadow 0.15s ease;
}

.myspace-header .main-nav li a:hover {

    color: var(--red) !important;

    text-shadow:
        0 0 8px rgba(247,8,20,0.7);
}


/* =========================================================
   08 — PROFILE ROW
   ========================================================= */

.profile {

    background-image:
        url("https://friendrewind.com/uploads/gallery/16974/img_6a49a3a4888816.98249761.webp") !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    border-bottom:
        1px solid var(--acid);

    color: var(--acid) !important;
}


/* =========================================================
   09 — PROFILE PICTURE
   ========================================================= */

.profile-pic {

    position: relative;

    width: 180px;

    height: 180px;

    display: inline-block;

    overflow: visible;

    flex-shrink: 0;
}


/* Actual photograph */

.profile-pic img {

    position: absolute;

    top: 8% !important;
    left: 8% !important;

    width: 84% !important;
    height: 84% !important;

    object-fit: cover !important;

    z-index: 1;

    border-radius: 12px !important;

    display: block;
}


/* Animated decorative frame */

.profile-pic::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-image:
        url('https://friendrewind.com/uploads/gallery/1/img_69704509ec8722.00496353.png');

    background-size: 100% 100%;

    background-repeat: no-repeat;

    background-position: center;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   10 — PROFILE NAME / BASIC INFORMATION
   ========================================================= */

.profile h1,
.profile h2,
.profile h3 {

    font-family: var(--font) !important;

    color: var(--white) !important;

    text-transform: uppercase;

    letter-spacing: 1px;

    text-shadow:
        3px 3px 0 #000;
}

.profile a {

    color: var(--red) !important;
}

.profile a:hover {

    color: var(--acid) !important;
}


/* =========================================================
   11 — GENERAL TEXT
   ========================================================= */

body,
.profile,
.profileInfo,
.friend-space,
.badges-section,
.url-info,
.contact,
.interests,
.table-section,
.module,
.blurbs,
.friends,
.section {

    color: var(--text) !important;

    font-family: var(--font) !important;
}


p {

    line-height: 1.65;
}


/* =========================================================
   12 — LINKS
   ========================================================= */

a {

    color: var(--red) !important;

    text-decoration: none;

    transition:
        color 0.15s ease,
        text-shadow 0.15s ease;
}

a:hover {

    color: var(--acid) !important;

    text-shadow:
        0 0 6px rgba(22,229,0,0.6);
}


/* =========================================================
   13 — CONTACT BOX
   ========================================================= */

.contact {

    background:
        rgba(5,5,5,0.95) !important;

    border:
        var(--border-width) solid var(--acid) !important;

    border-radius:
        var(--radius) !important;

    box-shadow:
        var(--shadow);

    overflow: hidden;
}


/* Contact header */

.contact .heading {

    background:
        var(--acid) !important;

    color:
        #050505 !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    padding:
        10px 12px !important;
}


/* Contact content */

.contact > *:not(.heading) {

    background:
        transparent !important;
}


/* Contact buttons / links */

.contact a {

    color:
        var(--acid) !important;

    font-weight:
        700;
}

.contact a:hover {

    color:
        var(--red) !important;
}


/* =========================================================
   14 — CONTENT BOX BASE
   ========================================================= */

.table-section,
.friends,
.blurbs,
.module,
.profileInfo,
.section,
.interests,
.url-info {

    background:
        rgba(5,5,5,0.94) !important;

    border:
        var(--border-width) solid var(--acid) !important;

    border-radius:
        var(--radius) !important;

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}


/* =========================================================
   15 — SECTION HEADERS
   ========================================================= */

.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading,
.interests .heading {

    background:
        var(--acid) !important;

    color:
        #050505 !important;

    font-family:
        var(--font) !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    padding:
        9px 12px !important;

    border:
        0 !important;
}


/* =========================================================
   16 — INTERESTS
   =========================================================

   This is where we give your General / Music / Movies /
   Television / Books / Heroes / Games content the
   card-like appearance.

   ========================================================= */


/* Main Interests container */

.interests {

    background:
        rgba(5,5,5,0.96) !important;

    border-color:
        var(--acid) !important;
}


/* Individual interest rows */

.interests tr {

    border-bottom:
        1px solid rgba(22,229,0,0.35) !important;

    transition:
        background 0.15s ease;
}


/* Last row */

.interests tr:last-child {

    border-bottom:
        none !important;
}


/* Category names */

.interests td:first-child {

    width:
        125px;

    min-width:
        125px;

    padding:
        13px 12px !important;

    color:
        var(--red) !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase;

    font-size:
        12px;

    letter-spacing:
        0.5px;

    vertical-align:
        top;
}


/* Category content */

.interests td:last-child {

    padding:
        13px 14px !important;

    color:
        var(--acid) !important;

    line-height:
        1.7;

    vertical-align:
        top;
}


/* Hover on individual interest */

.interests tr:hover {

    background:
        rgba(22,229,0,0.06) !important;
}


/* =========================================================
   17 — MUSIC SECTION
   ========================================================= */

.tunes {

    background-image:
        url("https://friendrewind.com/uploads/gallery/16974/img_6a49a32065b7d7.34924579.webp") !important;

    background-size:
        cover !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;
}


/* =========================================================
   18 — BIO / BLURBS
   ========================================================= */

.blurbs {

    background:
        rgba(5,5,5,0.95) !important;
}


/* Bio text */

.blurbs p {

    color:
        var(--acid) !important;

    line-height:
        1.8;

    font-size:
        14px;
}


/* =========================================================
   19 — URL INFO
   ========================================================= */

.url-info {

    background:
        rgba(5,5,5,0.95) !important;

    border-color:
        var(--acid) !important;
}

.url-info a {

    color:
        var(--red) !important;

    word-break:
        break-word;
}


/* =========================================================
   20 — FRIEND SPACE
   ========================================================= */

.friend-space {

    background:
        rgba(5,5,5,0.92) !important;

    border:
        1px solid var(--acid) !important;

    border-radius:
        var(--radius) !important;

    padding:
        12px !important;
}


/* Friend names */

.friend-space a {

    color:
        var(--acid) !important;

    font-weight:
        700;
}

.friend-space a:hover {

    color:
        var(--red) !important;
}


/* =========================================================
   21 — FRIENDS
   ========================================================= */

.friends {

    background:
        rgba(5,5,5,0.95) !important;

    border:
        1px solid var(--acid) !important;
}


/* Friend images */

.friends img {

    border:
        1px solid var(--acid);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.friends img:hover {

    transform:
        rotate(-2deg) scale(1.04);

    border-color:
        var(--red);
}


/* =========================================================
   22 — COMMENTS
   ========================================================= */

#comments {

    background-image:
        url("https://friendrewind.com/uploads/gallery/16974/img_6a49a335d5d223.61379095.webp") !important;

    background-size:
        cover !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    border:
        1px solid var(--acid) !important;

    border-radius:
        var(--radius) !important;

    box-shadow:
        var(--shadow);
}


/* Comment text area */

#comments textarea {

    background:
        #050505 !important;

    color:
        var(--acid) !important;

    border:
        1px solid var(--acid) !important;

    font-family:
        var(--font) !important;
}


/* =========================================================
   23 — TABLES
   ========================================================= */

table {

    border-collapse:
        collapse;
}

td,
th {

    border-color:
        rgba(22,229,0,0.35) !important;
}


/* =========================================================
   24 — BUTTONS
   ========================================================= */

button,
input[type="submit"],
input[type="button"] {

    background:
        #050505 !important;

    color:
        var(--acid) !important;

    border:
        1px solid var(--acid) !important;

    border-radius:
        4px !important;

    font-family:
        var(--font) !important;

    font-weight:
        700;

    cursor:
        pointer !important;

    transition:
        all 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {

    background:
        var(--acid) !important;

    color:
        #050505 !important;

    box-shadow:
        0 0 10px rgba(22,229,0,0.5);
}


/* =========================================================
   25 — INPUTS
   ========================================================= */

input,
textarea,
select {

    background:
        #050505 !important;

    color:
        var(--acid) !important;

    border:
        1px solid var(--acid) !important;

    font-family:
        var(--font) !important;
}


/* =========================================================
   26 — SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        10px;
}

::-webkit-scrollbar-track {

    background:
        #050505;
}

::-webkit-scrollbar-thumb {

    background:
        var(--acid);

    border:
        2px solid #050505;
}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--red);
}


/* =========================================================
   27 — SELECTION
   ========================================================= */

::selection {

    background:
        var(--acid);

    color:
        #050505;
}


/* =========================================================
   28 — IMAGE EFFECTS
   ========================================================= */

.table-section img,
.module img,
.blurbs img {

    max-width:
        100%;

    height:
        auto;
}


/* =========================================================
   29 — HIDE EMPTY SECTIONS
   =========================================================

   Keeps the profile from displaying giant empty boxes
   when a section doesn't contain anything.

   ========================================================= */

.friends:empty,
.blurbs:empty,
.module:empty {

    display:
        none;
}


/* =========================================================
   30 — SMALL SCREEN / MOBILE
   ========================================================= */

@media (max-width: 700px) {

    /* Smaller hero */

    main::before {

        height:
            180px;
    }


    /* Smaller avatar */

    .profile-pic {

        width:
            140px;

        height:
            140px;
    }


    /* Stack interest categories */

    .interests td:first-child {

        display:
            block;

        width:
            100%;

        min-width:
            0;

        padding-bottom:
            5px !important;
    }

    .interests td:last-child {

        display:
            block;

        width:
            100%;

        padding-top:
            5px !important;
    }


    /* Smaller section spacing */

    .table-section,
    .friends,
    .blurbs,
    .module,
    .profileInfo,
    .section,
    .interests,
    .contact {

        border-radius:
            4px !important;
    }
}


/* =========================================================
   31 — FINAL COLOR OVERRIDES
   ========================================================= */

.profile,
.table-section,
.module,
.blurbs,
.section,
.profileInfo,
.friend-space,
.badges-section,
.url-info,
.contact,
.interests {

    color:
        var(--acid) !important;
}


/* =========================================================
   END OF EMYVOX CUSTOM LAYOUT
   ========================================================= */

</style>