@font-face {
    font-family: 'Montserrat';
    src: url('assets/Fonts/Montserrat-Black.ttf') format('ttf');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('assets/Fonts/Montserrat-ExtraBold.ttf') format('ttf');
    font-weight: 800;
    font-style: normal;
}

.NavigationBar {
  background-color: #00000000;
  position: relative;
  top: 30px;
  z-index: 1000;
  height: 60px;
  width: 100%;
}

.Navigation-links {
  list-style: none;
  display: flex;

  justify-content: center;
  gap: 100px;
  font-size: 28px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.Navigation-links li a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: bold;
  display: inline-block; 
  transition: color 0.3s, transform 0.3s ease;
}

.Navigation-links li a:hover {
  transform: translateY(-10px);
  color: #fff;
}

body {
    background-color: rgba(5, 5, 5, 0.952);
    color: white;
    margin: 0;
    font-family: 'Montserrat', sans-serif;

    background-image: url('/assets/BackgroundLoop.png');
    background-repeat: repeat-y;
    background-size: 100% auto; /* adjust based on image height */
    background-position: top center;

  animation: scrollOverlay 40s linear infinite;
}
h1.page-title {
    font-size: 50px;
    text-align: center;
    margin-top: 20px;
    font-weight: 1000;
    color: #ffffff;
}
h2.page-title {
    line-height: 1;
    font-size: 100px;
    text-align: center;
    margin-top: 20px;
    font-weight: 1000;
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff, #777777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 0.5cap rgba(255, 255, 255, 0.4);
}

h3.artistinfo-title {
    line-height: 1;
    font-size: 52px;
    text-align: center;
    margin-top: 20px;
    font-weight: 1000;
    color: #ffffff;
}

h2, h3 {
  margin: 0;
  padding: 0;
}

p.page-description {
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    font-weight: 600;
    color: #ffffff;
}
p, div {
    text-align: center;
}

.page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
gap: 20px
}

.header {
    display: flex;
    gap: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.overlay.show {
  display: flex;
}

.songs-list {
    scroll-behavior: auto;
    line-height: 1.6;
    margin-top: 20;
    margin-bottom: 10;
    text-align: center;
    font-size: 18px;
    font-weight: 1000;
    background: linear-gradient(180deg, #ffffff, #777777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 0.5cap rgba(255, 255, 255, 0.4);
}


.TwoPac_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #000002, #a33a45, #260B04);
    box-shadow: 0 0 10px 3px #260B04,
    0 0 30px 10px #a33a45;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TwoPac_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #89323A;
}

.ABBA_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #37426B, #0079b1, #00bfff, #0079b1, #37426B);
    box-shadow: 0 0 10px 3px #00bfff,
    0 0 30px 10px #37426B;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.ABBA_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #00bfff;
}

.ACDC_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #101115, #5F6563, #F2FFFA, #5F6563, #101115);
    box-shadow: 0 0 10px 3px #101115,
    0 0 30px 10px #ffffff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.ACDC_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #ffffff;
}

.ArcticMonkeys_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #1A3238, #7AE4FF, #1A3238);
    box-shadow: 0 0 10px 3px #00abd6,
    0 0 30px 10px #396D7A;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.ArcticMonkeys_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #9dd6ff;
}

.BillyJoel_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #313131, #CDA33C, #313131);
    box-shadow: 0 0 10px 3px #313131,
    0 0 30px 10px #CDA33C;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.BillyJoel_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #CDA33C;
}

.BlackEyedPeas_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #020202, #3BC665, #3DFF70, #3BC665, #020202);
    box-shadow: 0 0 10px 3px #3DFF70,
    0 0 30px 10px #3BC665;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.BlackEyedPeas_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #3DFF70;
}

.BrunoMars_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #FFC021, #FBF0C3, #FFC021);
    box-shadow: 0 0 10px 3px #FBF0C3,
    0 0 30px 10px #FFC021;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.BrunoMars_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #FFC021;
}

.CalvinHarris_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #816f5b, #9dd6ff, #917060);
    box-shadow: 0 0 10px 3px #5A4E40,
    0 0 30px 10px #9dd6ff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.CalvinHarris_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #9dd6ff;
}

.DaftPunk_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #0A0C0B, #DBEDFF, #FFE272, #0A0C0B);
    box-shadow: 0 0 10px 3px #DBEDFF,
    0 0 30px 10px #FFE272;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.DaftPunk_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #DBEDFF;
}

