← Back to Layouts
Pumpkin Patch / Halloween Layout

Name: FriendRewind
Author: FriendRewind
Author: Kayla⟡
Category: Holiday
Created: October 24, 2026
fully customizable
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=Shrikhand&display=swap');

/* ================================================
 
   PUMPKIN PATCH 
   ================================================ */

:root {

  /* ==========================================
     YOUR IMAGES - CHANGE THESE ANYTIME
     ========================================== */

  /* 1. REPEATING PROFILE BACKGROUND */
  --page-image: url("https://64.media.tumblr.com/16054a5e39ff0ac0d54b436f720efc62/789529e72f2bd096-18/s400x600/41c2cc195d87a448a204c7538a9bafd663091d70.jpg");

  /* 2. BLOG BACKGROUND - REPEATING */
  --blog-image: url("https://64.media.tumblr.com/2b823a0d3bb4fc974bc717ed87fa329f/2c2b06d4b1f18428-9a/s100x200/3b69c92d32a34ea18cc453c5d1813316238e657a.jpg");

  /* 3. IMAGE BEHIND YOUR NAME */
  --name-image: url("https://64.media.tumblr.com/e6bdbba969ada89e371c714b311aa7dc/af9f7b4c3a17428d-6f/s540x810/40dc0293b4a5b597b1ec2779bf2f6746c8c08e3b.gifv");

  /* 4. SEARCH BAR IMAGE - REPEATING */
  --search-image: url("https://64.media.tumblr.com/f8c428b92364bd99f8cde68cab27e55e/2c2b06d4b1f18428-14/s100x200/4b93562e20ea694ccaacc543d13886a3e53dfd10.gifv");

  /* 5. IMAGE INSIDE CONTACTING KAYLA
     Replace var(--name-image) with:
     url("YOUR_IMAGE_URL")
  */
  --contact-image: var(--name-image);


  /* ==========================================
     RENAME YOUR SECTIONS HERE
     Change the words INSIDE the quotation marks.
     ========================================== */

  --title-blog: "kayla's spellbook";
  --title-bio: "the haunting";
  --title-friends: "the coven";
  --title-contact: "summon kayla";
  --title-comments: "the guestbook";
  --title-about: "the particulars";
  --title-photos: "snapshots from the crypt";
  --title-videos: "haunted screenings";


  /* ==========================================
     HALLOWEEN COLORS
     ========================================== */

  --night: #100d0c;
  --coal: #1d1715;
  --coal-light: #2a201b;
  --pumpkin: #dc722f;
  --pumpkin-light: #f09b50;
  --rust: #a64828;
  --copper: #bc793e;
  --gold: #e5b86c;
  --parchment: #f5dfc0;
  --muted: #d7b995;
  --outline: #85512f;

  /* FRIENDREWIND COLOR ALIASES */

  --cream: var(--parchment);
  --blush: var(--coal);
  --rose: var(--pumpkin);
  --dark-rose: var(--pumpkin-light);
  --sage: var(--gold);
  --wood: #83502f;
  --cocoa: var(--parchment);
  --soft-border: var(--outline);

  --logo-blue: #b85b2c;
  --darker-blue: #100d0c;
  --lighter-blue: #a84c27;
  --even-lighter-blue: #2a201b;
  --lightest-blue: #1d1715;
  --dark-orange: #dc722f;
  --light-orange: #8f4728;
  --even-lighter-orange: #332117;
  --green: #b47743;

  /* CUSTOM CURSOR */

  --mouse-cursor: url("https://cur.cursors-4u.net/nature/nat-10/nat997.cur");
}


/* ================================================
   01. REPEATING PAGE BACKGROUND
   ================================================ */

body,
body.profile-page {
  background-color: var(--night) !important;
  background-image: var(--page-image) !important;
  background-position: left top !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;

  color: var(--parchment) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  text-transform: lowercase;
}

body.profile-page a {
  color: var(--gold) !important;
  text-decoration: none !important;
}

body.profile-page a:hover {
  color: var(--pumpkin-light) !important;
  text-decoration: none !important;
}

/* TRANSPARENT SPACING */

body.profile-page main,
body.profile-page .container,
body.profile-page .master-container {
  background: transparent !important;
  background-image: none !important;
}

