@charset "utf-8";

/* CSS Document */


/* EFECTO LOCO */

/* Definición de la animación (vibración y cambio de color) */
@keyframes enloquecer {
  0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
  10% { transform: translate(-3px, 3px) skewX(-5deg); filter: hue-rotate(90deg); }
  30% { transform: translate(-1px, 2px) skewX(0deg); filter: hue-rotate(180deg); }
  50% { transform: translate(3px, -2px) skewX(5deg); filter: hue-rotate(270deg); }
  70% { transform: translate(-2px, -1px) skewX(-2deg); filter: hue-rotate(360deg); }
  100% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
}

/* Esta clase activa el efecto de forma continua mientras esté presente */
.efecto-activo {
  animation: enloquecer 0.3s infinite linear;
}

/* EFECTO LOCO END */



/* EFECTO IMAGEN-LOCA */

@keyframes enloquecer {
  0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
  10% { transform: translate(-3px, 3px) skewX(-5deg); filter: hue-rotate(90deg); }
  30% { transform: translate(-1px, 2px) skewX(0deg); filter: hue-rotate(180deg); }
  50% { transform: translate(3px, -2px) skewX(5deg); filter: hue-rotate(270deg); }
  70% { transform: translate(-2px, -1px) skewX(-2deg); filter: hue-rotate(360deg); }
  100% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg); }
}

/* Aplicamos la animación al pasar el ratón (hover) */
.imagen-loca:hover {
  animation: enloquecer 0.3s infinite linear;
}

/* Recomendado para que los efectos de movimiento funcionen bien */
.imagen-loca {
  display: inline-block;
}

/* EFECTO IMAGEN-LOCA END */





/* LOADING CONTENT */

body {
    margin: 0;
    font-family: sans-serif;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* LOADING CONTENT END */


/* GLITCH */


.glitch {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
               -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
               0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  animation: glitch 500ms infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
  opacity: 0.8;
}

.glitch::after {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(0.0125em, 0.025em);
  opacity: 0.8;
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.025em 0 rgba(0, 255, 0, 0.75);
  }
}


/* GLITCH END*/




/* BLACK SCREEN*/


#pantalla-negra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro casi opaco */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Asegura que quede por encima de todo */
    transition: opacity 0.5s ease;
}

#pantalla-negra.oculto {
    opacity: 1;
    visibility: hidden; /* Lo esconde visualmente y evita clics */
}

#pantalla-negra.mostrar {
	background-color: black;
    opacity: 1;
    visibility: visible;
}

.mensaje-centro {
	font-size: 33px;
    color: green;
    text-align: center;
    font-family: courier new;
}

.mensaje-centro button {
	font-family: courier new;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 33px;
    cursor:url(images/eyecursor.png),auto;
    border: none;
    background-color: black;
    color: green;
    border-radius: 5px;
}


/* BLACK SCREEN END */



/* ADAPTAR TAMAÑO INDEX A MONITORES MÁS GRANDES */


@media (min-width: 1281px) {
    .columnabig img {
        width: 33vw; 
    }
}


/* ADAPTAR TAMAÑO INDEX A MONITORES MÁS GRANDES END */




/* 3 COLUMNAS EN INDEX */

.contenedor-columnas {
  grid-template-columns: repeat(3, 1fr); /* Divide el espacio en 3 partes iguales */
  gap: 5px; /* Espacio de separación entre columnas */
  width: 100%; /* Ocupa el 100% del ancho de su contenedor padre */
  position: fixed;
  top: 33px;
  display: flex;
  justify-content: space-between;
}


.columna {
  background-color: white;
  padding: 0px;
  text-align: center;
  box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}


/* 3 COLUMNAS EN INDEX END */



/* HEADER Y FOOTER FIJO */


.header-fijo {
    position: fixed; /* Fija el div al viewport */
    top: 0;
    left: 0;
    width: 100%; /* Ancho total */
    height: 33px; /* Altura del header */
    background-color: hotpink; /* Color de fondo */
    color: black; /* Color del texto */

    /* Centrado con Flexbox */
    display: flex;
    justify-content: left; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}



