* {
  list-style-position: inside;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: monospace;
}

html {
  color: white;
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: #000;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #000;
}

a{
  color: white;
}

main {
  display: grid;
  /* Genera tantas columnas como quepan, asegurando que cada una mida como mínimo 250px */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  justify-content: center;
  gap: 10rem;
  padding: 2rem;
}

main article{
  height: 100%;
  overflow: hidden;
}

main article pre {
  margin: auto;
  height: fit-content;
  
  flex-shrink: 1; /* Le da permiso a Flexbox para encoger el ASCII si la pantalla es pequeña */
  min-width: 0;   /* Rompe el ancho mínimo intrínseco que los <pre> traen por defecto */
}

footer{
  text-align: center;
  opacity: 20%;
  padding: 3rem;
}

.ascii-container{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-link:nth-child(5n+1) .ascii-container{
  color: red;
}

.article-link:nth-child(5n+1):hover .url-text{
  color: red;
}

.article-link:nth-child(5n+2) .ascii-container{
  color: limegreen;
}
.article-link:nth-child(5n+2):hover .url-text{
  color: limegreen;
}

.article-link:nth-child(5n+3) .ascii-container{
  color: turquoise;
}
.article-link:nth-child(5n+3):hover .url-text{
  color: turquoise;
}

.article-link:nth-child(5n+4) .ascii-container{
  color: orange;
}
.article-link:nth-child(5n+4):hover .url-text{
  color: orange;
}

.article-link:nth-child(5n+5) .ascii-container{
  color: violet;
}
.article-link:nth-child(5n+5):hover .url-text{
  color: violet;
}

.ascii {
  position: relative;
  font-family: monospace;
  line-height: 1.1;
  font-size: clamp(0.1vw, 0.13vw, 5rem);
  
  /* --- COMIENZO DEL PARACHOQUES DE OVERFLOW --- */
  max-width: 100%;       /* Obliga al <pre> a no medir más que el article */
  overflow: hidden;      /* Si el ASCII es más grande de 400ch, lo corta limpiamente */
  text-overflow: clip;   /* Corta los caracteres de forma rígida en el borde */
  display: block;        /* Asegura que responda correctamente al max-width */
}

.article-link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.url-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.85);
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

#pp {
  font-family: monospace;
  font-size: clamp(0.3rem, 1.1vw, 5rem);

  line-height: 1.1;
  white-space: pre;
  color: white;

  max-width: 100%;
  min-height: 10em;
  overflow: hidden;
  text-align: center;
}

@media (max-width: 992px) {
  .ascii {
    /* Tamaño de letra adaptado para escritorio (3 columnas) */
    font-size: 0.33vw;
  }
}