body.profile-page main {
  border: 1px solid rgba(188,121,62,.65) !important;
  border-radius: 17px !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.35) !important;
}

body.profile-page .container {
  padding: 24px !important;
  margin-top: 8px !important;
  overflow: visible !important;
}


/* ================================================
   02. TRANSPARENT FOOTER AND NAVIGATION
   ================================================ */

body.profile-page footer,
body.profile-page footer .inner,
body.profile-page footer .links,
body.profile-page .footer,
body.profile-page .footer-content,
body.profile-page nav,
body.profile-page nav .top,
body.profile-page nav .links,
body.profile-page .myspace-header,
body.profile-page .top-nav,
body.profile-page .main-nav-wrapper {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.profile-page nav {
  overflow: visible !important;
  margin-bottom: 12px !important;
}

body.profile-page nav .top {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 10px !important;
}

/* HIDE SITE LOGO */

body.profile-page nav .top .nav-logo,
body.profile-page nav .top #logo,
body.profile-page nav .top .logo,
body.profile-page .myspace-header .nav-logo,
body.profile-page .myspace-header #logo,
body.profile-page .top-nav .left > a:has(img) {
  display: none !important;
}


/* ================================================
   03. SEARCH BAR
   ================================================ */

body.profile-page nav .top form,
body.profile-page nav .top .search-form {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 7px !important;
  width: min(340px, 100%) !important;
  max-width: 100% !important;

  padding: 9px !important;
  margin: 0 auto !important;

  border: 1px solid var(--copper) !important;
  border-radius: 28px !important;

  background: rgba(23,14,12,.92) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.45) !important;
}

/* REMOVE MAGNIFYING GLASS */

body.profile-page nav .top form::before,
body.profile-page nav .top .search-form::before {
  content: none !important;
  display: none !important;
}

/* SEARCH IMAGE INSIDE TEXT FIELD */

body.profile-page nav .top input[type="text"],
body.profile-page nav .top input[type="search"],
body.profile-page nav .top .search-input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;

  background-color: var(--coal-light) !important;

  background-image:
    linear-gradient(
      rgba(23,14,12,.17),
      rgba(23,14,12,.17)
    ),
    var(--search-image) !important;

  background-size: auto, auto !important;
  background-position: left top, left top !important;
  background-repeat: repeat, repeat !important;

  color: #fff2db !important;
  text-shadow: 0 1px 3px #100d0c !important;

  border: 1px solid var(--copper) !important;
  border-radius: 18px !important;
  outline-color: var(--gold) !important;

  padding: 7px 10px !important;
  font: 12px Georgia, serif !important;
}

body.profile-page nav .top input::placeholder {
  color: var(--parchment) !important;
  opacity: .85 !important;
}

/* SEARCH BUTTON */

body.profile-page nav .top button,
body.profile-page nav .top input[type="submit"],
body.profile-page nav .top .search-button {
  flex: 0 0 auto !important;

  background: var(--pumpkin) !important;
  color: var(--night) !important;

  border: 1px solid #f3a766 !important;
  border-radius: 17px !important;

  padding: 7px 12px !important;
  font: bold 11px Georgia, serif !important;
  cursor: pointer !important;
}

body.profile-page nav .top button:hover,
body.profile-page nav .top input[type="submit"]:hover {
  background: var(--gold) !important;
}


/* ================================================
   04. HALLOWEEN NAV PILLS
   ================================================ */

body.profile-page nav .links,
body.profile-page nav .main-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 3px 5px !important;
  padding: 4px 8px !important;
}

body.profile-page nav .links li,
body.profile-page nav .links a,
body.profile-page nav .main-nav li,
body.profile-page nav .main-nav a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* REMOVE NAV SEPARATORS */

body.profile-page nav .links li::before,
body.profile-page nav .links li::after,
body.profile-page nav .links a::after,
body.profile-page nav .main-nav li::before,
body.profile-page nav .main-nav li::after,
body.profile-page nav .main-nav a::after {
  content: none !important;
  display: none !important;
}

/* ALWAYS-VISIBLE PILLS */

