/* Color de pagina, fondo y opacidad (actualmente al 50%) */
html, body {
  background-repeat: no-repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('paperwall.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  cursor: none
}


.colorswap {
  color: #FFFFFF;
  color: white; /* Color del relleno interior */
  -webkit-text-stroke: 1px gray; /* Grosor y color del contorno */
}



/* cursor */ 
#customCursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 24px;
  height: 28px;
  transform: translate(0, 0);
  will-change: transform;
  opacity: 1;
  transition: opacity 0.1s;
}
a, button, .clickable {
  cursor: none;
}
#customCursor.on-link {
  width: 64px;        /* Más grande para links :v */
  height: 50px;
}

#customCursor.hidden {
  opacity: 0;         /* Desaparece cuando el mouse sale */
}

#customCursor img {
  width: 100%;
  height: 100%;
  user-select: none;
}

@media (pointer: coarse) {
  #customCursor {
    display: none;
  }
  
  html, body, a, button, .clickable {
    cursor: auto;
  }
}
/* Fin del cursor */

/* CAJA */
.caja2 {
  width: 300px;
  border: 5px solid lightgreen;
  padding: 10px;
  margin: 20px;
}
.caja {
  border: 3px solid black;
  background-color: gray;
  padding: 1px;
}

.contenedor-cajas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/*Fin de la caja */

/* alineacion de texto */
.centrado{
  text-align: center;
}

/* Primer cuarto de la pantalla */
.zona-enlaces {
    min-height: 25vh;
    box-sizing: border-box;
    padding: 30px;
}


/* El contenido comienza después del primer cuarto */
.contenido-principal {
    min-height: 750vh;
    box-sizing: border-box;
    padding: 300px;
}