:root {
    --color1: #000000;
    --color2: #A854B1;
    --color3: #A575D2;
    --color4: #7C188D;
    --color5: #5F2992;
    --color6: #D9D9D9;
    --color7: white;
    --color8: #;
    --color9: #;
}

section{
    margin: 15vh 0;
}

/* =============================== GRAPHE ================================= */

.AlbumMondeContent div canvas {
    display: block;
    max-width: 870px;
    max-height: 550px;
    /* margin: 0 3vw; */
}

.data-graph {
    display: block;
    width: 200px;
    border-radius: 5px;
    margin: 1vh auto;
    font-size: 1rem;
    background-color: #8c3aca;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    border: none;
    bottom: 300px;
}

.data-graph:hover {
    background-color: #642892;

}

#tableContainerAlbum {
    width: 60vw;
    margin: 10vh auto;
}

.AlbumMondeContent {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 5vw;
    flex-wrap: wrap;

}


/* ========================================================================= */
.divAlbum {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color5);
    width: 22vw;
    margin: 0 auto;
    padding: 2vh 2.5vw 4vh;
    border-radius: 15px;
}

/* Photo album */

.img-album {
    width: 15vw;
    height: auto;
    margin: 0 auto;
    border-radius: 15px;
    display: block;
}

/* Titre Album */

.name-album {
    font-weight: bold;
}

/* Artiste */


/* Icon lien musique */
.lien-album {
    display: flex;
    justify-content: center;
    gap: 1vw;
    margin-top: 20px;
}

.icon-lien-album img {
    width: 5vw;
    height: auto;
}

/* Bouton slider */

.changeYear {
    display: flex;
    gap: 5vw;
    justify-content: center;
    margin: 5vh 0 5vh 0;
    font-size: 1.3rem;
}

.prevYear,
.nextYear {
    background-color: transparent;
    border: none;
}

.prevYear:hover,
.nextYear:hover {
    transform: scale(120%);
}

.prevYear img,
.nextYear img {
    width: 2vw;
    height: auto;
    border: none;
  
}






/* ================================= Podium ============================ */

.top{
    text-align: center;
}

.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2vw;
    margin: 15vh 0 5vh 0;
}

.podium .divAlbum {
    margin: 0;
}

.podium .top1 {
    background-color: darkmagenta;
}

.podium .top2 {
    background-color: darkorchid;
}


.podium .top3 {
    background-color: #A854B1;

}

/* Image podium */


.podium .top2 .img-album {
    width: 12vw;
}

.podium .top3 .img-album {
    width: 10vw;
}

.TopTxt {
    font-weight: bold;
    text-align: center;
    font-size: 1.3rem;
}

.podium .top1 .TopTxt {
    padding: 6vh 0 0 0;
}

.podium .top2 .TopTxt {
    padding: 3vh 0 0 0;
}


.detail {
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.detail p {
    margin: 0;
}

.hide {
    display: none;
}