@supports (animation-timeline: view()) {}

/* Estilo del contenido general */

#contenido {
  transition: margin-left 0.5s linear; 
  max-width: 92%; 
  padding-left: 80px; 
  font-size: var(--font-size-base);
  overflow-x: hidden;
}
#contenido.margen {transition: all 0.5s; margin-left: 350px; max-width: 90%;}

/* Estilos para encabezados y párrafos */

#contenido-index {transition: all 0.5s;}

#contenido-index h1, #contenido-index h2 {display: inline-block; transition: .5s linear;}

#contenido-index h1:hover, #contenido-index h2:hover {
 transition: .5s linear;
 padding: 5px;
 color: hsl(calc(var(--hue) / 2), calc(var(--saturation) * 0.7), calc(var(--lightness) * 1.2));
 box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido-index p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  width: 100%; 
  max-width: 95%;
  margin-left: 30px;
}

#contenido-index code, #contenido code {
  font-family: Consolas, "Liberation Mono", Courier, monospace; 
  font-weight: bold; 
  color: var(--color-code); /* #7f0a0c; */
  font-size: var(--font-size-code); 
  display: inline-block; 
  width: auto; 
  height: auto;
  white-space: nowrap;
  transition: 0.5s linear;
}

#contenido-index code:hover, #contenido code:hover {
  transition: .5s linear;
  color: var(--primary-color);
  box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido .grid {
    margin: 0 auto;
    padding-block: 20vh;
    padding-inline-end: 5vw;
    width: 100%;
    max-width: 100%;
    min-height: 150vh;
	  min-height: 150dvh;
    overflow-y: scroll;
    overflow-x: hidden;
    display: grid;
    gap: 10px;
    row-gap: 100px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
/*    view-timeline: --imagePages; */
}

#contenido .grid .card {
  transition: .8s linear .2s;
}

.card-index {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p.card-text {
  font-size: calc(var(--font-size-base) * 0.8) !important;
}
/*  view-timeline: --imagePages;
  animation: aparicion linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;

@keyframes aparicion {
  from {
    opacity: 0;
    translate: 0 -50% 0;
    scale: 0.5;
    transform-origin: 50% 50%;
    clip-path: inset(100% 100% 0% 0%);
  }
   to {
     opacity: 1;
     scale: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
} */

.hidden {
	opacity: 0;
	filter: blur(2px);
	transform: translateY(70%);
}

/* ESTILOS MEDIA QUERYS */

@media screen and (max-width: 1200px) {
  #contenido {max-width: 90%;}
  #contenido .grid {grid-template-columns: repeat(2, minmax(220px, 1fr));}
}

@media screen and (max-width: 800px) {
  #contenido{max-width: 95%; padding-left: 20px;}
  #contenido .grid {grid-template-columns: repeat(1, minmax(220px, 1fr));}
}

@media screen and (max-width: 600px) {
  #contenido{max-width: 95%; padding-left: 0; margin: 0;}
}