← Back to Layouts
Black and teal

Name: FriendRewind
Author: FriendRewind
Author: xxLostAt2AMxx
Category: :D
Created: August 3, 2026
Black and teal
Comments (0)

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

<style>
<style>
/* =========================================================
   BLACK + TEAL EMO / Y2K FRIENDREWIND LAYOUT
   ========================================================= */
/* ===== PAGE ===== */

html {
    background: #000 !important;
}

body {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0,207,200,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(0,207,200,.06),
            transparent 25%
        ),
        #000 !important;

    background-attachment: fixed !important;

    color: #eafafa !important;

    font-family:
        "Comic Neue",
        "Trebuchet MS",
        Arial,
        sans-serif !important;
}


/* ===== MAIN PROFILE ===== */

main,
.profile,
.profile-container,
.container,
.wrapper,
.content {
    background: #050707 !important;
    color: #eafafa !important;
}


/* ===== LINKS ===== */

a {
    color: #00d8d1 !important;
    text-decoration: none !important;
    transition: .2s ease;
}

a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px #00cfc8,
        0 0 10px #00cfc8,
        0 0 15px #00cfc8 !important;
}


/* ===== HEADINGS ===== */

h1,
h2,
h3,
h4,
h5,
.heading,
.title {
    color: #ffffff !important;

    font-family:
        "Comic Neue",
        "Trebuchet MS",
        cursive !important;

    font-weight: bold !important;
}


/* ===== PROFILE NAME ===== */

h1 {
    text-transform: uppercase !important;

    letter-spacing: 2px !important;

    text-shadow:
        0 0 4px #00cfc8,
        0 0 8px #00cfc8,
        0 0 15px #00cfc8 !important;
}


/* ===== SECTION HEADERS ===== */

.heading,
.section-header,
.box-header,
table th {

    background:
        linear-gradient(
            135deg,
            #00b8b2 0%,
            #007d79 46%,
            #080808 46%,
            #080808 100%
        ) !important;

    color: #ffffff !important;

    border-bottom:
        2px solid #00e5dd !important;

    padding: 7px 12px !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    text-shadow:
        0 0 4px #00cfc8,
        0 0 8px #00cfc8 !important;
}


/* ===== SECTIONS ===== */

.section {
    background: #090c0d !important;
    color: #eeeeee !important;

    border:
        2px solid #00aaa5 !important;

    margin-bottom: 18px !important;

    box-shadow:
        0 0 8px rgba(0,207,200,.15) !important;
}

.section > .inner {
    background: #090c0d !important;
    color: #eeeeee !important;
}


/* ===== CONTENT BOXES ===== */

.box,
.module,
.blurbs,
.friends,
.comments,
.blog,
.blogPreview,
.tableSection,
.urlInfo,
.contact {

    background: #090c0d !important;
    color: #eafafa !important;

    border:
        2px solid #00aaa5 !important;

    border-radius: 0 !important;

    box-shadow:
        0 0 8px rgba(0,207,200,.18) !important;
}


/* ===== PROFILE PHOTO ===== */

.profile-picture img,
.avatar img {

    border:
        3px solid #00cfc8 !important;

    border-radius:
        2px !important;

    box-shadow:
        5px 5px 0 #006f6b,
        0 0 10px #00cfc8,
        0 0 20px rgba(0,207,200,.4) !important;

    transition:
        .25s ease !important;
}

.profile-picture img:hover,
.avatar img:hover {

    box-shadow:
        5px 5px 0 #006f6b,
        0 0 15px #00fff5,
        0 0 30px rgba(0,255,245,.5) !important;
}


/* ===== PROFILE TUNES ===== */

.tunes {
    background:
        linear-gradient(
            135deg,
            #111718,
            #050707
        ) !important;

    color: #eeeeee !important;

    border:
        2px solid #00aaa5 !important;

    box-shadow:
        0 0 15px rgba(0,207,200,.2) !important;
}


/* ===== CONTACT BOX ===== */

.contact {
    background: #080b0c !important;

    border:
        2px solid #00cfc8 !important;
}

.contact a {
    color: #16e0d9 !important;
}


/* ===== URL BOX ===== */

.urlInfo {
    background: #070909 !important;
    color: #eeeeee !important;

    border:
        2px solid #00aaa5 !important;
}


/* ===== INTERESTS ===== */

.tableSection,
.tableSection table,
.tableSection tbody,
.tableSection tr,
.tableSection td {

    background: #090c0d !important;
    color: #eeeeee !important;
}

.tableSection {
    border:
        2px solid #00aaa5 !important;
}


/* ===== TABLES ===== */