.DojaCat_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #8600C4, #6AD3FF, #5A00E2);
    box-shadow: 0 0 10px 3px #1E6CAC,
    0 0 30px 10px #8600C4;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.DojaCat_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #7A254E;
}

.Drake_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #ffffff, #D53BA6, #3887FF, #42E578, #ffffff);
    box-shadow: 0 0 10px 3px #3887FF,
    0 0 30px 10px #ffffff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Drake_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #7A254E;
}

.ELO_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #E4A32B, #256A87, #B8373B);
    box-shadow: 0 0 10px 3px #B8373B,
    0 0 30px 10px #642538;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.ELO_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #7A254E;
}

.Eminem_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #AD2730, #FFBF49, #AD2730);
    box-shadow: 0 0 10px 3px #FFBF49,
    0 0 30px 10px #AD2730;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Eminem_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #AD2730;
}

.DominicFike_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #476275, #DD2839, #EE7F37);
    box-shadow: 0 0 10px 3px #476275,
    0 0 30px 10px #DD2839;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.DominicFike_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #7A254E;
}

.Gorillaz_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #1F1111, #ff3697, #ff6d79);
    box-shadow: 0 0 10px 3px #df2d83,
    0 0 30px 10px #9b004b;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Gorillaz_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #d10065;
}

.JuiceWRLD_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #FFFFFF, #1897E0, #ffe855);
    box-shadow: 0 0 10px 3px #FFFFFF,
    0 0 30px 10px #1897E0;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.JuiceWRLD_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #1582C3;
}

.KanyeWest_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #ff9b7f, #ff52b4, #c300ff);
    box-shadow: 0 0 10px 3px #ff5eb9,
    0 0 30px 10px #8e00b9;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.KanyeWest_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #c300ff;
}

.KatyPerry_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #6BA6FF, #FFA784, #FFB5D5);
    box-shadow: 0 0 10px 3px #FFB5D5,
    0 0 30px 10px #FFB5D5;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.KatyPerry_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #FFB5D5;
}

.Kendrick_Lamar_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #4482A7, #E2E2E2, #5C7869);
    box-shadow: 0 0 10px 3px #E2E2E2,
    0 0 30px 10px #4482A7;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Kendrick_Lamar_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #5C7869;
}

.LADYGAGA_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #0B2945, #D61F23, #E7BEB8);
    box-shadow: 0 0 10px 3px #D61F23,
    0 0 30px 10px #0B2945;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.LADYGAGA_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #0199CA;
}

.MaroonFive_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #511A1E, #db262f, #ff8570, #db262f, #511A1E);
    box-shadow: 0 0 10px 3px #ff8570,
    0 0 30px 10px #db262f;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.MaroonFive_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #db262f;
}

.MGMT_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #2F3AE1, #DD001D, #6C59E9);
    box-shadow: 0 0 10px 3px #6C59E9,
    0 0 30px 10px #6C59E9;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.MGMT_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #E5E3E4;
}

.MichaelJackson_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #000000, #ffffff, #CD8C64);
    box-shadow: 0 0 10px 3px #CD8C64,
    0 0 30px 10px #ffffff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.MichaelJackson_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #E5E3E4;
}

.MCR_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #1D1B1C, #E5E3E4, #1D1B1C);
    box-shadow: 0 0 10px 3px #1D1B1C,
    0 0 30px 10px #E5E3E4;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.MCR_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #E5E3E4;
}

.NBAYOUNGBOY_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #46200D, #9D1311, #B7ADAB);
    box-shadow: 0 0 10px 3px #B7ADAB,
    0 0 30px 10px #9D1311;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.NBAYOUNGBOY_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #9D1311;
}

.Paramore_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #000000, #E45628, #FCFEFD);
    box-shadow: 0 0 10px 3px #E45628,
    0 0 30px 10px #FCFEFD;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Paramore_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #E45628;
}

.PostMalone_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #212624, #58B7B4, #E2DCF2, #58B7B4, #212624);
    box-shadow: 0 0 10px 3px #212624,
    0 0 30px 10px #58B7B4;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.PostMalone_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #58B7B4;
}

.Queen_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #FF0008, #00ff37, #00c8ff, #ffff00);
    box-shadow: 0 0 10px 3px #FF0008,
    0 0 30px 10px #00c8ff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.Queen_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #FF0008;
}

