← Back to Layouts
Neon Zebra

Name: FriendRewind
Author: FriendRewind
Author: toxin
Category: Classic
Created: June 26, 2026
custom cursor, music bar, dividers, online icon, and more.
Comments (2)

aelynn.kgh 06/28/2026 12:11 AM
USIIINGGG !! TYY SM ITS SO PRETTYYYY
ૐ ｡ ˚⋆ 08/08/2026 12:50 AM
loves it
You must log in to comment.
CSS Code

<style>
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Silkscreen:wght@400;700&display=swap');
  
:root {
  --color-black: #000000;
  --color-black-soft: #050308;
  --color-panel: rgba(0, 0, 0, 0.96);
  --color-panel-alt: rgba(8, 4, 12, 0.96);

  --color-purple-dark: #1c0628;
  --color-purple: #9b43d8;
  --color-purple-bright: #d93cff;
  --color-lilac: #c7a5ff;

  --color-pastel-pink: #ff2fbd;
  --color-pastel-pink-glow: rgba(255, 47, 189, 0.78);

  --color-cyan: #56e7f2;
  --color-blue: #7399f2;
  --color-periwinkle: #aaa8ff;
  --color-magenta: #ef20ad;

  --color-text: #ffffff;
  --color-text-muted: #cfc6dc;
  --color-white: #ffffff;
  --color-transparent: transparent;

  --color-shadow: rgba(0, 0, 0, 0.95);
  --color-purple-glow: rgba(155, 67, 216, 0.72);
  --color-cyan-glow: rgba(86, 231, 242, 0.72);
  --color-pink-glow: rgba(255, 47, 189, 0.72);

  --color-scroll-track: #030105;
  --color-scroll-thumb: #ef20ad;
  --color-scroll-thumb-hover: #56e7f2;
  --color-border-brown: #ff2fbd;

  --rainbow-gradient: linear-gradient(
    90deg,
    #ff2fbd 0%,
    #ef20ad 18%,
    #c04be8 38%,
    #aaa8ff 58%,
    #7399f2 78%,
    #56e7f2 100%
  );

  --rainbow-gradient-loop: linear-gradient(
    90deg,
    #ff2fbd,
    #ef20ad,
    #c04be8,
    #aaa8ff,
    #7399f2,
    #56e7f2,
    #7399f2,
    #c04be8,
    #ff2fbd
  );

  --rainbow-glow:
    0 0 5px #ff2fbd,
    0 0 10px #c04be8,
    0 0 18px rgba(115, 153, 242, 0.76),
    0 0 26px rgba(86, 231, 242, 0.46);
}


html,
body {
    margin: 0 !important;
    min-height: 100% !important;
}

* {
    box-sizing: border-box !important;
}

body,
body * {
    color: var(--color-text) !important;
  font-family: "Silkscreen", sans-serif !important;
    cursor: url('https://cur.cursors-4u.net/holidays/hol-4/hol337.cur'), auto !important;
}

a,
button,
input,
textarea,
select {
    cursor: url('https://cur.cursors-4u.net/holidays/hol-4/hol337.cur'), pointer !important;
}

body {
    display: flex !important;
    align-items: flex-start !important;
  justify-content: center !important;
    padding: 20px 0 !important;
    background-color: var(--color-black) !important;
    background-image: url('https://i7.glitter-graphics.org/pub/2512/2512967rd6iranu3g.jpg') !important;
    background-repeat: repeat !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}



.master-container {
    position: relative !important;
    isolation: isolate !important;
  
      top: 20px !important;

    min-width: 800px !important;
    max-width: 800px !important;
    height: 800px !important;
    max-height: 800px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: var(--color-panel) !important;
    border: 1px solid var(--color-pastel-pink) !important;
    box-shadow:
        0 0 10px var(--color-pastel-pink-glow),
        0 0 24px var(--color-pastel-pink-glow) !important;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track) !important;
    scrollbar-width: thin !important;
}


.master-container::before {
    content: '' !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 800px !important;
    margin-bottom: -800px !important;
    background-color: var(--color-panel) !important;

    background-repeat: repeat !important;
    background-position: top left !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.master-container::-webkit-scrollbar {
    width: 12px !important;
}

.master-container::-webkit-scrollbar-track {
    background: var(--color-scroll-track) !important;
    border-left: 1px solid var(--color-pastel-pink) !important;
}

.master-container::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-thumb) !important;
    border: 1px solid var(--color-pastel-pink) !important;
}

