← Back to Layouts
Something’s wrong in the 70’s

Name: FriendRewind
Author: FriendRewind
Author: ReDeadSign
Category: Vintage
Created: September 28, 2026
Made with public css
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"https://www.cursors-4u.com/cursor/sesame-street-barkley","overlayUrl":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fgifdb.com%2Fimages%2Fhigh%2Ftv-static-visual-noise-9mmbwzzt39wtpw81.gif&f=1&nofb=1&ipt=29694ab8d4749ed2da1271b721b65b98993a5d70cf9779ccba851e32c8ab0aff&ipo=images","overlayOpacity":0.4,"avatarAnimation":"monitor","pageFont":"Righteous","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://i.pinimg.com/originals/6f/4c/44/6f4c4443f7da91cad2228716c276b1c8.gif","pageBgMode":"cover","heroImageUrl":"https://i.pinimg.com/originals/1b/13/5d/1b135dbb3f4cfabf2488648ca8b9d0fb.gif","profileRowBgImage":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%2Fid%2FOIP.GqLFp2kE0TiD8KYZ_ZgX_wHaHa%3Fr%3D0%26pid%3DApi&f=1&ipt=c5fd13abcac072702435df2f55db8abd76837b8b8314087704a062c5953efccb&ipo=images","profileRowBgMode":"tile","navBgColor":"#440000","navBgImage":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fm%2FJQMkTCZhiu4AAAAd%2Fblood-separador.gif&f=1&nofb=1&ipt=5d837d686d7e57dfb94236852a735803c6a45b3b560fb8107212865308608b64","navBgMode":"cover","navLinkColor":"#b51a00","navLinkHover":"#01c7fc","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#831100","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#5c0701","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#5c0701","textHeading":"#831100","textLink":"#e22400","headingShadowColor":"#000000","headingShadowBlur":4,"headingShadowEnable":true,"moduleImages":{"contact":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images","urlInfo":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images","tableSection":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images","tunes":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images","blogPreview":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images","blurbs":"https://www.google.com/imgres?q=70%27s%20pattern&imgurl=https%3A%2F%2Fimg.spoonflower.com%2Fc%2F13410182%2Fp%2Ff%2Fm%2FUitLRmROXkcO_YOokPc83FTp1vUtv4b6DLPYqK_t94UxPv4bG6DQ%2F13410182.png&imgrefurl=https%3A%2F%2Fwww.spoonflower.com%2Fen%2Fshop%2Fretro-1970-pattern&docid=eLbFrWMhqhd1LM&tbnid=bds4SKS6t_lH0M&vet=12ahUKEwiC0qLC_5GXAxXSyzQHHcT1BI04ChCc8A56BAgoEAA..i&w=294&h=294&hcb=2&ved=2ahUKEwiC0qLC_5GXAxXSyzQHHcT1BI04ChCc8A56BAgoEAA","friends":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Funblast.com%2Fwp-content%2Fuploads%2F2023%2F07%2Fcorkboard-texture-2-1600x1067.jpg&f=1&nofb=1&ipt=dedbc18e752c998fcd383718639d6b80d17d915ffe2ab9e2fa0e8e4666c72b46&ipo=images","Comments Background":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Funblast.com%2Fwp-content%2Fuploads%2F2023%2F07%2Fcorkboard-texture-2-1600x1067.jpg&f=1&nofb=1&ipt=dedbc18e752c998fcd383718639d6b80d17d915ffe2ab9e2fa0e8e4666c72b46&ipo=images","comments":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%2Fid%2FOIP.UHJ3tCiJrQSZlB8d5FG29gHaFj%3Fpid%3DApi&f=1&ipt=2035f453b6be5c072ff8ab554a7e45f5dcf6eb4b78309bf8d6060b618a55f14f&ipo=images"}} */
/* Generated by FriendRewind.com Visual Builder */

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

* { cursor: url(https://www.cursors-4u.com/cursor/sesame-street-barkley), auto !important; }

html::before {
    content: "";
    position: fixed;
    top: -100%; left: -50%;
    width: 300%; height: 300%;
    background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fgifdb.com%2Fimages%2Fhigh%2Ftv-static-visual-noise-9mmbwzzt39wtpw81.gif&f=1&nofb=1&ipt=29694ab8d4749ed2da1271b721b65b98993a5d70cf9779ccba851e32c8ab0aff&ipo=images');
    opacity: 0.4;
    pointer-events: none;
    animation: grain 8s steps(10) infinite;
    z-index: -2;
  }

@keyframes grain {
    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%) }
  }