.SabrinaCarpenter_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #2167ff, #ff8b43, #4492ff);
    box-shadow: 0 0 10px 3px #4492ff,
    0 0 30px 10px #2167ff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.SabrinaCarpenter_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #2167ff;
}

.TameImpala_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #FA3C56, #C976E0, #F7A325);
    box-shadow: 0 0 10px 3px #C976E0,
    0 0 30px 10px #C976E0;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TameImpala_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #0199CA;
}

.TheKillers_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #63B3FF, #D6EDFF, #63B3FF);
    box-shadow: 0 0 10px 3px #D6EDFF,
    0 0 30px 10px #63B3FF;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TheKillers_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #63B3FF;
}

.TheRollingStones_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #000000, #E21939, #000000);
    box-shadow: 0 0 10px 3px #E21939,
    0 0 30px 10px #C0C7CF;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TheRollingStones_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #E21939;
}

.TheStrokes_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #D1CDA7, #FFB214, #0199CA);
    box-shadow: 0 0 10px 3px #FFB214,
    0 0 30px 10px #0199CA;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TheStrokes_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #0199CA;
}

.TheWeeknd_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #A21C00, #2C1F0C, #5E0501);
    box-shadow: 0 0 10px 3px #A21C00,
    0 0 30px 10px #5E0501;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TheWeeknd_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #ff0000;
}

.TravisScott_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #5DA2D3, #ffcb2e, #BBA580);
    box-shadow: 0 0 10px 3px #5DA2D3,
    0 0 30px 10px #ff9900;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.TravisScott_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #ffcb2e;
}

.WithoutWarning_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #FF0709, #1C1D1A, #FFFBBA);
    box-shadow: 0 0 10px 3px #1C1D1A,
    0 0 30px 10px #FF0709;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.WithoutWarning_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #FF0709;
}

