@font-face {
   font-family: 'brusher';   
   src: url('Brusher.ttf');
}
@font-face {
   font-family: 'internet friends';
   src: url('InternetFriends.ttf');
}
@font-face {
   font-family: 'milky matcha';
   src: url('Milky Matcha.otf');
}
@font-face {
   font-family: 'keshia';
   src: url('Keshia.ttf');
}
@font-face {
   font-family: 'magic clover';
   src: url('MagicClover.otf');
}
body {
      cursor: url("lpss.png"), auto;
      background-image: url('fondo.png');
      background-size: cover;
      background-attachment: fixed;
      margin: 0;
      padding: 0;
      height: 100vh;}
p {font-family: 'magic clover';
   font-size: 18px;
   text-align: center;
   margin: 20px;}
h1 { color: #92426e;
     font-family: 'brusher';
     font-weight: bold;
     text-align: center;
     font-size: 70px;}
h2 {color: #350069;
     font-family: 'milky matcha';
     font-weight: bold;
     text-align: center;
     font-size: 40px;
     margin: 10px;}
a {text-decoration: none;
   color: black;
   font-family: 'magic clover';
   cursor: url("lpss.png"), pointer;}
#título {display: block;
          margin: 10px auto;
          width: 400px;
          height: auto;}
#totoro {justify-content: center;
          width: 200px;
          height: 200px;
          object-fit: cover;
          border-radius: 10px;
          border: 2px solid #000000;}
#header {justify-content: center;
         display: flex;
         gap: 20px;}
#barra {display: flex;
         width: 95%;
         gap: 20px;
         margin: 0 auto;}
#barra li { justify-content: left;
             display: flex;
            list-style-type: none;
            text-decoration: none;
            font-family: 'magic clover';
            padding: 8px 14px;
              background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
             box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
            border-radius: 10px 10px 0 0;
            border-bottom: none;}
#barra li:hover {background-color: #e8d2e1;
                 border-color: #563762;
                 color: #563762;
                 transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.column {flex: 1;
         flex-direction: column;
         gap: 20px;
         background: linear-gradient(
            to bottom,
            #d883ad,   /* highlight transparente */
            #e8c0d4aa,   /* color medio */
            #9b79b399    /* sombra suave */
         );
         padding: 20px;
         justify-content: center;
         display: flex;
         border-radius: 15px;
         box-shadow: 0 0 15px #563762;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
.column:hover {
    transform: scale(1.03);
    box-shadow: 0 0 25px #563762;}
.container { display: flex;
               justify-content: center;
             gap: 20px;
             background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
             box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
             width: 90%;
             margin: auto;
             padding: 20px;
             border-radius: 10px;
             ;
             height: auto;
             flex-wrap: wrap;}
.decorative {position:absolute;
             width: 200px;
             height: auto;}
   .unicorn1 {top: 40px;
           left: 40px;}
   .cinnamon1 {top: 30px;
             right: 130px;}
.about-window {
    width: 100%;
    box-sizing: border-box;
}

.about-window h2 {
    font-size: 22px;
    margin-bottom: 10px;
    background: #d883ad;
    border-radius: 10px;
    font-family: 'milky matcha';
     background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
     box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
}

.about-box {
    height: 200px;          
    overflow-y: scroll;     
    padding: 15px;
     background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
     box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
    border-radius: 10px;
    box-sizing: border-box;
    text-align: justify;
}
.about-box p {
    text-align: justify;

}

.about-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-family: 'magic clover';
    font-size: 18px;
}
.about-box::-webkit-scrollbar {
    width: 20px;
}

.about-box::-webkit-scrollbar-track {
    background:#ffffff0c;
    border-radius: 10px;
    border: 1px solid #ffffff55;}

.about-box::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        #d883ad,   /* highlight transparente */
        #e8c0d4aa,   /* color medio */
        #9b79b399    /* sombra suave */
    );
    border-radius: 12px;
    border: 1px solid #ffffff55; /* borde luminoso */
    backdrop-filter: blur(2px);  /* efecto vidrio */
    box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
}