body.profile-page nav .links a,
body.profile-page nav .main-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;

  gap: 5px !important;
  padding: 8px 11px !important;

  border-radius: 19px !important;
  background: rgba(25,16,14,.92) !important;
  border: 1px solid rgba(229,184,108,.67) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,182,100,.10),
    0 2px 6px rgba(0,0,0,.35) !important;

  font: bold 11px Georgia, serif !important;
  color: var(--parchment) !important;
  text-shadow: 0 1px 3px #000 !important;

  transition: background .2s, color .2s !important;
}

body.profile-page nav .links a:hover,
body.profile-page nav .main-nav > li > a:hover {
  background: rgba(166,72,40,.92) !important;
  border-color: var(--gold) !important;
  color: #fff0d6 !important;
}


/* ================================================
   05. HALLOWEEN NAV EMOJIS
   ================================================ */

/* HOME */
nav .links > a:nth-of-type(1)::before,
nav .links li:nth-child(1) > a::before,
nav .main-nav > li:nth-child(1) > a::before {
  content: '🏠' !important;
}

/* BROWSE */
nav .links > a:nth-of-type(2)::before,
nav .links li:nth-child(2) > a::before,
nav .main-nav > li:nth-child(2) > a::before {
  content: '🍂' !important;
}

/* PROFILE */
nav .links > a:nth-of-type(3)::before,
nav .links li:nth-child(3) > a::before,
nav .main-nav > li:nth-child(3) > a::before {
  content: '🎃' !important;
}

/* BLOG */
nav .links > a:nth-of-type(4)::before,
nav .links li:nth-child(4) > a::before,
nav .main-nav > li:nth-child(4) > a::before {
  content: '🕯️' !important;
}

/* FORUM */
nav .links > a:nth-of-type(5)::before,
nav .links li:nth-child(5) > a::before,
nav .main-nav > li:nth-child(5) > a::before {
  content: '🦇' !important;
}

/* MUSIC */
nav .links > a:nth-of-type(6)::before,
nav .links li:nth-child(6) > a::before,
nav .main-nav > li:nth-child(6) > a::before {
  content: '🕸️' !important;
}

/* VIDEOS */
nav .links > a:nth-of-type(7)::before,
nav .links li:nth-child(7) > a::before,
nav .main-nav > li:nth-child(7) > a::before {
  content: '💀' !important;
}

/* BULLETINS */
nav .links > a:nth-of-type(8)::before,
nav .links li:nth-child(8) > a::before,
nav .main-nav > li:nth-child(8) > a::before {
  content: '🍁' !important;
}

/* MORE */
nav .links > a:nth-of-type(9)::before,
nav .links li:nth-child(9) > a::before,
nav .main-nav > li:nth-child(9) > a::before {
  content: '👻' !important;
}


/* ================================================
   06. FULL-WIDTH NAME BANNER
   STRAIGHT IMAGE, CROOKED LETTERING
   ================================================ */

body.profile-page .profile h1,
body.profile-page h1.profile-name {
  display: block !important;
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 84px !important;

  margin: 0 0 13px !important;
  padding: 10px 18px 12px !important;

  border-radius: 16px !important;
  border: 1px solid var(--copper) !important;

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

  background-image:
    linear-gradient(
      rgba(22,12,9,.26),
      rgba(22,12,9,.26)
    ),
    var(--name-image) !important;

  background-size: auto, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;

  box-shadow: 3px 5px 0 rgba(0,0,0,.35) !important;

  position: relative !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;

  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;

  transform: none !important;
}

/* ONLY THE LETTERS TILT */

body.profile-page .profile h1::after,
body.profile-page h1.profile-name::after {
  content: 'kayla';

  display: inline-block !important;
  position: relative !important;
  transform: rotate(-7deg) !important;

  color: var(--pumpkin-light) !important;

  font: 46px/1.2 'Shrikhand', Georgia, serif !important;

  -webkit-text-stroke: 1.4px #1b100e !important;
  text-shadow: 2px 3px 0 rgba(244,186,105,.55) !important;
}


/* ================================================
   07. PROFILE AND MOOD
   ================================================ */

/* HIDE EDIT YOUR PROFILE */

body.profile-page .profile-info {
  display: none !important;
}

/* REGULAR PROFILE PHOTO */

body.profile-page .profile-pic,
body.profile-page .profile-pic img {
  border-radius: 50% !important;
}

body.profile-page .profile-pic {
  overflow: hidden !important;
  background: transparent !important;
}

