/* styles.css */

:root {
    --primary-color: #60945e;
    --secondary-color: #b7df27;
    --accent-color: #666;
    --background-color: #0fb909;
    --text-color: #fff;
}

body {
    font-family: 'Roboto', sans-serif;
    background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimg.freepik.com%2Fvector-gratis%2Fescena-naturaleza-rio-colinas-bosque-montana-ilustracion-estilo-dibujos-animados-planos-paisaje_191095-257.jpg&f=1&nofb=1&ipt=3660f2aafd0f7376240ea8564108a4b07195f4bc3a91579d75d0ec9f1fdb5383&ipo=images');
    background-size: cover;
    background-position: center;
    color: var(--text-color);
}

#music-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.music-card {
    background-color: var(--primary-color);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s;
}

.music-card:hover {
    transform: scale(1.05);
    background-color: var(--secondary-color);
}

.music-title {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    color: var(--accent-color);
}

.music-artist {
    color: var(--text-color);
}