@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.5; }
}


header {
    color: #333;
    text-align: center;
}

.artwork-section {
    display: none;
}

.artwork-section img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    animation: fadeIn 2s ease-in-out;
}

.stores-section {
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stores-section div {
    margin-bottom: 20px; /* Espacio entre cada logo y botón */
    display: flex;
    align-items: center;
    position: relative;
}

.stores-section div:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

.stores-section img {
    max-width: 65px; /* Tamaño inicial del logo para móviles */
    margin-right: 20px; /* Espaciado a la derecha del logo */
    transition: max-width 0.3s ease;
}

@media (min-width: 768px) {
    .content {
        width: 70%;
    }
}

@media (min-width: 1024px) {
    .content {
        width: 50%;
    }
}

.play-button {
    background-color: rgba(240, 240, 240, 0.8);
    color: #333;
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Fuente más recta */
    margin-left: 20px; /* Espaciado a la izquierda del botón */
}

.play-button:hover {
    background-color: rgba(204, 204, 204, 0.8);
    color: #000;
}

footer {
    color: #333;
    text-align: center;
    padding: 20px 0;
}

footer a {
    color: #333;
    margin: 0 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

footer img {
    max-width: 20px; /* Tamaño del logotipo en el pie de página */
    margin-right: 5px; /* Espaciado a la derecha del logotipo */
}

@media (min-width: 768px) {
    .stores-section img {
        max-width: 85px; /* Tamaño del logo para tabletas */
    }
}

@media (min-width: 1024px) {
    .stores-section img {
        max-width: 90px; /* Tamaño del logo para escritorio (30% más grande) */
        margin-right: 100px; /* Espaciado a la derecha del logo en escritorio */
    }

    .play-button {
        margin-left: 100px; /* Espaciado a la izquierda del botón en escritorio */
    }
}