table {
    background: #090c0d !important;
    color: #eeeeee !important;

    border-collapse:
        collapse !important;
}

td {
    background: #090c0d !important;
    color: #eeeeee !important;

    border-color:
        #007d79 !important;
}


/* ===== BIO / BLURBS ===== */

.blurbs,
.blurbs > .inner,
.blurbs > .inner > .section {

    background: #080b0c !important;
    color: #eeeeee !important;
}


/* ===== FRIEND SPACE ===== */

.friends {
    background: #080b0c !important;
    color: #eeeeee !important;
}

.friends img {
    border:
        2px solid #00aaa5 !important;

    box-shadow:
        0 0 7px rgba(0,207,200,.35) !important;

    transition:
        .2s ease !important;
}

.friends img:hover {
    transform:
        rotate(-2deg) scale(1.04);

    box-shadow:
        0 0 15px #00cfc8 !important;
}


/* ===== PHOTOS / VIDEOS / BLOG ===== */

.photos,
.videos,
.blog,
.blogPreview {

    background: #080b0c !important;
    color: #eeeeee !important;

    border-color:
        #00aaa5 !important;
}


/* ===== COMMENTS ===== */

.comments {
    background: #070909 !important;
    color: #eeeeee !important;

    border:
        2px solid #00aaa5 !important;
}

.comments table,
.comments tbody,
.comments tr,
.comments td {

    background: #090c0d !important;
    color: #eeeeee !important;

    border-color:
        #00aaa5 !important;
}

.comments td {
    border:
        2px solid #007d79 !important;
}

.comments a {
    color:
        #18dcd5 !important;
}


/* ===== COMMENT BUTTONS ===== */

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

    background: #030404 !important;

    color:
        #00e5dd !important;

    border:
        2px solid #00aaa5 !important;

    box-shadow:
        3px 3px 0 #005e5b !important;
}


/* ===== NAVIGATION ===== */

nav,
.navbar,
.navigation {

    background:
        #020303 !important;

    border-top:
        2px solid #00aaa5 !important;

    border-bottom:
        2px solid #00aaa5 !important;
}

nav a,
.navbar a,
.navigation a {

    background:
        #060808 !important;

    color:
        #ffffff !important;

    border-right:
        1px solid #007d79 !important;

    font-weight:
        bold !important;
}

nav a:hover,
.navbar a:hover,
.navigation a:hover {

    background:
        #00aaa5 !important;

    color:
        #000000 !important;

    text-shadow:
        none !important;
}


/* ===== HEADER ===== */

header {
    background:
        linear-gradient(
            180deg,
            #002d2b,
            #001514 45%,
            #030404 100%
        ) !important;

    border-bottom:
        2px solid #00aaa5 !important;
}


/* ===== INPUTS ===== */

input,
textarea,
select {

    background:
        #050707 !important;

    color:
        #ffffff !important;

    border:
        1px solid #00aaa5 !important;

    outline:
        none !important;
}

input:focus,
textarea:focus,
select:focus {

    box-shadow:
        0 0 8px #00cfc8 !important;
}


/* ===== BUTTONS ===== */

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

    background:
        #050707 !important;

    color:
        #00ddd5 !important;

    border:
        2px solid #00aaa5 !important;
}

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

    background:
        #00aaa5 !important;

    color:
        #000000 !important;
}


/* ===== BADGES ===== */

.badges {
    background:
        #080b0c !important;

    color:
        #eeeeee !important;

    border:
        2px solid #00aaa5 !important;
}


/* ===== EMO DETAILS ===== */

.heading::before {
    content: "★ ";
    color: #00e5dd;
}

.heading::after {
    content: " ♡";
    color: #ffffff;
}


/* ===== TEXT SELECTION ===== */

::selection {
    background:
        #00aaa5;

    color:
        #000000;
}


/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width:
        10px;
}

::-webkit-scrollbar-track {
    background:
        #020303;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            #00d8d1,
            #005b58
        );

    border:
        2px solid #020303;
}


/* ===== FOOTER ===== */

footer {
    background:
        #030404 !important;

    color:
        #9eafaf !important;

    border-top:
        2px solid #007d79 !important;
}

footer a {
    color:
        #00cfc8 !important;
}


/* ===== MOBILE ===== */

@media screen and (max-width: 700px) {

    html,
    body {
        background-color:
            #000000 !important;
    }

    main,
    .profile,
    .profile-container,
    .container,
    .wrapper,
    .content,
    .profile-row {

        background:
            #050707 !important;
    }

    .section {
        background:
            #090c0d !important;
    }

    .heading {
        font-size:
            15px !important;
    }
}
</style></style>