.y2kplayer { 
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: center;
    justify-content: center;
}
.player {
  background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
    border-radius: 12px;
    border: 1px solid #ffffff55; /* borde luminoso */
    backdrop-filter: blur(2px);  /* efecto vidrio */
    box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
    width: 100%;
    height: 100px;
}

.controls button {
  margin-top: 10px;
  margin-left: 10px;
  background: linear-gradient(145deg, #ffeaff2b, #f7d9ff1b);
  border: 2px solid #aeaeae71;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 18px;
  color: #563762;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.8),
    inset -2px -2px 4px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(216, 131, 173, 0.6);

  transition: 0.2s ease;
  
}

.controls button:hover {
  transform: scale(1.08);
  background: linear-gradient(145deg, #d39bda, #c681c6);
}

.controls button:active {
  transform: scale(0.95);
  box-shadow:
    inset -2px -2px 4px rgba(255, 255, 255, 0.8),
    inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}


.bar {
  width: 90%;
  height: 15px;
  background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 10px;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.116),
    inset -2px -2px 4px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(216, 131, 173, 0.136);}

.progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(
        to right,
        #d883ad,   /* highlight transparente */
        #e8c0d4aa,   /* color medio */
        #9b79b399    /* sombra suave */);
  box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
  border-radius: 10px;
}

.playlist {
  display: none;
}
.sparkle {
  position: fixed;
  width: 30px;
  height: 30px;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: sparkleFade 0.8s linear forwards;
  transform: translate(-50%, -50%);
}

@keyframes sparkleFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
about-box {
    height: 200px;          
    overflow-y: scroll;     
    padding: 15px;
     background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
     box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
    border-radius: 10px;
    box-sizing: border-box;
    text-align: justify;
}

.acts-box {
    width: 100%;
    height: 200px;          
    overflow-y: scroll;     
    padding: 10px;
     background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
     box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
    border-radius: 10px;
    box-sizing: border-box;
    text-align: justify;}
.acts-box p {
    text-align: justify;}
.acts-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: none;
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-family: 'magic clover';
    font-size: 18px;}
.acts-box::-webkit-scrollbar {
    width: 20px;
}

.acts-box::-webkit-scrollbar-track {
    background:#ffffff0c;
    border-radius: 10px;
    border: 1px solid #ffffff55;}

.acts-box::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        #d883ad,   /* highlight transparente */
        #e8c0d4aa,   /* color medio */
        #9b79b399    /* sombra suave */
    );
    border-radius: 12px;
    border: 1px solid #ffffff55; /* borde luminoso */
    backdrop-filter: blur(2px);  /* efecto vidrio */
    box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
}
.img {
    width: auto;
    object-fit: cover;
    border-radius: 10%;
    border: solid 2px #92426e;
    display: block;
    margin: auto;
}

.galeria {
  display: flex;
  gap: 15px;
  overflow-x: scroll;
  padding: 10px;
  width: 200px;
  height: 250px;
  margin: auto;
 
}


.galeria img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  scroll-snap-align: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px #563762;
  }

.artistas {
  text-align: center;
}

.artistas h2 {
  margin-bottom: 15px;
}
.galeria::-webkit-scrollbar {
    width: 20px;
}

.galeria::-webkit-scrollbar-track {
    background:#ffffff0c;
    border-radius: 10px;
    border: 1px solid #ffffff55;}

.galeria::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        #d883ad,   /* highlight transparente */
        #e8c0d4aa,   /* color medio */
        #9b79b399    /* sombra suave */
    );
    border-radius: 12px;
    border: 1px solid #ffffff55; /* borde luminoso */
    backdrop-filter: blur(2px);  /* efecto vidrio */
    box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
}

.titulo {
    width: 100%;
    box-sizing: border-box;
}

.titulo h2 {
    font-size: 22px;
    margin-bottom: 10px;
    background: #d883ad;
    border-radius: 10px;
    font-family: 'milky matcha';
     background: linear-gradient(
        to bottom,
        #e1e1e11b,   /* highlight transparente */
        #c6bec217,   /* color medio */
        #504c5318    /* sombra suave */
    );
     box-shadow:
        inset 0 2px 4px #ffffff88,  /* brillo interno */
        inset 0 -2px 4px #3d294a55, /* sombra interna */
        0 2px 4px #00000033;        /* sombra externa suave */
}