@import "tailwindcss";

@theme{
    --font-serif: 'Niconne', cursive;
}

.fairy-tale-text {
  color: #FFD700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/***** Galería de imágenes ******/
.galeria {
    padding: 2.5rem 0;
}

.scroller-container {
    max-width: 100%;
    overflow: hidden;
}

.scroller {
    max-width: 100vw;
}

.scroller_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    mask: linear-gradient(90%deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;    
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-duration="fast"] {
    --_animation-duration: 85s;
}

.scroller[data-duration="slow"] {
    --_animation-duration: 100s;
}

@keyframes scroll {
    to {
        transform: translateX(calc(-50% - 0.5rem));
    }
}

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    overflow: hidden;
    padding: .5rem;
    background: var(--second-alpha-color);
    border-radius: .5rem;
    box-shadow: 0 0.5rem 1rem -0.25rem var(--first-alpha-color);
}

.tag-list li:hover img {
    transform: scale(1.05);
}