send me the whole block of my list links please  , i wnat the jh3 margin:.6 auto, full wifdht like clar both dislpay block in flex thingie.. i wnat it above the descripotions.

/* ================= ROOT VARIABLES ================= */
:root {
  --rainbow: linear-gradient(
    90deg, /* changed from 270deg to 90deg */
    red, orange, yellow, lime, cyan, blue, violet, red
  );

  --bg-dark: #222;
  --bg-darker: #1d1d1d;
}


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

a {
  text-decoration: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  color: #fff;
  background: #000;
  scroll-behavior: smooth;
}

/* ================= RESET ================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

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

a {
  text-decoration: none !important;
}
html {
height: 100%;
}

body {width:100%;
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
justify-content: center;
align-items: center;
  flex-direction: column;
  font-family: Arial, sans-serif;
  color: #fff;
  background: #000;
  scroll-behavior: smooth;
text-align: center;
}


main {
  flex: 1 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}


/* ================= SECTIONS ================= */

section {
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

section:not(.footer-section) {
  min-height: 100vh;
}


/* ================= SECTION 1 ================= */

.para-1 {
  min-height: 100vh;
  padding: 0;

  display: flex;
  flex-direction: column;

  /* FIXED */
  justify-content: center;

  background: linear-gradient(135deg, var(--bg-darker) 50%, var(--bg-dark) 50%);
}


/* Center block */
.repixel-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  text-align: center;

  /* FIXED: removed upward push */
  transform: translateY(0);
}


/* ================= FONT ================= */

@font-face {
  font-family: "Anta";
  src: url("https://repixel.de/static/fonts/Anta-Regular.woff2") format("woff2");
  font-display: swap;
}


/* ================= HERO TITLE ================= */

.para-1 h1 {
  margin: 2rem 0 0 2rem;
  font-size: 2.8rem;
  letter-spacing: 0.6em;
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Anta", Arial, sans-serif !important;

  background: var(--rainbow);
  background-size: 200% 100%;

  animation: rainbowFlow 10s linear infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.para-1 h1:hover {
  animation:
    rainbowFlow 6s linear infinite,
    glowPulse 3s ease-in-out infinite alternate;
}


/* ================= GLOW ================= */

@keyframes glowPulse {
  from {
    text-shadow:
      0 0 5px red,
      0 0 10px orange,
      0 0 15px yellow,
      0 0 20px cyan;
  }
  to {
    text-shadow:
      0 0 10px violet,
      0 0 20px blue,
      0 0 30px cyan,
      0 0 40px lime;
  }
}


/* ================= SQUARE ================= */

/* ================= SQUARE ================= */
.square {
  position: relative;
  width: clamp(15%, 20em, 40%);
  aspect-ratio: 1 / 1;
  padding: 8px;
  border-radius: 12px;

  background: var(--rainbow), var(--rainbow);
  background-size: 200% 100%;
  background-blend-mode: screen;

  animation: rainbowFlow 6s linear infinite, floaty 3s ease-in-out infinite;

  filter: saturate(1.5) brightness(1.2);
}

/* ================= ANIMATION ================= */
@keyframes rainbowFlow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* Continuous float effect (up 5px and back) */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}



.square::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 8px;
  border-radius: inherit;

  background: inherit;

  animation: rainbowFlow 6s linear infinite reverse;
  animation-delay: -3s;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask-composite: exclude;

  z-index: 1;
}

.square::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 8px;

  background: rgba(30, 30, 30, 0.4);
  backdrop-filter: blur(8px);
}


/* ================= ANIMATION ================= */

@keyframes rainbowFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}


/* ================= OVERLAY ================= */

.overlay-link {
  position: absolute;
  top:10%;
  left:0;
  width: 100%;
  height:55%;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.03); /* lighter, almost invisible */
  border: 0; /* remove border if you don’t want it visible */
}
.overlay-link a {
  display: block;
  width: 100%;
  height: 100%;
}


 

/* ==============================================
**
**                   FORM 
**
** ============================================== 
*/


.sodinform {
  margin-top: -0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  background-color: var(--bg-dark);
}



/* ================= HONEYPOT ================= */

.sodiform-form .hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}




/***********************************************************


/* =====================================
   ROOT VARIABLES (example fallback)
   ===================================== */
:root {
  --bg-dark: #222;
  --rainbow: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    violet
  );
}