/* MOOD BAR */

body.profile-page .mood,
body.profile-page .profile-mood {
  display: block !important;
  box-sizing: border-box !important;

  width: 100% !important;
  position: relative !important;
  overflow: visible !important;

  margin: 9px auto 27px !important;
  padding: 7px 12px !important;

  border-radius: 18px !important;
  border: 1px solid var(--copper) !important;

  background:
    linear-gradient(95deg,#281914,#472716) !important;

  color: var(--parchment) !important;
  font-size: 12px !important;
  text-align: center !important;

  box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
}

body.profile-page .mood strong,
body.profile-page .profile-mood strong {
  color: var(--gold) !important;
}


/* ================================================
   08. DIVIDER UNDER MOOD
   ================================================ */

body.profile-page .mood::after,
body.profile-page .profile-mood::after {
  content: '' !important;
  display: block !important;

  position: absolute !important;

  left: 3% !important;
  right: 3% !important;
  bottom: -15px !important;

  height: 2px !important;
  border-radius: 3px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rust),
      var(--gold),
      var(--rust),
      transparent
    ) !important;

  box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}


/* ================================================
   09. SECTION HEADING STYLES
   ================================================ */

body.profile-page .heading {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;

  background: transparent !important;
  border: none !important;

  padding: 5px 3px 8px !important;
  margin: 3px 0 7px !important;

  text-align: center !important;
  color: var(--pumpkin-light) !important;

  font: 21px/1.3 'Shrikhand', Georgia, serif !important;

  -webkit-text-stroke: .65px #150f0c !important;
  text-shadow: 1px 2px 0 rgba(0,0,0,.45) !important;
}

body.profile-page .heading h1,
body.profile-page .heading h2,
body.profile-page .heading h3,
body.profile-page .heading h4 {
  float: none !important;
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  font: inherit !important;
  color: inherit !important;

  text-align: center !important;
  text-shadow: inherit !important;
  -webkit-text-stroke: inherit !important;

  transform: none !important;
}

/* KEEP VIEW LINKS READABLE */

body.profile-page .heading a,
body.profile-page .friends .heading a {
  float: none !important;
  display: inline-block !important;

  margin-left: 5px !important;
  color: var(--gold) !important;

  font: italic 12px Georgia, serif !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;

  vertical-align: baseline !important;
}


/* ================================================
   10. CUSTOM SECTION NAMES
   CONTROLLED BY VARIABLES AT THE TOP
   ================================================ */

/* HIDE ORIGINAL VISIBLE TITLES */

body.profile-page .blurbs .heading,
body.profile-page .friends .heading,
body.profile-page .contact .heading,
body.profile-page #comments .heading,
body.profile-page .comments .heading,
body.profile-page .friends-comments .heading,
body.profile-page .general-about .heading,
body.profile-page .photos-preview .heading,
body.profile-page .videos-preview .heading,
body.profile-page .blog-preview .heading {
  font-size: 0 !important;
  -webkit-text-stroke: 0 !important;
}

/* REPLACEMENT TITLE APPEARANCE */

body.profile-page .blurbs .heading::before,
body.profile-page .friends .heading::before,
body.profile-page .contact .heading::before,
body.profile-page #comments .heading::before,
body.profile-page .comments .heading::before,
body.profile-page .friends-comments .heading::before,
body.profile-page .general-about .heading::before,
body.profile-page .photos-preview .heading::before,
body.profile-page .videos-preview .heading::before,
body.profile-page .blog-preview .heading::before {
  display: inline !important;

  font: 21px/1.3 'Shrikhand', Georgia, serif !important;
  color: var(--pumpkin-light) !important;

  -webkit-text-stroke: .65px var(--night) !important;
  text-shadow: 1px 2px 0 rgba(0,0,0,.5) !important;
}

/* INDIVIDUAL SECTION TITLES */

body.profile-page .blurbs .heading::before {
  content: var(--title-bio) !important;
}

body.profile-page .friends .heading::before {
  content: var(--title-friends) !important;
}

body.profile-page .contact .heading::before {
  content: var(--title-contact) !important;
}

body.profile-page #comments .heading::before,
body.profile-page .comments .heading::before,
body.profile-page .friends-comments .heading::before {
  content: var(--title-comments) !important;
}

