← Back to Layouts
Anai and Haida

Name: FriendRewind
Author: FriendRewind
Author: Puppysweet 🐾🐾
Category: Art
Created: July 25, 2026
Comments (1)

user 07/26/2026 5:58 AM
woow, i looks so cozy and cute!!
You must log in to comment.
CSS Code

<style>

/* =========================================================
   ANAI + HAIDA — DARK OFFICE THEME
   BROWN + CREAM ONLY
   WORKPLACE CHAOS × TIRED OFFICE WORKERS
   ========================================================= */

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


/* =========================================================
   MAIN BODY
   ========================================================= */

html,
body {

    background-color: #21130b !important;

    background-image:
        linear-gradient(
            rgba(33, 19, 11, .90),
            rgba(76, 49, 29, .90)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd31fcac1.89253619.webp") !important;

    background-size: cover !important;

    background-position: center !important;

    background-attachment: fixed !important;

    color: #e8d5b5 !important;

    font-family: 'Special Elite', serif;

}


/* =========================================================
   DISPLAY NAME — SILLY FONT
   ========================================================= */

.profile h1 {

    font-family: 'Comic Neue', cursive !important;

    font-weight: 700;

    color: #e8d5b5 !important;

    text-align: center;

    font-size: xx-large;

    letter-spacing: 2px;

    text-shadow:
        2px 2px #21130b,
        0 0 5px #6b4528;

    transform: rotate(-2deg);

}


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

nav .top {

    margin-top: 10px;

    background:
        linear-gradient(
            rgba(33, 19, 11, .90),
            rgba(76, 49, 29, .88)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd273e002.08108218.webp");

    background-size: cover;

    background-position: center;

    border: 2px solid #876846;

    border-radius: 10px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.75);

}


nav .top .left .logo {

    filter:
        sepia(1)
        brightness(.75)
        contrast(1.2);

}


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

nav .links {

    background: #2c1a0f;

    padding: 7px 16px;

    text-align: center;

    border-top: 2px solid #876846;

    border-bottom: 2px solid #876846;

}


nav .links a {

    color: #e8d5b5 !important;

    font-family: 'Special Elite', serif;

    text-decoration: none;

}


nav .links a:hover {

    color: #b99a70 !important;

}


nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after {

    content: " ✦ ";

    color: #a98a63;

}


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

main {

    background:
        linear-gradient(
            rgba(31, 17, 9, .91),
            rgba(70, 43, 24, .89)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd37325e5.59490129.webp");

    background-size: cover;

    background-position: center;

    border: 2px solid #876846;

    border-radius: 12px;

    color: #e8d5b5 !important;

    box-shadow:
        0 0 0 4px #21130b,
        0 10px 25px rgba(0,0,0,.8);

}


/* =========================================================
   TOP BANNER — ANAI WORKING
   ========================================================= */

main::before {

    content:
        "OFFICE HOURS  //  PLEASE DO NOT DISTURB  //  ANAI IS WORKING";

    display: block;

    height: 110px;

    margin: 10px;

    padding-top: 12px;

    box-sizing: border-box;

    text-align: center;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

    font-size: 15px;

    color: #e8d5b5;

    text-shadow: 2px 2px #21130b;

    background:
        linear-gradient(
            rgba(33, 19, 11, .25),
            rgba(33, 19, 11, .45)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd3087f15.61851610.gif")
        center / cover;

    border: 2px solid #876846;

    border-radius: 9px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.7);

}


/* =========================================================
   BUTTONS + INPUTS
   ========================================================= */

button,
input,
textarea {

    background: #e8d5b5;

    color: #2c1a0f;

    border: 2px solid #876846;

    border-radius: 7px;

    font-family: 'Special Elite', serif;

}


button:hover {

    background: #b99a70;

    color: #21130b;

}


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

a {

    color: #c8ad86 !important;

}


a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active {

    color: #e8d5b5 !important;

}


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

.profile .blurbs .heading,
.profile .friends .heading,
.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading {

    background:
        linear-gradient(
            90deg,
            #2c1a0f,
            #61432a,
            #2c1a0f
        );

    color: #e8d5b5 !important;

    border: 1px solid #876846;

    border-radius: 8px;

    padding: 6px 8px;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

}


/* =========================================================
   DETAILS TABLE
   ========================================================= */

.details-table td:first-child {

    background:
        linear-gradient(
            135deg,
            #624329,
            #2c1a0f
        );

    color: #e8d5b5 !important;

    font-weight: bold;

    width: 33%;

    padding: 11px;

    border: 1px solid #876846;

    border-radius: 7px;

}


.details-table td {

    background:
        linear-gradient(
            135deg,
            #e8d5b5,
            #cbb18b
        );

    color: #2c1a0f !important;

    padding: 14px;

    border: 1px solid #876846;

    border-radius: 7px;

}


/* =========================================================
   PROFILE INFO — OFFICE NOTICE
   ========================================================= */

.profile-info {

    background:
        linear-gradient(
            rgba(33, 19, 11, .55),
            rgba(76, 49, 29, .65)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd2d42151.88977278.webp");

    background-size: cover;

    background-position: center;

    height: 120px;

    border: 2px solid #876846;

    border-radius: 9px;

}


/* =========================================================
   BLURBS — OFFICE NOTES
   ========================================================= */

.profile .blurbs {

    background:
        linear-gradient(
            rgba(33, 19, 11, .88),
            rgba(76, 49, 29, .86)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd1ca4120.41711832.webp");

    background-size: cover;

    background-position: center;

    padding: 8px;

    border: 2px solid #876846;

    border-radius: 9px;

}


/* =========================================================
   BLURB TITLES
   ========================================================= */

.profile .blurbs .section h4 {

    color: #e8d5b5 !important;

    font-family: 'Comic Neue', cursive;

    text-transform: uppercase;

    text-shadow: 2px 2px #21130b;

}


/* =========================================================
   FRIENDS — HAIDA EXHAUSTED
   ========================================================= */

.profile .friends {

    background:
        linear-gradient(
            rgba(33, 19, 11, .87),
            rgba(76, 49, 29, .87)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd1d28e19.42939152.webp");

    background-size: cover;

    background-position: center;

    padding: 8px;

    border: 2px solid #876846;

    border-radius: 9px;

}


.profile .friends::after {

    content:
        "HAIDA STATUS: EXHAUSTED  •  COFFEE: EMPTY  •  MOTIVATION: MISSING";

    display: block;

    width: 100%;

    height: 85px;

    margin-top: 10px;

    box-sizing: border-box;

    padding: 12px;

    text-align: center;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

    font-size: 14px;

    color: #e8d5b5;

    background:
        linear-gradient(
            rgba(33, 19, 11, .35),
            rgba(33, 19, 11, .60)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd236c3c2.11711761.webp")
        center / cover;

    border: 2px solid #876846;

    border-radius: 8px;

}


/* =========================================================
   CONTACT — OFFICE DIRECTORY
   ========================================================= */

.profile .contact {

    background:
        linear-gradient(
            rgba(33, 19, 11, .88),
            rgba(76, 49, 29, .88)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd33f4f36.11136873.webp")
        center / cover;

    padding: 8px;

    border: 2px solid #876846;

    border-radius: 9px;

}


.profile .contact::after {

    content:
        "ANAI: STILL WORKING  |  HAIDA: NEEDS A NAP  |  OFFICE: SURVIVING";

    display: block;

    width: 100%;

    height: 80px;

    margin-top: 10px;

    padding: 13px;

    box-sizing: border-box;

    text-align: center;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

    color: #e8d5b5;

    background:
        linear-gradient(
            rgba(33, 19, 11, .35),
            rgba(33, 19, 11, .65)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd273e002.08108218.webp")
        center / cover;

    border: 2px solid #876846;

    border-radius: 8px;

}


/* =========================================================
   OTHER TABLE SECTION
   ========================================================= */

.profile .table-section {

    background:
        linear-gradient(
            rgba(33, 19, 11, .89),
            rgba(76, 49, 29, .87)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd2d42151.88977278.webp")
        center / cover;

    padding: 8px;

    border: 2px solid #876846;

    border-radius: 9px;

}


/* =========================================================
   MUSIC TABLE
   ========================================================= */

.comments-table td:first-child,
.music-table td:first-child {

    background:
        linear-gradient(
            135deg,
            #624329,
            #2c1a0f
        );

    color: #e8d5b5 !important;

    text-align: center;

    font-weight: bold;

    border: 1px solid #876846;

    border-radius: 7px;

}


.comments-table td,
.music-table td {

    background: #d8c19d;

    color: #2c1a0f !important;

    border: 1px solid #876846;

    border-radius: 7px;

}


/* =========================================================
   MUSIC + MESSAGE — BOTTOM
   ========================================================= */

.music-table {

    margin-top: 15px !important;

    margin-bottom: 15px !important;

}


.music-table::after {

    content:
        "♫ CURRENTLY PLAYING: OFFICE HOURS ♫  |  MESSAGE: PLEASE LET ANAI WORK IN PEACE. HAIDA HAS CLOCKED OUT MENTALLY.";

    display: block;

    margin-top: 12px;

    padding: 12px;

    background: #2c1a0f;

    color: #e8d5b5;

    border: 1px dashed #876846;

    border-radius: 8px;

    text-align: center;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

    font-size: 14px;

}


/* =========================================================
   FRIEND IMAGES
   ========================================================= */

.profile .friends .person img:not(.icon),
.comments-table td:first-child img:not(.icon) {

    max-width: 95px;

    max-height: 95px;

    display: block;

    margin: 0 auto;

    border-radius: 50%;

    border: 3px solid #b99a70;

    box-shadow:
        0 0 0 3px #2c1a0f,
        0 5px 12px rgba(0,0,0,.8);

}


.profile .friends .person p {

    color: #e8d5b5 !important;

    font-family: 'Comic Neue', cursive;

    font-weight: bold;

    text-align: center;

}


/* =========================================================
   HOME ACTIONS
   ========================================================= */

.profile .home-actions {

    background:
        linear-gradient(
            rgba(33, 19, 11, .89),
            rgba(76, 49, 29, .87)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd3087f15.61851610.gif")
        center / cover;

    padding: 8px;

    border: 2px solid #876846;

    border-radius: 9px;

}


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

footer {

    text-align: center;

    padding: 12px 5px;

    background:
        linear-gradient(
            rgba(33, 19, 11, .92),
            rgba(76, 49, 29, .90)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a651dd31fcac1.89253619.webp")
        center / cover;

    color: #e8d5b5 !important;

    border: 2px solid #876846;

    border-radius: 10px;

}


/* =========================================================
   ONLINE STATUS
   ========================================================= */

.online {

    content:
        url("https://i7.glitter-graphics.org/pub/2306/2306157gkhr2ujoh8.png");

}


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

::-webkit-scrollbar {

    width: 12px;

    background: #21130b;

}


::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            #876846,
            #3b2414
        );

    border: 2px solid #21130b;

    border-radius: 10px;

}


::-webkit-scrollbar-track {

    background: #21130b;

}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

img {

    transition:
        transform .3s ease,
        filter .3s ease;

}


img:hover {

    transform: scale(1.03) rotate(1deg);

    filter:
        brightness(1.08)
        sepia(.20);

}


/* =========================================================
   PAPER / OFFICE TEXTURE
   ========================================================= */

body::after {

    content: "";

    position: fixed;

    inset: 0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(232,213,181,.015),
            rgba(232,213,181,.015) 2px,
            rgba(0,0,0,.035) 2px,
            rgba(0,0,0,.035) 4px
        );

    z-index: 999;

    pointer-events: none;

}


/* =========================================================
   CONTACT ICONS
   ========================================================= */

.contact .inner a img {

    font-size: 0;

}


.contact .inner a img:before {

    font-size: 1em;

    display: block;

}


.contact .inner a:before {

    content: "";

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery112/56607b05.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery90/9f8f06f9.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery112/81f0c7e5.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery112/78ed9a20.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery01/206258c7.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery16/716af8ce.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery16/ecd66e8a.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

    display: inline-block;

    background: url("https://pixels.crd.co/assets/images/gallery112/2d519ac6.gif?v=2942f085") no-repeat 0 0;

    background-size: 100%;

    width: 16px;

    height: 16px;

}

</style>