← Back to Layouts
CSM Kobeni

Name: FriendRewind
Author: FriendRewind
Author: XENO
Category: Art
Created: October 7, 2026
meiw.
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>
  @import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Monsieur+La+Doulaise&family=Uncial+Antiqua&display=swap');

  ::selection {
    background: #aa0000c1;
    color: whitesmoke;
  }

  h1, .heading, span.profile-name-text {
    font-family: "Uncial Antiqua", system-ui;
  }

  h2, h3, h5, h6, .online, b, a, .comments-table a p, .details-table td:first-child p, .blog-preview h4, .blurbs .inner .section h4, .mood b, #block-user-text {
    font-family: "Almendra", serif;
  }

  p, b, span, li, label, button, .logout-btn, #text, .song-info {
    font-family: "Barlow Condensed", sans-serif;
    color: black !important;
  }

  a , .links li a, .profile-playlist-widget h3, .profile-playlist-widget button, .profile-playlist-widget .pp-drag, .online, #block-user-text {
    color: #d80700 !important;
    text-shadow: #ffffff 0 0 3px;
  }

  .links li a { font-size: 13px; }

  a:hover, .links li a:hover {
    color: #ff330f;
    text-decoration: none;
    font-variant: all-small-caps;
    transition: 0.2s;
  }

  .logout-btn:hover {
    text-decoration: none;
    font-variant: all-small-caps;
  }

	body.profile-page .master-container {
    width: 70% !important;
    max-width: 2000px;
  }
  
  body.profile-page .master-container {
    width: 70% !important;
    max-width: 1400px;
  }
  
  body.profile-page .master-container {
    width: 70% !important;
    max-width: 850px !important;
  }
  
  body.profile-page .master-container {
    width: 95% !important;
    max-width: 480px;
  }

  body::before {
    content: " ";
    display: block;
    position: fixed;
    background: linear-gradient(rgba(61, 42, 31, 0.25) 50%, rgb(0 0 0 / 0%) 50%);
    background-size: 100% 2px, 3px 100%;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }

  body {
    background: #ffffff;
    background-image: url("https://external-media.spacehey.net/media/saSi3GcPoQiqFw-kWNA06mh4X-uybIYCnv0dzweUEXnY=/https://i.pinimg.com/736x/8c/d7/b0/8cd7b0cf2a96e11a6e1e2e6163f99370.jpg");
    background-position: top;
    background-attachment: scroll;
    background-size: cover;
  }

  @media only screen and (max-width: 475px) {
    body {
      background-position: center top;
      background-size: auto;
      background-repeat: repeat-y;
    }
  }

  nav .top {
    margin-top: 10px;
    display: flex !important;
    background-color: #ffffffdd;
    color: black;
    border: 1px solid black;
    border-radius: 3px;
    box-shadow: 0 0 10px black;
    position: relative;
  }

  nav .links {
    background: none;
    padding: 7px 20px 6px 20px;
    text-align: center;
  }

  nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ⋮";
    color: white;
  }

  main:before {
    content: " ";
    background-image: url("https://external-media.spacehey.net/media/s0G0tsR5b87dy3md3acvd67s60PjhbdOSfzAfjtwarxA=/https://i.pinimg.com/1200x/0a/3e/a2/0a3ea2a5d7d915827900bb28b3ca7c1a.jpg");
    background-size: cover;
    background-position: center bottom;
    display: block;
    height: 200px;
    width: auto;
    margin-bottom: 20px;
    border-top: 2px solid #d80700;
    border-bottom: 2px solid #d80700;
  }

  @media only screen and (max-width: 475px) {
    main:before {
      background-size: cover;
      background-position: center;
      height: 150px;
      width: auto;
    }

  }

  main {
    background-color: #ffffffdc;
    color: black;
    border: 1px solid black;
    border-radius: 3px;
    box-shadow: 0 0 10px black;
  }

  @media only screen and (max-width: 475px) {
    main {
      padding-top: 0;
    }
  }

  .profile-pic > img {
    display: inline; /*inline / none*/
    width: 150px;
    height: 160px;
    padding-top: 0;
  }

  /* page exclusive pfp
  .profile-pic:after {
  background-image: url("");
  display: inline-block;
  content: "";
  }
  .general-about .profile-pic:after {
  background-size: cover;
  width: 150px;
  height: 160px;
  }
  */

  .online img {
    content: url("https://i.ibb.co/KcgRjf4c/stappy.png") !important;
    visibility: visible !important;

    display: block !important;
    width: auto !important;
    height: 1.5em !important;
    margin: 0 !important;
  }

  p.online:after {
    content: "ONLINE RIGHT MEOW!!" !important;
    height: 16px;
    display: block !important;
    visibility: visible !important;
    z-index: 99;

    transform: translate(20px, -12px) !important;
  }
  
  .idle img {
    content: url('https://i.ibb.co/JjrcZt8d/Gato.jpg') !important;
    visibility: visible !important;

    display: block !important;
    width: auto !important;
    height: 1.5em !important;
    margin: 0 !important;
  }

  p.idle:after {
    content: "IDLE" !important;
    height: 16px;
    display: block !important;
    visibility: visible !important;
    z-index: 99;

    transform: translate(22px, -16px) !important;
  }

  .offline img {
    content: url('https://i.ibb.co/nsVFVy52/catching-zzz.gif');
    visibility: visible !important;

    display: block !important;
    width: auto !important;
    height: 1.5em !important;
    margin: 0 !important;
  }

  p.offline:after {
    content: "OFFLINE" !important;
    height: 16px;
    display: block !important;
    visibility: visible !important;
    z-index: 99;

    transform: translate(20px, -12px) !important;
  }

  .profile-playlist-widget {
    background-color: #ffffff01 !important;
    width: 100% !important;
    border: 2px solid !important;
    border-color: #000000 #000000 #881907 #881907 !important;
    border-radius: 1px !important;
    margin: 6px !important;
    padding: 10px !important;
  }

  .profile-playlist-widget li {
    border: 2px solid !important;
    border-color: #5A5A5A !important;
    border-radius: 1px !important;
  }
  
  .pp-equalizer span {
  	background: #d80700 !important;
    overflow: hidden;
    height: 100%;
    z-index: 2;
  }

  .profile-playlist-widget li:hover, .profile-playlist-widget li.hovering, .profile-playlist-widget li.current {
	background-color: #d8070069 !important;
  }

  .profile .mood:after {
    content: " ";
    background-image: url("https://external-media.spacehey.net/media/sAhtJXfuHCsZlUuLfc8qjRA_VI1QLbRWd2VZc5ZfmGik=/https://i.pinimg.com/1200x/6a/ed/b2/6aedb2694b18fa4c9e533827c58aa176.jpg");
    background-size: cover;
    background-position: center;
    display: block;
    border: 2px solid #d80700;
    height: 100px;
    width: auto;
    margin-bottom: 10px;
  }

  table tr:nth-child(4) {
    display: none; /*Hides "Television" row*/
  }

  table tr:nth-child(3) td:first-child p {
    font-size: 0px; /*Makes "Movies" invisible*/
    position: relative;
  }

  table tr:nth-child(3) td:first-child p::after {
    content: "Media"; /*replaces "Movies" with "Media"*/
    font-size: 12px;
  }

  table tr:nth-child(5) td:first-child p {
    font-size: 0px; /*Makes "Books" invisible*/
    position: relative;
  }

  table tr:nth-child(5) td:first-child p::after {
    content: "Genres"; /*replaces "Books" with "Genres"*/
    font-size: 12px;
  }

  .details-table td:first-child {
    background: none;
    color: #d80700;
    width: 21%;
  }

  .details-table td:last-child {
    background: #d8d8d8dd;
  }

  table .icon {
    display: none;
  }

  table tr:nth-child(1) td:first-child p a {
    font-size: 0px;
    position: relative;
  }

  table tr:nth-child(1) td:last-child p a {
    font-size: 0px;
    position: relative;
  }
  
  .interest-content {
  	background-color: white;
    padding: 4px;
  }
  
  .details-table tr {
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    border: 2px solid black;
    border-radius: 2px 2px 4px 4px;
  }

  .profile .contact .heading, .profile .table-section .heading/*, .setting-section .heading*/, .home-actions .heading {
    background: black;
    background-image: url("https://external-media.spacehey.net/media/spVdyEg3ApiTdbpJ3MaIgX-E7Kyp4CZ9iBhul2NXRAOg=/https://i.pinimg.com/736x/29/95/ff/2995ff8ccaa758f48f84276885b77994.jpg");
    background-size: cover;
    background-position: top;
    color: white;
  }

  .profile .blurbs .heading, .profile .friends .heading {
    background: black;
    background-image: url("https://external-media.spacehey.net/media/spVdyEg3ApiTdbpJ3MaIgX-E7Kyp4CZ9iBhul2NXRAOg=/https://i.pinimg.com/736x/29/95/ff/2995ff8ccaa758f48f84276885b77994.jpg");
    background-size: cover;
    background-position: top;
    color: white;
  }

  .blurbs, .friends {
    border: 2px solid black;
    border-radius: 2px 2px 4px 4px;
  }

  .profile .blurbs {
    margin: 10px 0;
  }

  div #comments {
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .comments-table {
    border-color: #d80700;
    border-style: inset;
  }

  .comments-table td:first-child {
    background: #d8d8d8dd;
    width: 33%;
  }

  .comments-table td:last-child {
    background: #ffffffb0;
  }

  .comments-table td:last-child * {
    padding-left: 3px;
  }

  .col.right::after {
    content: "";
    background-image: url("https://i.pinimg.com/736x/af/25/a0/af25a0ae8d1a4ce8db255903488e9e59.jpg");
    background-size: cover;
    background-position: center;
    display: block;
    border: 2px solid #d80700;
    height: 150px;
    color: white;
    margin-top: 10px;
  }

  footer {
    background: none;
          font-size: 10px;
        }
</style>