body.profile-page .general-about .heading::before {
  content: var(--title-about) !important;
}

body.profile-page .photos-preview .heading::before {
  content: var(--title-photos) !important;
}

body.profile-page .videos-preview .heading::before {
  content: var(--title-videos) !important;
}

body.profile-page .blog-preview .heading::before {
  content: var(--title-blog) !important;
}

/* ALTERNATIVE BLOG HEADING STRUCTURE */

body.profile-page .blog-preview > h3:first-child,
body.profile-page .blog-preview > h4:first-child {
  font-size: 0 !important;
  -webkit-text-stroke: 0 !important;
}

body.profile-page .blog-preview > h3:first-child::before,
body.profile-page .blog-preview > h4:first-child::before {
  content: var(--title-blog) !important;

  font: bold 19px/1.35 Georgia, serif !important;
  color: #fff0cf !important;
  text-shadow: 1px 2px 3px #3e170b !important;
}

body.profile-page .blog-preview > h3:first-child a,
body.profile-page .blog-preview > h4:first-child a {
  font: italic 12px Georgia, serif !important;
  margin-left: 5px !important;
}


/* ================================================
   11. SOLID DARK CONTENT SECTIONS
   TRANSPARENT GAPS
   ================================================ */

body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .contact,
body.profile-page .general-about,
body.profile-page .table-section,
body.profile-page #comments,
body.profile-page .comments,
body.profile-page .friends-comments,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .profile-details,
body.profile-page .profile .details,
body.profile-page .profile .general-about,
body.profile-page .profile .table-section {
  background: var(--coal) !important;
  background-image: none !important;

  border: 1px solid var(--outline) !important;
  border-radius: 14px !important;

  box-shadow: 0 4px 15px rgba(0,0,0,.28) !important;
  color: var(--parchment) !important;
}

body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .contact,
body.profile-page .general-about,
body.profile-page .table-section,
body.profile-page #comments,
body.profile-page .photos-preview,
body.profile-page .videos-preview {
  padding: 8px !important;
}

body.profile-page .section,
body.profile-page .inner,
body.profile-page .profile-details,
body.profile-page .profile .details {
  color: var(--parchment) !important;
}

body.profile-page .blurbs p,
body.profile-page .friends p,
body.profile-page .contact p,
body.profile-page .profile-details p,
body.profile-page .profile .details p {
  color: var(--parchment) !important;
}

body.profile-page .url-info,
body.profile-page .table-section:last-child {
  display: none !important;
}

body.profile-page table.details-table {
  border-collapse: collapse;
}

body.profile-page table.details-table td {
  background: transparent !important;
  color: var(--parchment) !important;
}

body.profile-page .home-actions {
  border: none !important;
}


/* ================================================
   12. FRIENDS AND COMMENTS SPACING
   ================================================ */

body.profile-page .friends {
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
}

body.profile-page #comments,
body.profile-page .comments,
body.profile-page .friends-comments {
  margin-top: 20px !important;
}

/* REGULAR CIRCULAR FRIEND PHOTOS */

body.profile-page .friends .person img,
body.profile-page .friends-grid img,
body.profile-page .comments-table td:first-child img {
  width: 60px !important;
  border-radius: 50% !important;

  filter: none !important;
  transform: none !important;
  transition: none !important;
}

body.profile-page .friends .person img:hover,
body.profile-page .friends-grid img:hover,
body.profile-page .comments-table td:first-child img:hover {
  filter: none !important;
  transform: none !important;
}

/* COMMENT TABLE */

body.profile-page .comments-table td {
  background: var(--coal-light) !important;
  color: var(--parchment) !important;

  border: none !important;
  font-size: 11px !important;
}

body.profile-page .comments-table td:first-child {
  width: 65px !important;
}


/* ================================================
   13. CONTACT BOX IMAGE
   ================================================ */