body, body.profile-page {
  background-image: url("https://i.pinimg.com/originals/6f/4c/44/6f4c4443f7da91cad2228716c276b1c8.gif") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #5c0701 !important;
  font-family: 'Righteous', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:9.0%!important;left:7.6%!important;width:84%!important;height:85%!important;object-fit:cover;z-index:1;clip-path:inset(2.2% 2.6% 3.2% 2% round 16% 20% 22% 16%)!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_68e46a2e779929.30369018.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://i.pinimg.com/originals/1b/13/5d/1b135dbb3f4cfabf2488648ca8b9d0fb.gif') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%2Fid%2FOIP.GqLFp2kE0TiD8KYZ_ZgX_wHaHa%3Fr%3D0%26pid%3DApi&f=1&ipt=c5fd13abcac072702435df2f55db8abd76837b8b8314087704a062c5953efccb&ipo=images") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top center !important;
}

.myspace-header .top-nav {
  background: #440000;
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fm%2FJQMkTCZhiu4AAAAd%2Fblood-separador.gif&f=1&nofb=1&ipt=5d837d686d7e57dfb94236852a735803c6a45b3b560fb8107212865308608b64");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav-wrapper {
  background: #440000;
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fm%2FJQMkTCZhiu4AAAAd%2Fblood-separador.gif&f=1&nofb=1&ipt=5d837d686d7e57dfb94236852a735803c6a45b3b560fb8107212865308608b64");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav li a {
  color: #b51a00;
}

.myspace-header .main-nav li a:hover {
  color: #01c7fc;
}

.contact {
    border: 1px solid #831100 !important;
    border-radius: 5px !important;
  }

.contact .heading {
    background-color: #831100 !important;
    color: #ffffff !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 1px solid #5c0701 !important;
    border-radius: 5px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #5c0701 !important;
    color: #ffffff !important;
  }

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #5c0701 !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #831100 !important;
  text-shadow: 0 0 4px #000000 !important;
}

a, .profile a, .table-section a, .module a { color: #e22400 !important; }

.contact, .url-info, .table-section, .tunes, .blog-preview {
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpaperaccess.com%2Ffull%2F8657486.jpg&f=1&nofb=1&ipt=b288cd2c0d69b126b3781169695e10a016acce74a1994db055afc47470fe88d6&ipo=images") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blurbs {
  background-image: url("https://www.google.com/imgres?q=70%27s%20pattern&imgurl=https%3A%2F%2Fimg.spoonflower.com%2Fc%2F13410182%2Fp%2Ff%2Fm%2FUitLRmROXkcO_YOokPc83FTp1vUtv4b6DLPYqK_t94UxPv4bG6DQ%2F13410182.png&imgrefurl=https%3A%2F%2Fwww.spoonflower.com%2Fen%2Fshop%2Fretro-1970-pattern&docid=eLbFrWMhqhd1LM&tbnid=bds4SKS6t_lH0M&vet=12ahUKEwiC0qLC_5GXAxXSyzQHHcT1BI04ChCc8A56BAgoEAA..i&w=294&h=294&hcb=2&ved=2ahUKEwiC0qLC_5GXAxXSyzQHHcT1BI04ChCc8A56BAgoEAA") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends, #comments {
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Funblast.com%2Fwp-content%2Fuploads%2F2023%2F07%2Fcorkboard-texture-2-1600x1067.jpg&f=1&nofb=1&ipt=dedbc18e752c998fcd383718639d6b80d17d915ffe2ab9e2fa0e8e4666c72b46&ipo=images") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.comments-table td {
  background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%2Fid%2FOIP.UHJ3tCiJrQSZlB8d5FG29gHaFj%3Fpid%3DApi&f=1&ipt=2035f453b6be5c072ff8ab554a7e45f5dcf6eb4b78309bf8d6060b618a55f14f&ipo=images") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

</style><style>


/* Polaroid Top Friends */
.friends-grid img {
    background: #fff !important;
    padding: 6px 6px 16px 6px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
    transform: rotate(-3deg) !important;
    transition: transform 0.25s ease !important;
}
.friends-grid a:nth-child(even) img { transform: rotate(3deg) !important; }
.friends-grid img:hover { transform: rotate(0deg) scale(1.06) !important; }
</style>

  <style>
.general-about .details p:nth-of-type(2) {
  position: relative !important;
  display: block !important;
  width: fit-content !important;

  margin: 12px auto !important;
  padding: 8px 14px !important;

  background: #fff4b8 !important;
  border: 1px solid #d9c56f !important;
  border-radius: 5px !important;

  color: #5c5230 !important;
  text-align: center !important;

  box-shadow: 3px 3px 0 rgba(0,0,0,.12) !important;
  transform: rotate(-1deg) !important;
}

.general-about .details p:nth-of-type(2)::before {
  content: "" !important;

  position: absolute !important;
  top: -7px !important;
  left: 50% !important;

  width: 36px !important;
  height: 11px !important;

  background: rgba(210,225,255,.75) !important;
  border: 1px solid rgba(255,255,255,.85) !important;

  transform: translateX(-50%) rotate(2deg) !important;
}
</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fm%2FdtHdjcA-PS0AAAAd%2Ffever-dream-fever-dream-bird.gif&f=1&nofb=1&ipt=6b86ff5d4a25a060b816963dfa7ebb5fa3d7fb5dbd753785cc296d4fad83a992&ipo=images);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style><style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fm%2FdtHdjcA-PS0AAAAd%2Ffever-dream-fever-dream-bird.gif&f=1&nofb=1&ipt=6b86ff5d4a25a060b816963dfa7ebb5fa3d7fb5dbd753785cc296d4fad83a992&ipo=images');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 3s 2 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }</style>

<style>


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

/* ==========================================
   TURNTABLE BASE
   ========================================== */

#profile-playlist-container .profile-playlist-widget {
  --deck: #e8e1d5;
  --wood: #956d50;
  --ink: #272a2c;
  --paper: #f3eee5;
  --rust: #ac6548;

  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 #3a3632 !important;
  border-radius: 9px !important;

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

  background:
    linear-gradient(
      to bottom,
      transparent 0 199px,
      #9b8e7d 199px 200px,
      #cec4b7 200px 205px,
      transparent 205px
    ),
    linear-gradient(
      135deg,
      #f0e9dc,
      #d9d0c2
    ) !important;

  box-shadow:
    inset 0 0 0 5px var(--wood),
    inset 0 0 0 7px rgba(58,45,37,.35),
    3px 5px 0 #5a4134,
    7px 11px 15px rgba(0,0,0,.20)
    !important;
}