.master-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scroll-thumb-hover) !important;
}


main,
.profile,
.profile-body,
.profile-content,
.left-column,
.right-column {
    gap: 8px !important;
}

main,
.profile,
.profile-body,
.profile-content {
    margin: 0 !important;
    padding: 0 !important;
}

.left-column,
.right-column {
    margin: 0 !important;
    padding: 0 !important;
}


.contact,
.url-info,
.table-section,
.tunes,
.blog-preview,
.blurbs,
.friends,
.photos-preview,
#comments,
.profile-playlist-widget {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--color-panel-alt) !important;
    border: 1px solid var(--color-pastel-pink) !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
}


.contact .heading,
.url-info .heading,
.table-section .heading,
.tunes .heading,
.blog-preview h4,
.blurbs .heading,
.friends .heading,
.photos-preview .heading,
#comments .heading,
.heading h4,
.pp-header {
    min-height: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    background-color: #100716 !important;
    background-image: url('https://i8.glitter-graphics.org/pub/1028/1028688jhssnog7kc.gif') !important;
    background-position: top left !important;
    background-repeat: repeat !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-pastel-pink) !important;
    color: var(--color-white) !important;
    font-family: "Creepster", cursive !important;
    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 23px !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    text-shadow:
        1px 1px 0 var(--color-black),
        0 0 4px var(--color-black) !important;
}


.contact .inner,
.url-info .inner,
.table-section .inner,
.tunes .inner,
.blog-preview .inner,
.blurbs .inner,
.friends .inner,
.photos-preview .inner,
#comments .inner,
.profile-playlist-widget ul {
    padding: 6px !important;
    margin: 0 !important;
}

p,
ul,
ol,
blockquote {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

ul,
ol {
    padding-left: 18px !important;
}

h1 {
    margin: 2px 0 5px !important;
    color: var(--color-lilac) !important;
    font-family: "Creepster", cursive !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
    text-shadow:
        2px 2px 0 var(--color-black),
        0 0 8px var(--color-purple-bright) !important;
}

h2,
h3,
h4,
h5,
h6 {
    margin: 4px 0 !important;
    color: var(--color-lilac) !important;
    font-family: "Creepster", cursive !important;
}


a {
    color: var(--color-purple-bright) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--color-white) !important;
    text-shadow: 0 0 5px var(--color-purple-bright) !important;
}


.main-header,
.myspace-header,
.top-nav,
.main-nav-wrapper,
.main-nav-container,
.main-nav,
.main-nav li {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--color-transparent) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#site-logo-link {
    padding: 0 0 4px !important;
}

#logo {
    max-height: 55px !important;
    width: auto !important;
}

.main-nav {
    min-height: 25px !important;
    margin-bottom: 7px !important;
    background-color: #100716 !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3771/3771730c93h6nbq57.gif') !important;
    border: 1px solid var(--color-pastel-pink) !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
}

.main-nav a,
.nav a,
.main-nav .dropdown > a {
    display: inline-block !important;
    padding: 4px 7px !important;
    color: var(--color-white) !important;
    font-size: 11px !important;
    line-height: 16px !important;
    text-shadow: 1px 1px 0 var(--color-black) !important;
}

.main-nav a:hover {
    background: var(--color-black-soft) !important;
    color: var(--color-lilac) !important;
}


.profile-pic {
    width: 100% !important;
    max-width: 180px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.profile-pic img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
}


.person img,
.profile-pic img,
.friends-grid img,
img.cb-pfp-img,
.person img.pfp-fallback {
    border: 1px solid var(--color-pastel-pink) !important;
    box-shadow: 0 0 7px var(--color-pastel-pink-glow) !important;
    background: var(--color-black) !important;
}

.friends-grid {
    gap: 5px !important;
}

.friends-grid .person {
    margin: 0 !important;
    padding: 2px !important;
}


.details-table,
.comments-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: var(--color-black-soft) !important;
    border: 1px solid  var(--color-pastel-pink) !important;
}

