.profile-image {

   width: 30%;
   height: 30%;
   border-radius: 50%;
   /* Esto hace que la imagen tenga forma de círculo */
   margin-top: 8px;
   /* Ajusta el valor a la cantidad de píxeles que desees como margen superior */

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .profile-image {
     max-width: 10%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border-radius: 50%;
     /* Esto hace que la imagen tenga forma de círculo */
     margin-top: 8px;
     /* Ajusta el valor a la cantidad de píxeles que desees como margen superior */
   }
 }

 .profile-musicbot {

   width: 30%;
   height: 30%;
   border-radius: 50%;
   /* Esto hace que la imagen tenga forma de círculo */
   margin-top: 8px;
   /* Ajusta el valor a la cantidad de píxeles que desees como margen superior */

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .profile-musicbot {
     max-width: 10%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border-radius: 50%;
     /* Esto hace que la imagen tenga forma de círculo */
     margin-top: 8px;
     /* Ajusta el valor a la cantidad de píxeles que desees como margen superior */
   }
 }

 .profile-banner {

   width: 100%;
  
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .profile-banner {
     max-width: 40%;
     /* Ajusta el tamaño máximo de la imagen */
   }
 }

 .button-stream-image {

  width: 16%;
  height: 16%;
  border: 3px solid white;
}

@media (min-width: 768px) {

  /* Estilos para pantallas más grandes (escritorio) */
  .button-stream-image {
    max-width: 13%;
    /* Ajusta el tamaño máximo de la imagen */
    height: auto;
    /* Mantiene la proporción original de la imagen */
    border: 3px solid white;
  }
}

 .button-image {

   width: 24%;
   height: 8%;
   border-radius: 10px;

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .button-image {
     max-width: 12%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border-radius: 10px;
   }
 }

 .button-image-big {

  width: 96%;
  height: 32%;
  border-radius: 10px;

}

@media (min-width: 768px) {

  /* Estilos para pantallas más grandes (escritorio) */
  .button-image-big {
    max-width: 48%;
    /* Ajusta el tamaño máximo de la imagen */
    height: auto;
    /* Mantiene la proporción original de la imagen */
    border-radius: 10px;
  }
}

 .button-image-small {

  width: 24%;
  height: 8%;

}

.button-rrss {

  width: 36%;
  height: auto;
  background-color: white;
  border-radius: 10px;

}

@media (min-width: 768px) {

  /* Estilos para pantallas más grandes (escritorio) */
  .button-rrss {

    width: 24%;
    height: auto;

  }

}

.icon-rrss {

  width: 9%;
  height: auto;

}

@media (min-width: 768px) {

  /* Estilos para pantallas más grandes (escritorio) */
  .icon-rrss {

    width: 3%;
    height: auto;

  }

}

 .main-image {

   width: 88%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .main-image {
     max-width: 68%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .main-image-musicbot {

  width: 100%;
  border: 3px solid white;
}

 .horizontal-image {

   width: 100%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .horizontal-image {
     max-width: 100%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .square-image {

   width: 48%;
   height: 32%;
   border: 3px solid white;

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .square-image {
     max-width: 25%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .rectangle-image {

   width: 32%;
   border: 3px solid white;
 }

 .vertical-image {

   width: 32%;
   height: 42%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .vertical-image {
     max-width: 25%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .four-four-image {

   width: 36%;
   height: 36%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .four-four-image {
     max-width: 25%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .four-four-big-image {

   width: 60%;
   height: 60%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .four-four-big-image {
     max-width: 48%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 .banner-image {

   width: 98%;
   border: 3px solid white;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .banner-image {
     max-width: 78%;
     /* Ajusta el tamaño máximo de la imagen */
     height: auto;
     /* Mantiene la proporción original de la imagen */
     border: 3px solid white;
   }
 }

 

 video {

   border: 3px solid white;

 }

 /* Estilo para las imágenes en pantalla completa */
 .fullscreen {
   width: 100%;
   height: 100%;
   object-fit: contain;
   position: fixed;
   top: 0;
   left: 0;
   background-color: black;
   cursor: zoom-out;
 }