body.profile-page .contact .inner::before {
  content: '' !important;
  display: block !important;

  box-sizing: border-box !important;

  width: 100% !important;
  height: 112px !important;

  grid-column: 1 / -1 !important;
  flex-basis: 100% !important;
  order: -1 !important;

  margin: 0 0 12px !important;

  border: 1px solid var(--outline) !important;
  border-radius: 10px !important;

  background-color: #2a1710 !important;
  background-image: var(--contact-image) !important;

  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* ================================================
   14. HALLOWEEN CONTACT ICONS
   ================================================ */

/* HIDE ORIGINAL CONTACT LINK GRAPHICS */

body.profile-page .contact .inner .f-row .f-col a img {
  display: none !important;
}

/* DEFAULT BAT ICON */

body.profile-page .contact .inner .f-row .f-col a::before {
  content: '🦇' !important;
  display: inline-block !important;

  margin-right: 6px !important;
  vertical-align: middle !important;
  font-size: 15px !important;
}

/* SECOND COLUMN */

body.profile-page .contact .inner .f-row .f-col:nth-child(2) a::before {
  content: '🕯️' !important;
}

/* ALTERNATE ROWS */

body.profile-page .contact .inner .f-row:nth-of-type(even) .f-col:nth-child(1) a::before {
  content: '🎃' !important;
}

body.profile-page .contact .inner .f-row:nth-of-type(even) .f-col:nth-child(2) a::before {
  content: '👻' !important;
}

body.profile-page .contact .inner .f-row:nth-of-type(3n) .f-col:nth-child(1) a::before {
  content: '🍂' !important;
}

body.profile-page .contact .inner .f-row:nth-of-type(3n) .f-col:nth-child(2) a::before {
  content: '🕸️' !important;
}

/* ONLINE AND SUPPORTER ICONS */

body.profile-page .online {
  content: '🦇' !important;
}

body.profile-page .supporter {
  content: '🎃' !important;
}


/* ================================================
   15. REPEATING BLOG IMAGE
   ================================================ */

body.profile-page .blog-preview {
  box-sizing: border-box !important;

  position: relative !important;
  overflow: hidden !important;

  padding: 13px !important;

  border: 1px solid var(--copper) !important;
  border-radius: 14px !important;

  background-color: #b64e23 !important;

  background-image:
    linear-gradient(
      rgba(30,13,7,.13),
      rgba(30,13,7,.13)
    ),
    var(--blog-image) !important;

  background-position: left top, left top !important;
  background-size: auto, auto !important;
  background-repeat: repeat, repeat !important;

  box-shadow: 0 4px 15px rgba(0,0,0,.30) !important;
  color: var(--parchment) !important;
}

body.profile-page .blog-preview::before {
  content: none !important;
  display: none !important;
}

body.profile-page .blog-preview .section,
body.profile-page .blog-preview .inner {
  background: transparent !important;
}

body.profile-page .blog-preview .heading,
body.profile-page .blog-preview h3,
body.profile-page .blog-preview h4 {
  color: #fff0cf !important;
  text-shadow: 1px 2px 3px #3e170b !important;
}

/* BLOG ENTRY CARDS */

body.profile-page .blog-preview p {
  background: rgba(26,17,14,.92) !important;
  color: var(--parchment) !important;

  padding: 7px 9px !important;
  margin: 5px 0 !important;

  border: 1px solid rgba(238,175,103,.36) !important;
  border-radius: 9px !important;

  font-size: 11px !important;
  line-height: 1.5 !important;
}

body.profile-page .blog-preview a {
  color: #ffcf7f !important;
}

body.profile-page .blog-preview a:hover {
  color: white !important;
}


/* ================================================
   16. BOTTOM PLAYER TRANSPARENCY
   ================================================ */

#footer-music-bar,
body.profile-page .music-bar,
body.profile-page .bottom-music-player,
body.profile-page .music-player-bar,
body.profile-page #music-player-bar {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}


/* ================================================
   17. CUSTOM CURSOR
   ================================================ */

body.profile-page,
body.profile-page * {
  cursor: var(--mouse-cursor), auto !important;
}


/* ================================================
   18. RECORD PLAYER
   ================================================ */

#profile-playlist-container,
#profile-playlist-mount {
  overflow: visible !important;
}

/* TURNTABLE BASE */

