@font-face {
    font-family: 'MiFuenteNueva';
    src: url('PSYCHO PERSONAL USE-SVG.otf') format('truetype');
}

body {
    background-image: url('/Elon Musk Space GIF by Lumi.gif');
    background-size: cover;
    background-attachment: fixed;
    cursor: url('/cora_Mesa de trabajo 1.png'), auto;
}

body {
    margin: 0;
    padding-bottom: 80px; /* Evita que el footer tape tu contenido real */
    min-height: 100vh;
    box-sizing: border-box;
}

.pasto-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Ajustá esta altura según lo alto que sea tu dibujo de pasto */
    height:100px; 
    
    /* Reemplazá el link de abajo por la URL de tu propio GIF en Neocities */
    background-image: url('https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExcDR6NmFieXdseG5tZmQzeXRpaGNzem9zejI3ZHBjcDh3amw0aTJmaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/pBqN8v7IReAIFZuV1A/giphy.gif'); 
    background-repeat: repeat-x;
    .mi-boton-instagram {
  display: inline-block;   /* Permite aplicar márgenes correctamente */
  margin-top: 15px;        /* Empuja el botón hacia abajo */
  margin-left: 40px;       /* Empuja el botón hacia la derecha */
}

.mi-boton-instagram img {
  width: 10px;            /* Cambia aquí el TAMAÑO del GIF */
  height: auto;
}
    
    background-size: auto 100px;
    /* Este truco evita que el navegador suavice los píxeles al estirar la imagen */
    image-rendering: pixelated;
    image-rendering: crisp-edges;

    /* Estilos opcionales por si ponés texto dentro del footer */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: monospace;
    z-index: 999; /* Asegura que siempre quede por encima del contenido */
}
.boton-pin img {
    width: 100%;       /* Hace que cubra el ancho máximo permitido */
    height: 100%;      /* Hace que cubra el alto máximo permitido */
    object-fit: contain; /* CRUCIAL: Evita que el GIF se deforme o se estire, adaptándolo al marco */
    border-radius: 12px;
    max-width: 60px;   /* Controla el tamaño máximo del GIF dentro del botón blanco */
    max-height: 60px;  /* Controla la altura máxima del GIF dentro del botón blanco */
    margin: auto;      /* Lo mantiene perfectamente centrado */
}
.boton-pin img {
    /* CONTROL DE TAMAÑO */
    max-width: 70px;     /* Cambia este número para achicar o agrandar el GIF */
    max-height: 70px;    /* Mantén este igual al de arriba para que sea simétrico */
    object-fit: contain; /* Evita que el GIF se deforme al cambiarle las medidas */

    /* CONTROL DE POSICIÓN (Centrado absoluto) */
    display: block;
    margin: auto;
}
h1 {
    font-family: 'Rubik Glitch', sans-serif;
    color: #fcfaf2;
    font-size: 4rem;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -2px;
    transform: rotate(-2deg);
    margin-top: 50px;
}

.subtitle {
    font-family: 'Special Elite', monospace;
    text-align: center;
    color: #fff;
    background-color: #ff003c;
    display: table;
    padding: 5px 15px;
    font-weight: bold;
    transform: rotate(1deg);
    margin: 0 auto;
    text-transform: uppercase;
}

.music-player {
    max-width: 550px;
    margin: 60px auto;
    background: #810aea;
    padding: 30px;
    border: 4px solid #ffffff;
    box-shadow: 12px 12px 0px #ff003c;
    transform: rotate(-1deg);
}

h2 {
    font-family: 'MiFuenteNueva', monospace;
    color: #ffffff;
    text-transform: uppercase;
    border-bottom: 3px dashed #ff003c;
    padding-bottom: 10px;
    font-size: 1.5rem;
}

iframe {
    border: 3px solid #000000 !important;
    filter: grayscale(100%) contrast(150%);
    margin-top: 20px;
}

.bio {
    max-width: 550px;
    margin: 40px auto;
    background-color: #ffffff;
    color: #000000;
    padding: 25px;
    border: 4px solid #000000;
    box-shadow: -10px 10px 0px #ffffff;
    transform: rotate(1.5deg);
}
h1 {
    font-family: 'MiFuenteNueva', sans-serif !important;
}
.boton-gif-musical {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* Ajusta el espaciado para centrarlo si lo necesitas */
  display: flex;
  margin: 30px auto;
}

/* Controla el tamaño de tu GIF (como hicimos con Instagram) */
.boton-gif-musical img {
  width: 50px; /* Ajusta este valor al tamaño que quieras en tu página */
  height: auto;
  border-radius: 12px; /* Opcional: para suavizar los bordes si el GIF es cuadrado */
}

/* EFECTO AL PASAR EL MOUSE (HOVER) */
.boton-gif-musical:hover {
  transform: scale(1.1) rotate(2deg); /* Se agranda y gira un poquito */
  
  /* Opcional: añade un brillo */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); 
}

/* EFECTO AL HACER CLIC (ACTIVE) */
.boton-gif-musical:active {
  transform: scale(1.0); /* Vuelve al tamaño original */
}
.boton-dibujos {
  display: inline-block;
  padding: 6px 18px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  border: 2px solid #000;
  background-color: transparent;
  margin-left: 20px; /* Deja espacio de separación con el logo de la izquierda */
  vertical-align: middle; /* Alinea la altura con respecto al logo */
  transition: all 0.2s ease;
}

/* Efecto al pasar el cursor */
.boton-dibujos:hover {
  background-color: #000;
  color: #fff;
}
.boton-gif-enlace {
  display: inline-block;
  vertical-align: middle; /* Lo alinea a la misma altura que el logo y el otro botón */
  margin-left: 20px;       /* Separa este botón del anterior */
  text-decoration: none;
}

/* Controla el tamaño de tu GIF para que no se desconfigure el diseño */
.gif-galeria {
  display: block;
  width: 60px;           /* Ajusta este valor (en píxeles) según el tamaño que quieras */
  height: auto;           /* Mantiene la proporción original del GIF */
  border: none;
  transition: transform 0.2s ease; /* Pequeño efecto visual al pasar el cursor */
}

/* Efecto opcional: se agranda un poco al pasar el mouse */
.gif-galeria:hover {
  transform: scale(1.05);
}