.footer-fijo {
    position: fixed; /* Fija el div al viewport */
    bottom: 0;
    left: 0;
    width: 100%; /* Ancho total */
    height: 33px; /* Altura del header */
    background-color: hotpink; /* Color de fondo */
    color: black; /* Color del texto */

    /* Centrado con Flexbox */
    display: flex;
    justify-content: left; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}


.header-content p {
    margin: 0; /* Quita márgenes por defecto del párrafo */
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif;
    margin-left: 25px;
}

/* HEADER Y FOOTER FIJO END */




/* 1. Ancho de la barra de desplazamiento */
::-webkit-scrollbar {
    width: 10em; /* Ajusta este valor al grosor que necesites */
}

/* 2. Fondo de la barra (el carril por donde se mueve) */
::-webkit-scrollbar-track {
    background-color: hotpink; 
    background-image: url('images/track.jpg');
    background-position: top-left; /* Centra la imagen */
    background-size: cover; /* Ajusta la imagen al tamaño del scroll */
    background-repeat: repeat;
}

/* 3. El "tirador" o thumb (donde pondremos la imagen) */
::-webkit-scrollbar-thumb {
    background-image: url('images/thumb.jpg'); /* Reemplaza con la ruta de tu imagen */
    background-size: cover; /* Ajusta la imagen al tamaño del scroll */
    background-position: top-left; /* Centra la imagen */
    border-radius: 0px; /* Bordes redondeados */
    border: 13px solid hotpink;
}

/* Opcional: Cambiar la imagen cuando pases el ratón por encima */
::-webkit-scrollbar-thumb:hover {
    background-image: url('images/thumbhover.jpg');
    background-position: center; /* Centra la imagen */
}

	

/* A */


h1 a {
	cursor:url(images/lamcrowleycursor.png),auto;

}

h2 a {
	cursor:url(images/priapismocursor.png),auto;

}


h2 {
	cursor:url(images/handcursor.png),auto;

}


h3 a {
	cursor:url(images/ouroboroscursor.png),auto;

}


h4 a {
	cursor:url(images/pentagramcursor.png),auto;

}

h5 a {
	cursor:url(images/venuscursor.png),auto;

}


h6 a {
	cursor:url(images/unicorncursor.png),auto;

}


nav a {
	cursor:url(images/bananacursor.png),auto;

}

/* A END */






body {
	cursor:url(images/venuscursor.png),auto;

}

body p {
	cursor:url(images/headcursor.png),auto;

}


font {
	cursor:url(images/menkauracursor.png),auto;

}


nav img {
	cursor:url(images/capensiscursor.png),auto;

}

video {
	cursor:url(images/demoncursor.png),auto;

}



html {
	cursor:url(images/headcursor.png),auto;

}



a {
	cursor:url(images/demoncursor.png),auto;

}


img {
	cursor:url(images/eyecursor.png),auto;

}




.hi {
  float: right;
  position: -10px;

}


/* YELLOW COLOR SELECTION */


.marquee::selection{
	background:yellow;
	color:black;
}



font::selection{
	background:yellow;
}




h2 font::selection{
	background:yellow;
	color:black;
}



li font::selection{
	background:yellow;
	color:black;
}


p font::selection{
	background:yellow;
	color:black;
}

a font::selection{
	background:yellow;
	color:black;
}

img::selection{
	background:yellow;
	color:black;
}

br::selection{
	background:yellow;
	color:black;
}

p::selection{
	background:yellow;
	color:black;
}


iframe::selection{
	background:yellow;
	color:black;
}

a::selection{
	background:yellow;
	color:black;
}

li::selection{
	background:yellow;
	color:black;
}

div::selection{
	background:yellow;
	color:black;
}


h2::selection{
	background:yellow;
	color:black;
}