.XXXTENTACION_TextBox1 {
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    border-radius: 20px;
    padding: 5px;
    margin: 30px;
    background-image: 
    linear-gradient(black, black),
    linear-gradient(90deg, #000000, #ffffff, #000000);
    box-shadow: 0 0 10px 3px #ffffff,
    0 0 30px 10px #ffffff;
    background-clip: content-box, border-box;
    background-origin: border-box;
    color: white;
}

.XXXTENTACION_MainFrame1:Hover {
    transform: translateY(-20px);
    box-shadow: 0 10px 25px #ffcb2e;
}

.KatyPerry_MainFrame1,
.Queen_MainFrame1,
.BlackEyedPeas_MainFrame1,
.ACDC_MainFrame1,
.BrunoMars_MainFrame1,
.WithoutWarning_MainFrame1,
.DaftPunk_MainFrame1,
.TheKillers_MainFrame1,
.MaroonFive_MainFrame1,
.Eminem_MainFrame1,
.TheRollingStones_MainFrame1,
.PostMalone_MainFrame1,
.BillyJoel_MainFrame1,
.ABBA_MainFrame1,
.ArcticMonkeys_MainFrame1,
.TameImpala_MainFrame1,
.Drake_MainFrame1,
.MichaelJackson_MainFrame1,
.XXXTENTACION_MainFrame1,
.TravisScott_MainFrame1,
.DojaCat_MainFrame1,
.Kendrick_Lamar_MainFrame1,
.Paramore_MainFrame1,
.MGMT_MainFrame1,
.DominicFike_MainFrame1,
.ELO_MainFrame1,
.KanyeWest_MainFrame1,
.JuiceWRLD_MainFrame1,
.MCR_MainFrame1,
.CalvinHarris_MainFrame1,
.LADYGAGA_MainFrame1,
.NBAYOUNGBOY_MainFrame1,
.TheWeeknd_MainFrame1,
.Gorillaz_MainFrame1,
.SabrinaCarpenter_MainFrame1,
.TheStrokes_MainFrame1,
.TwoPac_MainFrame1 {  
    flex: 0 0 19%;
    aspect-ratio: 1/1;
    position: relative;
    margin: 5px auto;
    background-color: #1a1a1a;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
}

.KatyPerry_InfoPopup,
.Queen_InfoPopup,
.BlackEyedPeas_InfoPopup,
.ACDC_InfoPopup,
.BrunoMars_InfoPopup,
.WithoutWarning_InfoPopup,
.DaftPunk_InfoPopup,
.TheKillers_InfoPopup,
.MaroonFive_InfoPopup,
.Eminem_InfoPopup,
.TheRollingStones_InfoPopup,
.PostMalone_InfoPopup,
.BillyJoel_InfoPopup,
.ABBA_InfoPopup,
.ArcticMonkeys_InfoPopup,
.TameImpala_InfoPopup,
.Drake_InfoPopup,
.MichaelJackson_InfoPopup,
.XXXTENTACION_InfoPopup,
.TravisScott_InfoPopup,
.DojaCat_InfoPopup,
.Kendrick_Lamar_InfoPopup,
.Paramore_InfoPopup,
.MGMT_InfoPopup,
.DominicFike_InfoPopup,
.ELO_InfoPopup,
.KanyeWest_InfoPopup,
.JuiceWRLD_InfoPopup,
.MCR_InfoPopup,
.CalvinHarris_InfoPopup,
.LADYGAGA_InfoPopup,
.NBAYOUNGBOY_InfoPopup,
.TheWeeknd_InfoPopup,
.Gorillaz_InfoPopup,
.SabrinaCarpenter_InfoPopup,
.TheStrokes_InfoPopup,
.TwoPac_InfoPopup {
  background-color: #111;
  padding: 20px 30px;
  border-radius: 20px;
  color: white;
  width: 800px;
  height: 1100px;
  max-width: 90vw;
  position: relative;
}

.KatyPerry_Rating1,
.Queen_Rating1,
.BlackEyedPeas_Rating1,
.ACDC_Rating1,
.BrunoMars_Rating1,
.WithoutWarning_Rating1,
.DaftPunk_Rating1,
.TheKillers_Rating1,
.MaroonFive_Rating1,
.Eminem_Rating1,
.TheRollingStones_Rating1,
.PostMalone_Rating1,
.BillyJoel_Rating1,
.ABBA_Rating1,
.ArcticMonkeys_Rating1,
.TameImpala_Rating1,
.Drake_Rating1,
.MichaelJackson_Rating1,
.XXXTENTACION_Rating1,
.TravisScott_Rating1,
.DojaCat_Rating1,
.Kendrick_Lamar_Rating1,
.Paramore_Rating1,
.MGMT_Rating1,
.DominicFike_Rating1,
.ELO_Rating1,
.KanyeWest_Rating1,
.JuiceWRLD_Rating1,
.MCR_Rating1,
.CalvinHarris_Rating1,
.LADYGAGA_Rating1,
.NBAYOUNGBOY_Rating1,
.TheWeeknd_Rating1,
.Gorillaz_Rating1,
.SabrinaCarpenter_Rating1,
.TheStrokes_Rating1,
.TwoPac_Rating1 {
    text-align: center;
    font-size: 300px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffffff,#949494);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px #000000;

    
}

.KatyPerry_InfoPopup.show,
.Queen_InfoPopup.show,
.BlackEyedPeas_InfoPopup.show,
.ACDC_InfoPopup.show,
.BrunoMars_InfoPopup.show
.WithoutWarning_InfoPopup.show,
.DaftPunk_InfoPopup.show,
.TheKillers_InfoPopup.show,
.MaroonFive_InfoPopup.show,
.Eminem_InfoPopup.show,
.TheRollingStones_InfoPopup.show,
.PostMalone_InfoPopup.show,
.BillyJoel_InfoPopup.show,
.ABBA_InfoPopup.show,
.ArcticMonkeys_InfoPopup.show,
.TameImpala_InfoPopup.show,
.Drake_InfoPopup.show,
.MichaelJackson_InfoPopup.show,
.XXXTENTACION_InfoPopup.show,
.TravisScott_InfoPopup.show,
.DojaCat_InfoPopup.show,
.Kendrick_Lamar_InfoPopup.show,
.Paramore_InfoPopup.show,
.MGMT_InfoPopup.show,
.DominicFike_InfoPopup.show,
.ELO_InfoPopup.show,
.KanyeWest_InfoPopup.show,
.JuiceWRLD_InfoPopup.show,
.MCR_InfoPopup.show,
.CalvinHarris_InfoPopup.show,
.LADYGAGA_InfoPopup.show,
.NBAYOUNGBOY_InfoPopup.show,
.TheWeeknd_InfoPopup.show,
.Gorillaz_InfoPopup.show,
.SabrinaCarpenter_InfoPopup.show,
.TheStrokes_InfoPopup.show,
.TwoPac_InfoPopup.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.KatyPerry_Hover1-number,
.Queen_Hover1-number,
.BlackEyedPeas_Hover1-number,
.ACDC_Hover1-number,
.BrunoMars_Hover1-number,
.WithoutWarning_Hover1-number,
.DaftPunk_Hover1-number,
.TheKillers_Hover1-number,
.MaroonFive_Hover1-number,
.Eminem_Hover1-number,
.TheRollingStones_Hover1-number,
.PostMalone_Hover1-number,
.BillyJoel_Hover1-number,
.ABBA_Hover1-number,
.ArcticMonkeys_Hover1-number,
.TameImpala_Hover1-number,
.Drake_Hover1-number,
.MichaelJackson_Hover1-number,
.XXXTENTACION_Hover1-number,
.TravisScott_Hover1-number,
.DojaCat_Hover1-number,
.Kendrick_Lamar_Hover1-number,
.Paramore_Hover1-number,
.MGMT_Hover1-number,
.DominicFike_Hover1-number,
.ELO_Hover1-number,
.KanyeWest_Hover1-number,
.JuiceWRLD_Hover1-number,
.MCR_Hover1-number,
.CalvinHarris_Hover1-number,
.LADYGAGA_Hover1-number,
.NBAYOUNGBOY_Hover1-number,
.TheWeeknd_Hover1-number,
.Gorillaz_Hover1-number,
.SabrinaCarpenter_Hover1-number,
.TheStrokes_Hover1-number,
.TwoPac_Hover1-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    font-weight: bold;
    font-size: clamp(16px, 10vw, 300px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;

}

.KatyPerry_MainFrame1:Hover .KatyPerry_Hover1-number,
.Queen_MainFrame1:Hover .Queen_Hover1-number,
.BlackEyedPeas_MainFrame1:Hover .BlackEyedPeas_Hover1-number,
.ACDC_MainFrame1:Hover .ACDC_Hover1-number,
.BrunoMars_MainFrame1:Hover .BrunoMars_Hover1-number,
.WithoutWarning_MainFrame1:Hover .WithoutWarning_Hover1-number,
.DaftPunk_MainFrame1:Hover .DaftPunk_Hover1-number,
.TheKillers_MainFrame1:Hover .TheKillers_Hover1-number,
.MaroonFive_MainFrame1:Hover .MaroonFive_Hover1-number,
.Eminem_MainFrame1:Hover .Eminem_Hover1-number,
.TheRollingStones_MainFrame1:Hover .TheRollingStones_Hover1-number,
.PostMalone_MainFrame1:Hover .PostMalone_Hover1-number,
.BillyJoel_MainFrame1:Hover .BillyJoel_Hover1-number,
.ABBA_MainFrame1:Hover .ABBA_Hover1-number,
.ArcticMonkeys_MainFrame1:Hover .ArcticMonkeys_Hover1-number,
.TameImpala_MainFrame1:Hover .TameImpala_Hover1-number,
.Drake_MainFrame1:Hover .Drake_Hover1-number,
.MichaelJackson_MainFrame1:Hover .MichaelJackson_Hover1-number,
.XXXTENTACION_MainFrame1:Hover .XXXTENTACION_Hover1-number,
.TravisScott_MainFrame1:Hover .TravisScott_Hover1-number,
.DojaCat_MainFrame1:Hover .DojaCat_Hover1-number,
.Kendrick_Lamar_MainFrame1:Hover .Kendrick_Lamar_Hover1-number,
.Paramore_MainFrame1:Hover .Paramore_Hover1-number,
.MGMT_MainFrame1:Hover .MGMT_Hover1-number,
.DominicFike_MainFrame1:Hover .DominicFike_Hover1-number,
.ELO_MainFrame1:Hover .ELO_Hover1-number,
.KanyeWest_MainFrame1:Hover .KanyeWest_Hover1-number,
.JuiceWRLD_MainFrame1:Hover .JuiceWRLD_Hover1-number,
.MCR_MainFrame1:Hover .MCR_Hover1-number,
.CalvinHarris_MainFrame1:Hover .CalvinHarris_Hover1-number,
.LADYGAGA_MainFrame1:Hover .LADYGAGA_Hover1-number,
.NBAYOUNGBOY_MainFrame1:Hover .NBAYOUNGBOY_Hover1-number,
.TheWeeknd_MainFrame1:Hover .TheWeeknd_Hover1-number,
.Gorillaz_MainFrame1:Hover .Gorillaz_Hover1-number,
.SabrinaCarpenter_MainFrame1:Hover .SabrinaCarpenter_Hover1-number,
.TheStrokes_MainFrame1:Hover .TheStrokes_Hover1-number,
.TwoPac_MainFrame1:Hover .TwoPac_Hover1-number {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);

}