/* =====================================
   WRAPPER (ALL VISUAL MAGIC HERE)
   ===================================== */
.sodiwrap {
  position: relative;
  width: 20rem;
  border-radius: 6px;
}

/* RAINBOW BORDER LAYER */
.sodiwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;

  background: var(--rainbow);
  background-size: 200% 100%;
  animation: rainbowFlow 6s linear infinite;

  /* mask trick = consistent border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  pointer-events: none;
}

/* INNER BACKGROUND */
.sodiwrap::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--bg-dark);
  pointer-events: none;
}

/* =====================================
   INPUT (KEEP IT SIMPLE = STABLE)
   ===================================== */
.sodipass {
  position: relative;
  width: 100%;
  padding: 0.8rem 0.6rem;

  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 0.3em;

  border: none;
  outline: none;
  background: transparent;

  color: transparent;     /* hide actual text */
  text-shadow: none;

  caret-color: #fff;
  z-index: 1;
}

/* PLACEHOLDER */
.sodipass::placeholder {
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.2em;
}

/* =====================================
   TEXT EFFECT (WHEN ACTIVE)
   ===================================== */
.sodipass:focus,
.sodipass:not(:placeholder-shown) {
  text-shadow:
    -4px -7px 0px green,
    6px 3px 0px blue,
    -5px 2px 0px red,
    6px -5px 0px gold;
}

/* =====================================
   AUTOFILL FIXES (REAL PAIN AREA)
   ===================================== */

/* CHROME / EDGE / SAFARI */
.sodipass:-webkit-autofill,
.sodipass:-webkit-autofill:hover,
.sodipass:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-dark) inset !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #fff !important;

  /* prevents yellow flash */
  transition: background-color 9999s ease-in-out 0s;
}

/* FIREFOX */
.sodipass:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--bg-dark) inset !important;
  -moz-text-fill-color: transparent !important;
}

/* =====================================
   ANIMATION
   ===================================== */
@keyframes rainbowFlow {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}



 






 







/* ================= PLAYER ================= */

/* ================= TITLE ================= */
.colormal {
  margin: 2rem 0 0;
  font-size: 2.8rem;
  letter-spacing: 0.6em;
  font-weight: 300;
  text-transform: uppercase;
  font-family: "Anta", Arial, sans-serif !important;

  background: var(--rainbow);
  background-size: 200% 100%;
  
  animation: rainbowFlow 10s linear infinite, floaty 3s ease-in-out infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Continuous float effect (up 5px and back) */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}





 
  
  
  
  
  
  
  
  



/* ================= SONG LIST ================= */
ul.songlist {  list-style: none;  padding: 0;  margin: 4rem auto;  width: 88%;  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 1.2rem;}

/* ================= ITEM ================= */
ul.songlist li {  flex: 0 1 200px;  max-width: 260px;  position: relative;  padding: 0.6rem;  animation: drift 6s ease-in-out infinite;}

/* ================= OUTER RAINBOW BORDER ================= */

ul.songlist li::before {  content: "";  position: absolute;  inset: 0;  border-radius: 12px;  background: var(--rainbow);  background-size: 300% 100%;  animation: rainbowSlide 8s linear infinite;  z-index: 0;}/* INNER DARK LAYER */ul.songlist li::after {  content: "";  position: absolute;  inset: 6px;  border-radius: 10px;  background: rgba(30, 30, 30, 0.85);  z-index: 1;}

/* ================= LINK ================= */ul.songlist li a {  position: relative;  z-index: 2;  display: flex;  flex-direction: column;  align-items: center;  justify-content: flex-start;  width: 100%;  height: 100%;  padding: 1rem;  color: white !important;  overflow: hidden; /* important for inner bg */}

/* ================= INNER RAINBOW BG (OPPOSITE FLOW) ================= */ul.songlist li a::before {  content: "";  position: absolute;  inset: 0;  z-index: -1;  background: var(--rainbow);  background-size: 300% 100%;  opacity: 0.75;  filter: blur(6px);  animation: rainbowSlideReverse 10s linear infinite,             driftReverse 7s ease-in-out infinite;}

/* ================= TITLE ================= */ul.songlist li h3 {  width: 100%;  margin: 0.6em auto;  text-align: center;  font-size: clamp(0.95rem, 1.6vw, 1.2rem);  line-height: 1.3;  order: 1;  word-break: break-word;}