.details-table th,
.details-table td,
.comments-table th,
.comments-table td {
    padding: 3px 5px !important;
    border: 1px solid var(--color-pastel-pink) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.details-table th {
    width: 30% !important;
    background: var(--color-purple-dark) !important;
    color: var(--color-lilac) !important;
    font-family: "Creepster", cursive !important;
    font-size: 14px !important;
}

.cb-author-cell {
    width: 120px !important;
    background: var(--color-purple-dark) !important;
    border-right: 1px solid var(--color-pastel-pink) !important;
}

.cb-content-cell {
    background: var(--color-black-soft) !important;
}


button,
input,
textarea,
select,
.cb-actions a,
.cb-reply-form input[type='submit'],
.pp-help-btn,
.bar-btn {
    padding: 3px 6px !important;
    background: var(--color-black-soft) !important;
    border: 1px solid  var(--color-pastel-pink) !important;
    color: var(--color-lilac) !important;
    font-size: 11px !important;
}

button:hover,
input[type='submit']:hover,
.cb-actions a:hover,
.pp-help-btn:hover,
.bar-btn:hover {
    background: var(--color-purple-dark) !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 6px var(--color-purple-glow) !important;
}


.profile-playlist-widget {
    background: var(--color-panel-alt) !important;
}

.pp-header h3 {
    margin: 0 !important;
    color: var(--color-white) !important;
    font-family: "Creepster", cursive !important;
    font-size: 17px !important;
    line-height: 23px !important;
}

.profile-playlist-widget ul {
    border: 0 !important;
    background: var(--color-transparent) !important;
}


#footer-music-bar,
.music-bar {
    min-height: 38px !important;
    background: var(--color-black-soft) !important;
    border-top: 1px solid  var(--color-pastel-pink) !important;
    box-shadow: 0 -3px 10px var(--color-purple-glow) !important;
}

#bar-title {
    color: var(--color-lilac) !important;
    font-family: "Creepster", cursive !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 0 var(--color-black) !important;
}

.bar-progress-container,
.bar-playlist-container,
.bar-volume {
    background: var(--color-black) !important;
    border: 1px solid var(--color-pastel-pink) !important;
}

.bar-btn svg {
    fill: var(--color-lilac) !important;
}

.bar-btn:hover svg {
    fill: var(--color-white) !important;
}


footer[role='contentinfo'] {
    margin: 8px 0 0 !important;
    padding: 7px !important;
    background: var(--color-black-soft) !important;
    border: 1px solid var(--color-pastel-pink) !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
    font-size: 10px !important;
    text-align: center !important;
}

footer nav ul.links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

footer p.copyright {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
}


img,
video,
iframe,
table {
    max-width: 100% !important;
}

.skull-rain,
body::after,
.mood::after,
.profile-mood::after,
.profile .mood::after,
.photos-preview::after,
.blog-preview::after,
.blurbs::after,
.friends::after {
    display: none !important;
    content: none !important;
}
  
  


.master-container::after {
    content: '' !important;
    position: sticky !important;
    bottom: 0 !important;
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    margin-top: -220px !important;
    margin-left: auto !important;
    margin-right: -10px !important;
    background-image: url('https://gloomy-poison.neocities.org/scene_graphics/classicpinkangelpng.png') !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}


.contact::after,
.url-info::after,
.table-section::after,
.tunes::after,
.blog-preview::after,
.blurbs::after,
.friends::after,
.photos-preview::after,
#comments::after,
.profile-playlist-widget::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 30px !important;
    background-image: url('https://64.media.tumblr.com/a69503da5d37105ad601cd875e4c531e/06242b823d7622e6-7e/s1280x1920/f948c52b446bce5bb6eff52818335703e44b0e61.gifv') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

  .online img {
  height: 1.5em !important;
  width: auto !important;
  margin-right: 5px !important;
  content: url('https://i7.glitter-graphics.org/pub/1562/1562797wkctqghyov.gif') !important;
  animation: none !important;
}
  
  .myspace-header .nav-logo {
  content: url('https://64.media.tumblr.com/8aff40bbc4493fd46aa2aca4498e6ee6/2948144de5103f38-01/s75x75_c1/7fee5863d7743741fee2c4340e2d6dbbae4d69d0.gifv') !important;
  height: 45px !important;
  width: auto !important;
  margin: 0 10px !important;
  position: relative !important;
  top: 2px !important;
}
  
  
.profile-name-text {
  display: inline-block !important;
  font-family: "Creepster", cursive !important;
  font-size: 50px !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;

  background-image: linear-gradient(
    90deg,
    #ff2fbd,
    #ef20ad,
    #c04be8,
    #aaa8ff,
    #7399f2,
    #56e7f2,
    #7399f2,
    #c04be8,
    #ff2fbd
  ) !important;
  background-size: 300% 100% !important;
  background-position: 0% 50% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow: none !important;
  animation:
    profileNameBounce 1.15s ease-in-out infinite,
    profileNameRainbow 4s linear infinite !important;
  transform-origin: center bottom !important;
}