/* ==========================================
   VINYL RECORD + METAL PLATTER
   ========================================== */

#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;

  transform: none !important;
  animation: none !important;
}

/* ==========================================
   INVISIBLE HEADING / TOP DECK SPACE
   ========================================== */

#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;
}

/* ==========================================
   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(-9deg) !important;

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

/* ==========================================
   ROTARY SPEED / 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(-32deg) !important;
  transition: transform .65s ease !important;
}

/* ==========================================
   RECESSED SONG LIST 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 #3b3d3d !important;
  border-radius: 5px !important;

  background: #d9d2c5 !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: #80786e #d9d2c5 !important;

  transform: none !important;
}

/* ==========================================
   SPEAKER GRILLE / MESH OVERLAY
   ========================================== */

#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;
}

/* ==========================================
   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 5px !important;

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

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

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

  transition: background .2s ease !important;
}

/* Song hover */

#profile-playlist-container
.profile-playlist-widget li:hover {

  background: rgba(213,226,228,.9) !important;
  transform: none !important;
}

/* Currently playing */

#profile-playlist-container
.profile-playlist-widget li.current {

  background: rgba(230,207,186,.92) !important;
  border-left: 3px solid var(--rust) !important;
}

/* ==========================================
   SONG TITLES
   ========================================== */

#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;
}

/* ==========================================
   ARTIST NAMES
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .song-artist,

#profile-playlist-container
.profile-playlist-widget .song-artist a {

  color: #777066 !important;

  font: 9px/1.2 Arial, sans-serif !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* ==========================================
   EXISTING SONG CONTROLS
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .pp-drag,

#profile-playlist-container
.profile-playlist-widget button {

  color: #715b51 !important;
}

/* Equalizer */

#profile-playlist-container
.profile-playlist-widget .pp-equalizer span {

  background: var(--rust) !important;
}

/* Empty playlist message */

#profile-playlist-container
.profile-playlist-widget .profile-playlist-empty {

  color: #71695f !important;
  font: italic 10px/1.3 Arial, sans-serif !important;
}

/* Remove old dividers */

#profile-playlist-container
.profile-playlist-widget hr {

  display: none !important;
}

/* ==========================================
   HOVER: START THE TURNTABLE
   ========================================== */

#profile-playlist-container
.profile-playlist-widget:hover {

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

#profile-playlist-container
.profile-playlist-widget:hover::before {

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

#profile-playlist-container
.profile-playlist-widget:hover h3::before {

  transform: rotate(35deg) !important;
}

#profile-playlist-container
.profile-playlist-widget:hover h3::after {

  transform: rotate(50deg) !important;
}

/* ==========================================
   RECORD ROTATION
   ========================================== */

@keyframes mini-turntable-spin {

  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

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

  #profile-playlist-container
  .profile-playlist-widget::before,

  #profile-playlist-container
  .profile-playlist-widget h3::before,

  #profile-playlist-container
  .profile-playlist-widget h3::after,

  #profile-playlist-container
  .profile-playlist-widget li {

    animation: none !important;
    transition: none !important;
  }

  #profile-playlist-container
  .profile-playlist-widget:hover::before {

    animation: none !important;
  }
}
</style>