html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Arial, sans-serif;
}

/* ---------------- BASE LAYERS ---------------- */
.layer {
  position: absolute;
}

/* ---------------- LEFT ---------------- */
.left {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.left::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(270deg,
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400% 100%;
  animation: flowX 8s linear infinite reverse;
}

/* ---------------- RIGHT ---------------- */
.right {
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

.right::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  background: linear-gradient(270deg,
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400% 100%;
  animation: flowX 8s linear infinite;
}

/* ---------------- TOP ---------------- */
.top {
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 2;
}

.top::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg,
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 100% 400%;
  animation: flowY 8s linear infinite reverse;
}

/* ---------------- BOTTOM ---------------- */
.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: 2;
}

.bottom::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  background: linear-gradient(180deg,
    red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 100% 400%;
  animation: flowY 8s linear infinite;
}

/* ---------------- ANIMATIONS ---------------- */
@keyframes flowX {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

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

/* ---------------- CONTAINER ---------------- */
.container {
  position: absolute;
  inset: 2%;
  z-index: 5;
}

/* ---------------- SCROLL AREA ---------------- */
.list-scroll {
  width: 100%;
  max-width: 600px;
  height: 100%;
  margin: 0 auto;

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

  padding-right: 1rem;
  box-sizing: border-box;

  scrollbar-width: medium;
}

.list-scroll::-webkit-scrollbar {
  width: 1rem;
}

.list-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
}

.list-scroll::-webkit-scrollbar-track {
  background: transparent;
}


.list-scroll::-webkit-scrollbar-thumb {
  background: dodgerblue;
  border-radius: 10px;
}
/********** nicer (hover effect) */
.list-scroll::-webkit-scrollbar-thumb:hover {
  background: #1e90ff; /* slightly brighter */
}


/* ---------------- SONG LIST ---------------- */
ul.songlist {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

/* ITEM */
ul.songlist li {
  padding: 0.9rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* LINK */
ul.songlist li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

/* TEXT */
ul.songlist li h3 {
  margin: 0.6em 0;
  font-size: 1.1rem;
}

ul.songlist li p {
  font-size: 0.95rem;
  opacity: 0.7;
}

ul.songlist li h3,
ul.songlist li p {
  text-shadow: 1px 1px 0px black;
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 700px) {

  .container {
    inset: 0;
    padding: 0 12px;   /* 👈 clean equal gap left + right */
  }

  .list-scroll {
    padding-right: 0.5rem;
  }

  ul.songlist {
    gap: 0.6rem;
  }

  ul.songlist li {
    padding: 1rem;
  }
}