#profile-playlist-container .profile-playlist-widget {
  --deck: #e5d2b9;
  --wood: #8a532e;
  --ink: #27201b;
  --paper: #f2e0c6;
  --rust: #b75c30;

  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;

  width: 250px !important;
  max-width: 100% !important;

  margin: 13px 0 18px 3px !important;
  padding: 12px 13px 17px !important;

  border: 2px solid #3a2922 !important;
  border-radius: 9px !important;

  overflow: visible !important;
  transform: none !important;

  background:
    linear-gradient(
      to bottom,
      transparent 0 199px,
      #8a735f 199px 200px,
      #c7ad8d 200px 205px,
      transparent 205px
    ),
    linear-gradient(
      135deg,
      #f0dfc5,
      #caa987
    ) !important;

  box-shadow:
    inset 0 0 0 5px var(--wood),
    inset 0 0 0 7px rgba(58,30,16,.40),
    3px 5px 0 #5a3524,
    7px 11px 15px rgba(0,0,0,.30) !important;
}


/* ================================================
   19. SPINNING VINYL
   ================================================ */

#profile-playlist-container .profile-playlist-widget::before {
  content: '' !important;

  position: absolute !important;
  top: 20px !important;
  left: 15px !important;

  width: 172px !important;
  height: 172px !important;

  box-sizing: border-box !important;

  border: 5px solid #35383c !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      #17191c 0 2px,
      #d5c6a8 2.5px 4px,
      var(--rust) 4.5px 20px,
      #dbbf9d 20.5px 22px,
      #161619 22.5px 27px,
      transparent 27.5px
    ),
    conic-gradient(
      from 25deg,
      rgba(255,255,255,.09) 0 12deg,
      transparent 12deg 115deg,
      rgba(255,255,255,.06) 115deg 122deg,
      transparent 122deg 360deg
    ),
    repeating-radial-gradient(
      circle,
      #111215 0 3px,
      #292a2d 3.5px 4.5px,
      #121317 5px 7px
    ) !important;

  box-shadow:
    0 0 0 2px #838788,
    0 0 0 5px #3e4143,
    2px 5px 8px rgba(0,0,0,.22) !important;

  z-index: 1 !important;
  pointer-events: none !important;

  animation: mini-turntable-spin 2.4s linear infinite !important;
}


/* ================================================
   20. RECORD PLAYER TOP DECK
   ================================================ */

#profile-playlist-container .profile-playlist-widget h3,
#profile-playlist-container .profile-playlist-widget .pp-header h3 {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  height: 190px !important;

  box-sizing: border-box !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;

  z-index: 3 !important;
  pointer-events: none !important;
}


/* ================================================
   21. SILVER TONEARM
   ================================================ */

#profile-playlist-container .profile-playlist-widget h3::before {
  content: '' !important;

  position: absolute !important;

  top: 13px !important;
  right: 10px !important;

  width: 20px !important;
  height: 116px !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background:
    radial-gradient(
      circle at 50% 10px,
      #373b3d 0 3px,
      #d9dcd9 3.5px 7px,
      #51575a 7.5px 10px,
      transparent 10.5px
    ),
    linear-gradient(
      90deg,
      #45494b,
      #cbd0cd 34%,
      #f8f6ed 55%,
      #777d7e
    ) center 18px / 7px 75px no-repeat,
    linear-gradient(
      90deg,
      #25282a,
      #858b8d 55%,
      #313436
    ) center 90px / 14px 14px no-repeat,
    linear-gradient(
      #242426,
      #242426
    ) center 103px / 2px 8px no-repeat !important;

  box-shadow: none !important;
  z-index: 5 !important;
  pointer-events: none !important;

  transform-origin: 50% 10px !important;
  transform: rotate(35deg) !important;

  transition:
    transform .65s cubic-bezier(.2,.72,.25,1) !important;
}


/* ================================================
   22. SPEED AND POWER DIAL
   ================================================ */

#profile-playlist-container .profile-playlist-widget h3::after {
  content: '' !important;

  position: absolute !important;

  top: 143px !important;
  right: 6px !important;

  width: 29px !important;
  height: 29px !important;

  padding: 0 !important;

  border: 2px solid #4b4b4a !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 50% 24%,
      #a75b43 0 2px,
      transparent 2.5px
    ),
    radial-gradient(
      circle,
      #d1d2d0 0 9px,
      #888b8a 10px 12px,
      #36393a 13px 100%
    ) !important;

  box-shadow: 1px 3px 3px rgba(0,0,0,.2) !important;
  z-index: 3 !important;
  pointer-events: none !important;

  transform: rotate(50deg) !important;
  transition: transform .65s ease !important;
}