/* ================= DESCRIPTION ================= */ul.songlist li p,ul.songlist li .desc {  width: 100%;  margin-top: 0.2rem;  font-size:1.1rem;  opacity: 0.75;  text-align: center;  order: 2 ; text-shadow:
    0x 0px 0px black,
    1px 1px 1px black;
}
/* ================= ANIMATIONS ================= */
/* BORDER FLOW (RIGHT →) */@keyframes rainbowSlide {  0%   { background-position: 0% 50%; }  100% { background-position: 300% 50%; }}/* INNER FLOW (LEFT ← opposite direction) */@keyframes rainbowSlideReverse {  0%   { background-position: 300% 50%; }  100% { background-position: 0% 50%; }}/* OUTER FLOAT */@keyframes drift {  0%,100% { transform: translateX(0); }  50%     { transform: translateX(6px); }}/* INNER FLOAT (OPPOSITE) */@keyframes driftReverse {  0%,100% { transform: translateX(0); }  50%     { transform: translateX(-6px); }}

/* ================= VARIATION PER ITEM ================= */
ul.songlist li:nth-child(1)::before { animation-duration: 7s; }ul.songlist li:nth-child(2)::before { animation-duration: 9s; animation-direction: reverse; }ul.songlist li:nth-child(3)::before { animation-duration: 8s; }ul.songlist li:nth-child(4)::before { animation-duration: 10s; animation-direction: reverse; }ul.songlist li:nth-child(5)::before { animation-duration: 7.5s; }ul.songlist li:nth-child(6)::before { animation-duration: 11s; animation-direction: reverse; }/* optional extra chaos (feels more alive) */ul.songlist li:nth-child(2) { animation-duration: 6.5s; }ul.songlist li:nth-child(4) { animation-duration: 6s; }ul.songlist li:nth-child(6) { animation-duration: 7.5s; }

























/* ================= BACK BUTTON ================= */
.backtotracks {
position: relative;
display: inline-block;
padding: 0.6rem 1.4rem;
border-radius: 10px;
background: inherit;
color: #fff;
z-index: 1;
opacity: 0.7;
margin-top:3rem;
}

.backtotracks::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 12px;
/*
background: var(--rainbow);
background-size: 200% 100%;
animation: rainbowFlow 6s linear infinite;*/

z-index: -1;
}

.backtotracks {
transform: scale(1.05);
opacity: 1;
}

/* ================= UTIL ================= */
.hp {
position: absolute !important;
left: -9999px !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
 
}
 

/* ================= ANIMATIONS ================= */
@keyframes rainbowFlow {
from { background-position: 0% 50%; }
to { background-position: 200% 50%; }
}

/* FLOATING EFFECT (your new hover vibe) */
@keyframes floaty {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}





/* ==================================
**
**      error messsages 
**
** ==================================
*/

.error-overlay {
  position: fixed; /* Fixed to the viewport */
  top: 10%;         /* 10% from the top of the viewport */
  left: 10%;        /* 10% from the left of the viewport */
  width: 80%;       /* 80% of the window width */
  height: 80%;      /* 80% of the window height */
  background-color: black; /* Black background */
  border: 2px solid red;  /* Red border */
  color: white;     /* White text color */
  z-index: 99;      /* High z-index to ensure it is on top */
  display: flex;    /* To center the content (optional) */
  justify-content: center; /* Center content horizontally */
  align-items: center;     /* Center content vertically */
  box-sizing: border-box;  /* To include padding/border in the total size */
}

.playerbox {
  width: 90%;
  max-width: 600px;
  padding: 2rem;
  border-radius: 14px;
  background: #000 !important; /* Forcefully set background to black */
  border: 1px solid #333;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.05) inset;
  text-align: center;
}

/* Player Container */
.player { /*
  width: 80%; /* Adjust the size as needed */ /*
  max-width: 400px;
  padding: 2rem;
  background-color: #000; /* Black background */ /*
  border-radius: 50%; /* Circular border, adjust as needed */ /*
  border: 2px solid #333; /* Optional border */ /*
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.05) inset;
  text-align: center;
  position: relative;
  overflow: hidden; /* To keep the circle shape */
}

/* Progress Bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #fff; /* White background for progress bar */
  border-radius: 4px;
  margin-top: 1rem;
  position: relative;
}

.progress-bar .progress {
  height: 100%;
  width: 0%; /* Default, update with JS or CSS animation */
  background-color: #00f; /* You can change this color */
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}