.KatyPerry_MainFrame1-container,
.Queen_MainFrame1-container,
.BlackEyedPeas_MainFrame1-container,
.BlackEyedPeas_MainFrame1-container,
.ACDC_MainFrame1-container,
.BrunoMars_MainFrame1-container,
.WithoutWarning_MainFrame1-container,
.DaftPunk_MainFrame1-container,
.TheKillers_MainFrame1-container,
.MaroonFive_MainFrame1-container,
.Eminem_MainFrame1-container,
.TheRollingStones_MainFrame1-container,
.PostMalone_MainFrame1-container,
.BillyJoel_MainFrame1-container,
.ABBA_MainFrame1-container,
.ArcticMonkeys_MainFrame1-container,
.TameImpala_MainFrame1-container,
.Drake_MainFrame1-container,
.MichaelJackson_MainFrame1-container,
.XXXTENTACION_MainFrame1-container,
.TravisScott_MainFrame1-container,
.DojaCat_MainFrame1-container,
.Kendrick_Lamar_MainFrame1-container,
.Paramore_MainFrame1-container,
.MGMT_MainFrame1-container,
.DominicFike_MainFrame1-container,
.ELO_MainFrame1-container,
.KanyeWest_MainFrame1-container,
.JuiceWRLD_MainFrame1-container,
.MCR_MainFrame1-container,
.CalvinHarris_MainFrame1-container,
.LADYGAGA_MainFrame1-container,
.NBAYOUNGBOY_MainFrame1-container,
.TheWeeknd_MainFrame1-container,
.Gorillaz_MainFrame1-container,
.SabrinaCarpenter_MainFrame1-container,
.TheStrokes_MainFrame1-container,
.TwoPac_MainFrame1-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.KatyPerry_TextBox1 img,
.Queen_TextBox1 img,
.BlackEyedPeas_TextBox1 img,
.ACDC_TextBox1 img,
.BrunoMars_TextBox1 img,
.WithoutWarning_TextBox1 img,
.DaftPunk_TextBox1 img,
.TheKillers_TextBox1 img,
.MaroonFive_TextBox1 img,
.Eminem_TextBox1 img,
.TheRollingStones_TextBox1 img,
.PostMalone_TextBox1 img,
.BillyJoel_TextBox1 img,
.ABBA_TextBox1 img,
.ArcticMonkeys_TextBox1 img,
.TameImpala_TextBox1 img,
.Drake_TextBox1 img,
.MichaelJackson_TextBox1 img,
.XXXTENTACION_TextBox1 img,
.TravisScott_TextBox1 img,
.DojaCat_TextBox1 img,
.Kendrick_Lamar_TextBox1 img,
.Paramore_TextBox1 img,
.MGMT_TextBox1 img,
.DominicFike_TextBox1 img,
.ELO_TextBox1 img,
.KanyeWest_TextBox1 img,
.JuiceWRLD_TextBox1 img,
.MCR_TextBox1 img,
.CalvinHarris_TextBox1 img,
.LADYGAGA_TextBox1 img,
.NBAYOUNGBOY_TextBox1 img,
.TheWeeknd_TextBox1 img,
.Gorillaz_TextBox1 img,
.SabrinaCarpenter_TextBox1 img,
.TheStrokes_TextBox1 img,
.TwoPac_TextBox1 img {
    border-radius: 5px;
    max-width: 100%;
    height: auto;  
}


.Glow-Hover {
--glow-color: #E2E2E2; /* default per-box glow */
box-shadow: 0 0 15px var(--glow-color);
transition: box-shadow 0.3s ease;
}

.Grade {
    float: right;
    font-weight: bold;
    -webkit-text-fill-color: initial; /* Reset so JS color works */
    background: none;
    -webkit-background-clip: initial;
    text-shadow: none;
}

@keyframes scrollOverlay {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 100%;
  }
}