h1 {
  /* Como el libro de visitas */
  font-family: 'Orbitron', sans-serif;
  font-size: 4rem;
  text-transform: uppercase;
  justify-content: center;
  
  
  /* Degradado Animado */
  animation: blinker 1.5s linear infinite;
  background: repeating-linear-gradient(
    -45deg, 
    #035096 0%, 
    #7df9ff 25%, 
    #035096 50%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slide 15s infinite linear;

  /* EL BORDE SE AGREGA AQUÍ */
  -webkit-text-stroke: 1px 
#103754; /* Grosor de 1px y color cian eléctrico */
  
  /* Brillo opcional para que el borde resalte */
  filter: drop-shadow(0 0 5px rgba(125, 249, 255, 0.8));
}

@keyframes slide {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes blinker {
    50% { opacity: 0; }
}


body {
  background-color: #0b0e13; /* Color de respaldo por si la imagen tarda en cargar */
  color: #e0e0e0; /* Color de la letra */
  font-family: Verdana; /* Familia de Fuentes */
  background-image:url("GiFS/404outside.jpg"); /* Buscar la imagen y que el nombre coincida exactamente */
  background-repeat: no-repeat; /* Evita que la imagen se repita como mosaico */
  background-attachment: fixed;/* Fijamos el fondo (muy pro) */
  background-size:cover; /* Hace que la imagen cubra todo el espacio */
  background-position: center; /* Centrar la imagen*/
  cursor: url('https://file.garden/aa1pSHgnEzCVnhPq/Others/Skeletcursor.png'), auto;
}

/* Opcional: Cambia el cursor cuando pasas sobre links o botones */
a, button, .window-button {
    cursor: url('https://file.garden/aa1pSHgnEzCVnhPq/Others/Skeletpointer.png'), pointer;
}

main{
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6); 
    border: 2px solid #7df9ff;
    border-radius: 8px;
    text-align: center; /* Centra el texto y links dentro del cuadro */
    box-shadow: 0 0 15px rgba(125, 249, 255, 0.3);
    justify-content: center;
}

p {
  
  
  padding: 10px; /* Espacio para el texto no quede pegado */
  font-family: "Rationale", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.6;          /* Más espacio entre líneas para que sea fácil de leer */
  max-width: 800px;          /* Que el texto no sea eterno de ancho */
  margin: 10px auto;         /* Centra el bloque de texto */
  color: #c90000;
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}


/* --- PERSONALIZACIÓN DE LA BARRA DE DESPLAZAMIENTO --- */

/* 1. ESTILO GENERAL (Para Chrome, Edge, Safari y Opera) */

/* El contenedor principal de la barra (el fondo) */
::-webkit-scrollbar {
    width: 14px; /* Un poco más ancha para que se note el efecto */
    background-color: #0a0a26; /* Azul profundo como el espacio */
    border-left: 1px solid rgba(0, 255, 0, 0.2); /* Rejilla verde tenue */
}

/* El "pulgar" (la parte que se mueve y arrastras) */
::-webkit-scrollbar-thumb {
    /* Un degradado naranja neón */
    background: linear-gradient(180deg, #ff8c00 0%, #ff4500 100%); 
    
    /* Bordes redondeados sutiles */
    border-radius: 7px;
    
    /* Una rejilla interior verde tenue */
    border: 2px solid #0a0a26; /* Espacio negro alrededor del pulgar */
    
    /* El efecto de brillo (glow) naranja */
    box-shadow: 0 0 10px rgba(255, 140, 0, 0.7);
    
    /* Transición suave para el hover */
    transition: background 0.3s ease;
}

/* Efecto al pasar el mouse sobre el pulgar */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff4500 0%, #ff8c00 100%); /* Invierte el degradado */
    box-shadow: 0 0 20px rgba(255, 140, 0, 1); /* Brillo más intenso */
}

/* La parte superior e inferior (botones de flecha, opcional) */
::-webkit-scrollbar-button {
    display: none; /* Están cultos */
}

/* 2. ESTILO PARA FIREFOX (Soporte limitado) */

* {
    scrollbar-width: thin; /* Barra delgada */
    scrollbar-color: #ff8c00 #0a0a26; /* Pulgar Naranja / Fondo Negro */
}