/* YELLOW COLOR SELECTION END */




a:link{
	color:black; 
	text-decoration:none;
}

a:visited{
	color:black;
	text-decoration:none;
}

a:hover{
	color:black;
	text-decoration:none;
}

a:active{
	color:black;
	text-decoration:none;
}


header{
	padding:0.2em;
}

body{
	font-size:16px;
	font-family:verdana,arial,sans-serif;
	margin: 0;
	padding-top: 6px;
}


nav{
	color:black;
	font-size:1.75em; 
	padding:1em;
	font-weight:bold;
	line-height:1.5em;
	margin-top:-1em;
	margin-left:-0.5em;
}




section{
	font-weight:bold;
	width:65em;
	padding-top:3em;
	margin-left:18em;
	line-height:1.4em;
}



	


ul li{text-align: center;
}



/* COLORS */

.azul a:hover{
	background-color:powderblue;
}


.amarillo a:hover{
	background-color:yellow;
}


.peachpuff a:hover{
	background-color:peachpuff;
}


.pink a:hover{
	background-color:pink;
}


.palegreen a:hover{
	background-color:lightgreen;
}


.lightgrey a:hover{
	background-color:lightgrey;
}


.greenyellow a:hover{
	background-color:greenyellow;
}


.lightcoral a:hover{
	background-color:lightcoral;
}


.darksalmon a:hover{
	background-color:darksalmon;
}


.tomato a:hover{
	background-color:tomato;
}


.aquamarine a:hover{
	background-color:aquamarine;
}


.aquamarine{
	background-color:aquamarine;
}


.salmon1{
	background-color:salmon;
}



.video{
	background-color:hotpink;
}



.videokaraoke a:hover{
	background-color:hotpink;
}



.salmon2 a:hover{
	background-color:salmon;
}



.hotpink a:hover{
	background-color:hotpink;
}



.plum a:hover{
	background-color:plum;
}


.music a:hover{
	background-color:plum;
}


.hotpink a{
	background-color:hotpink;
}


.plum a{
	background-color:plum;
}

.leer a{
	background-color:aquamarine;
}


.skyblue a:hover{
	background-color:skyblue;
}

.skyblue a{
	background-color:skyblue;
}


.red a:hover{
	background-color:red;
}

.red a{
	background-color:red;
}



.lime a{
	background-color:lime;
}


.lightcoral a{
	background-color:lightcoral;
}



.aguamarina a{
	background-color:aquamarine;
}


.yellowgreen a{
	background-color:yellowgreen;
}


.indianred a{
	background-color:indianred;
}


.orange a{
	background-color:orange;
}


.grey a{
	background-color:darkgrey;
}

/* COLORS END */



section h2 a:hover{
	background-color:aquamarine;

}


section p a:hover{
	background-color:aquamarine;
}


section h1 a{
	background-color:yellow;
}

section h3 a{
	background-color:aquamarine;
}


section h6 a{
	background-color:salmon;
}


/* H1 TO H6 */

h1{
	color:black;
	font-size:1.8em;
	font-weight:bold;
}


h2{
	color:black;
	font-size:1.2em;
	font-weight:bold;
}

h3{
	color:black;
	font-size:1.6em;
	font-weight:bold;
}

h4{
	color:black;
	font-size:1.4em;
	font-weight:bold;
}

h5{
	color:black;
	font-size:2.2em;
	font-weight:bold;
}


h6{
	color:black;
	font-size:1.2em;
	font-weight:bold;
}


/* H1 TO H6 END */



#fixed{
	position:fixed;
	font-size:0.8em;
	line-height:1.2em;
	margin-left:1.8em;
}



/* RESIZE */



.resize1{
	width:90%;
}

.resize2{
	width:25%;
}

.resize3{
	width:80%;
}

.resize4{
	width:76.5%;
}

.resize5{
	width:58%;
}


/* RESIZE END */


.yellow{
	background-color:yellow;
}





ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 12px;
}