@keyframes profileNameBounce {
  0%, 100% {
    transform: translateY(0);
  }

  45% {
    transform: translateY(-10px);
  }

  65% {
    transform: translateY(-4px);
  }
}

@keyframes profileNameRainbow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}
  
  .profile-mood::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  margin-top: 6px !important;
  background-image: url('https://gloomy-poison.neocities.org/scene_graphics/diamonddivider.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
  .music-bar::before {
  content: none !important;
  background: none !important;
  display: none !important;
}
  
  
  #footer-music-bar,
.music-bar {
  background-color: var(--color-panel) !important;
  background-image: url('https://dl.glitter-graphics.com/pub/2856/2856419xyz57xp3fo.gif') !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  background-size: auto !important;
}
  
 .icon {
  content: url('https://64.media.tumblr.com/2552b7157534dbc5245cdcbdfb26e4f0/2051ae6934666ac4-f7/s75x75_c1/06e7f295802df0169382bb3f491fc031714cd2c1.gifv') !important;
  width: auto !important;
  height: 1.5em !important;
}
  
.pf-photo-grid img,
.person img,
.cb-author-link img,
.badge-icon {
  filter:
    grayscale(100%)
    brightness(72%)
    sepia(100%)
    saturate(850%)
    hue-rotate(238deg)
    contrast(130%)
    drop-shadow(0 0 4px #ef20ad)
    drop-shadow(0 0 8px #9b43d8)
    drop-shadow(0 0 11px #7399f2) !important;
}

.pf-photo-grid img:hover,
.person img:hover,
.cb-author-link img:hover,
.badge-icon:hover {
  filter:
    grayscale(25%)
    brightness(108%)
    sepia(45%)
    saturate(390%)
    hue-rotate(238deg)
    contrast(115%)
    drop-shadow(0 0 5px #ff2fbd)
    drop-shadow(0 0 9px #c04be8)
    drop-shadow(0 0 12px #56e7f2) !important;
}

  

.profile-playlist-widget {
  background: #020202 !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 6px rgba(239, 32, 173, 0.65),
    0 0 14px rgba(155, 67, 216, 0.35) !important;
  overflow: hidden !important;
}


.pp-header {
  background: #100716 !important;
  border-bottom: 2px solid transparent !important;
  color: #ffffff !important;
}

.pp-header h3 {
  color: #f49be8 !important;
  text-shadow:
    0 0 4px #ef20ad,
    0 0 8px #ef20ad !important;
}


.profile-playlist-widget ul {
  margin: 0 !important;
  padding: 6px !important;
  background: #000000 !important;
  border: 0 !important;
}


.profile-playlist-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 5px !important;
  padding: 6px 8px !important;
  background: #070707 !important;
  border: 1px solid #8a00ff !important;
  border-radius: 4px !important;
  color: #f5f5f5 !important;
}

.profile-playlist-item:last-child {
  margin-bottom: 0 !important;
}

.profile-playlist-item:hover {
  background: #160a22 !important;
  border-color: #56e7f2 !important;
  box-shadow: 0 0 7px rgba(239, 32, 173, 0.6) !important;
}


.profile-playlist-item.current {
  background: #0a1022 !important;
  border-color: #f49be8 !important;
  box-shadow:
    inset 0 0 8px rgba(155, 67, 216, 0.3),
    0 0 8px rgba(239, 32, 173, 0.6) !important;
}


.song-info {
  flex: 1 !important;
  color: #ffffff !important;
}

.song-artist {
  color: #56e7f2 !important;
  font-size: 0.9em !important;
}


.pp-drag {
  color: #f49be8 !important;
  cursor: grab !important;
}


.pp-equalizer {
  color: #56e7f2 !important;
}


.pp-remove {
  background: #000000 !important;
  color: #f49be8 !important;
  border: 2px solid transparent !important;
  border-radius: 4px !important;
}

.pp-remove:hover {
  background: var(--color-purple-dark) !important;
  color: #ffffff !important;
}


.pp-help-panel {
  background: #080808 !important;
  color: #dddddd !important;
  border-bottom: 1px solid #56e7f2 !important;
}
  
  .profile-playlist-widget,
.profile-playlist-item,
.pp-remove {
  border-radius: 0 !important;
}
  
  footer .links {
  background: var(--color-black-soft) !important;
}



.master-container {
  border: 3px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 6px #ff2fbd,
    0 0 13px rgba(255, 47, 189, 0.82),
    0 0 21px rgba(192, 75, 232, 0.76),
    0 0 31px rgba(115, 153, 242, 0.66) !important;
}

.contact,
.url-info,
.table-section,
.tunes,
.blog-preview,
.blurbs,
.friends,
.photos-preview,
#comments,
.profile-playlist-widget,
footer[role='contentinfo'] {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 4px #ff2fbd,
    0 0 9px rgba(192, 75, 232, 0.72),
    0 0 14px rgba(115, 153, 242, 0.56) !important;
}

.contact .heading,
.url-info .heading,
.table-section .heading,
.tunes .heading,
.blog-preview h4,
.blurbs .heading,
.friends .heading,
.photos-preview .heading,
#comments .heading,
.heading h4,
.pp-header {
  border-bottom: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 3px 5px rgba(255, 47, 189, 0.55),
    0 5px 9px rgba(155, 67, 216, 0.42),
    0 7px 12px rgba(115, 153, 242, 0.28) !important;
  text-shadow: none !important;
}

.main-nav {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 5px #ff2fbd,
    0 0 10px rgba(192, 75, 232, 0.70),
    0 0 15px rgba(115, 153, 242, 0.50) !important;
}

.person img,
.profile-pic img,
.friends-grid img,
img.cb-pfp-img,
.person img.pfp-fallback,
.pf-photo-grid img,
.cb-author-link img,
.badge-icon {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 4px #ff2fbd,
    0 0 8px rgba(192, 75, 232, 0.65),
    0 0 12px rgba(115, 153, 242, 0.42) !important;
}

.details-table,
.comments-table {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 4px #ff2fbd,
    0 0 8px rgba(155, 67, 216, 0.58),
    0 0 12px rgba(115, 153, 242, 0.35) !important;
}

button,
input,
textarea,
select,
.cb-actions a,
.cb-reply-form input[type='submit'],
.pp-help-btn,
.bar-btn,
.pp-remove {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 4px rgba(255, 47, 189, 0.78),
    0 0 8px rgba(155, 67, 216, 0.52),
    0 0 11px rgba(115, 153, 242, 0.32) !important;
}

button:hover,
input[type='submit']:hover,
.cb-actions a:hover,
.pp-help-btn:hover,
.bar-btn:hover,
.pp-remove:hover {
  box-shadow:
    0 0 6px #ff2fbd,
    0 0 11px rgba(192, 75, 232, 0.76),
    0 0 16px rgba(115, 153, 242, 0.58) !important;
}

.profile-playlist-item {
  border: 1px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
}

.profile-playlist-item:hover,
.profile-playlist-item.current {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 0 5px #ff2fbd,
    0 0 9px rgba(192, 75, 232, 0.68),
    0 0 13px rgba(115, 153, 242, 0.45) !important;
}

#footer-music-bar,
.music-bar {
  border-top: 3px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
  box-shadow:
    0 -3px 7px #ff2fbd,
    0 -5px 12px rgba(192, 75, 232, 0.58),
    0 -7px 16px rgba(115, 153, 242, 0.38) !important;
}

.bar-progress-container,
.bar-playlist-container,
.bar-volume {
  border: 2px solid transparent !important;
  border-image: var(--rainbow-gradient-loop) 1 !important;
}

.bar-playlist-btn::after {
  filter: none !important;
}
</style>