/* ================================================
   23. SONG PANEL
   ================================================ */

#profile-playlist-container .profile-playlist-widget ul {
  position: relative !important;
  z-index: 3 !important;

  box-sizing: border-box !important;

  width: 100% !important;
  height: 116px !important;
  max-height: 116px !important;

  margin: 0 !important;
  padding: 5px !important;

  list-style: none !important;

  border: 3px solid #3b302a !important;
  border-radius: 5px !important;

  background: #dcc5a6 !important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.26),
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 1px 0 #fff7e8 !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin !important;
  scrollbar-color: #80664e #dcc5a6 !important;

  transform: none !important;
}


/* ================================================
   24. CRISSCROSS SPEAKER MESH
   ================================================ */

#profile-playlist-container .profile-playlist-widget ul::after {
  content: '' !important;

  position: absolute !important;
  inset: 0 !important;

  border-radius: 2px !important;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(45,45,45,.11) 0 1px,
      rgba(255,255,255,.04) 1px 3px,
      transparent 3px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(45,45,45,.09) 0 1px,
      rgba(255,255,255,.03) 1px 3px,
      transparent 3px 6px
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,.08),
      rgba(0,0,0,.03)
    ) !important;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18) !important;

  pointer-events: none !important;
  z-index: 4 !important;
}


/* ================================================
   25. SONG ROWS
   ================================================ */

#profile-playlist-container .profile-playlist-widget li {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;

  margin: 1px 0 !important;
  padding: 5px !important;

  border: 0 !important;
  border-bottom: 1px solid #b7a083 !important;
  border-radius: 2px !important;

  background: rgba(243,224,196,.82) !important;
  color: var(--ink) !important;

  transform: none !important;
  box-shadow: none !important;

  transition: background .2s ease !important;
}

#profile-playlist-container .profile-playlist-widget li:hover {
  background: rgba(241,195,140,.9) !important;
  transform: none !important;
}

#profile-playlist-container .profile-playlist-widget li.current {
  background: rgba(230,186,137,.92) !important;
  border-left: 3px solid var(--rust) !important;
}


/* ================================================
   26. SONG AND ARTIST LABELS
   ================================================ */

#profile-playlist-container .profile-playlist-widget .song-info,
#profile-playlist-container .profile-playlist-widget .song-info a {
  color: var(--ink) !important;
  font: bold 10px/1.25 Arial, sans-serif !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

#profile-playlist-container .profile-playlist-widget .song-artist,
#profile-playlist-container .profile-playlist-widget .song-artist a {
  color: #6e5946 !important;
  font: 9px/1.2 Arial, sans-serif !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

#profile-playlist-container .profile-playlist-widget .pp-drag,
#profile-playlist-container .profile-playlist-widget button {
  color: #71513c !important;
}

#profile-playlist-container .profile-playlist-widget .pp-equalizer span {
  background: var(--rust) !important;
}

#profile-playlist-container .profile-playlist-widget .profile-playlist-empty {
  color: #71604c !important;
  font: italic 10px/1.3 Arial, sans-serif !important;
}

#profile-playlist-container .profile-playlist-widget hr {
  display: none !important;
}


/* ================================================
   27. RECORD PLAYER HOVER
   ================================================ */

#profile-playlist-container .profile-playlist-widget:hover {
  transform: none !important;
  filter: none !important;
}

#profile-playlist-container .profile-playlist-widget:hover::before {
  animation-play-state: paused !important;
}

/* NEEDLE LIFTS */

#profile-playlist-container .profile-playlist-widget:hover h3::before {
  transform: rotate(-9deg) !important;
}

/* DIAL ROTATES */

#profile-playlist-container .profile-playlist-widget:hover h3::after {
  transform: rotate(-32deg) !important;
}


/* ================================================
   28. VINYL SPIN ANIMATION
   ================================================ */

@keyframes mini-turntable-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* ================================================
   29. REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {

  #profile-playlist-container .profile-playlist-widget::before {
    animation: none !important;
  }

  #profile-playlist-container .profile-playlist-widget h3::before,
  #profile-playlist-container .profile-playlist-widget h3::after,
  #profile-playlist-container .profile-playlist-widget li {
    transition: none !important;
  }

}

</style>