@font-face {
    font-family: 'Chal';
    src: url('../News/mytupi.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
  
  

.body_music {
    font-family: 'Chal';
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000000;
    perspective: 680px;
    flex-direction: row;
    transition: background-color 2s ease; /* Définissez la durée et la courbe de transition */

}

.back-buttonMusic {
    display: block;
    position: fixed;
    padding: -149px -4px;
    top: 16px;
    left: 15px;
    z-index: 30;
    /* margin-bottom: 70%; */
    /* margin-right: 85%; */
    height: 20PX;
    width: 143px;
    /* margin-right: 0px; */
}
  
  
  .back-iconMusic {
    height: 18.3px;
    width: 11px;
    margin-right: 10px;
    transition: transform 0.3s;
  }
  
  .back-iconMusic img {
    height: 18.3px;
    width: 11px;
  }
  
  .back-buttonMusic:hover .back-iconMusic {
    transform: translateX(-5px);
  }
  
  
  .back-textMusic {
    position: fixed;
    color: rgb(255, 255, 255);
    display: inline-block;
    transition: transform 0.3s, opacity 0.3s;
    vertical-align: middle;
    top: 16px;
}
  
  
  /* Sélecteur pour la section Artiste */
  .back-buttonMusic.clicked .back-textMusic {
  transform: translateX(100%);
  opacity: 0;
  }

.scene {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: rotateScene 10s infinite linear;
}

.sphere {
    width: 100%;
    height: 100%;
    background-color: #3498db00;
    border-radius: 50%;
    position: absolute;
    opacity: 0.3;
}

.cubes {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Classes différentes pour chaque cube */
.cube { 
    width: 100px;
    height: 100px;
    background-color: #e79d3c;
    position: absolute;
}

/* Classes différentes pour chaque cube */
.cube1 { 
    transform: rotateY(0deg) translateZ(200px) translateY(-100px) rotateX(0deg);
	animation: rotateCube1 20s infinite linear;
}

.cube2 { 
    transform: rotateY(0deg) translateZ(200px) translateY(-100px) rotateX(0deg);
    animation: rotateCube2 25s infinite linear;
}

.cube3 { 
    transform: rotateY(0deg) translateZ(200px) translateY(-100px) rotateX(0deg);
    animation: rotateCube3 30s infinite linear;
}

.cube4 { 
    transform: rotateY(0deg) translateZ(200px) translateY(-100px) rotateX(0deg);
    animation: rotateCube4 35s infinite linear;
}

.cube5 { 
    transform: rotateY(0deg) translateZ(200px) translateY(-100px) rotateX(0deg);
    animation: rotateCube5 40s infinite linear;
}

.cube6 { 
    transform: rotateY(0deg) translateZ(200px) translateY(0) rotateX(0deg);
    animation: rotateCube6 45s infinite linear;
}

.cube7 { 
    transform: rotateY(0deg) translateZ(200px) translateY(100px) rotateX(0deg);
    animation: rotateCube7 50s infinite linear;
}

.cube8 { 
    transform: rotateY(0deg) translateZ(200px) translateY(100px) rotateX(0deg);
    animation: rotateCube8 55s infinite linear;
}

.cube9 { 
    transform: rotateY(0deg) translateZ(200px) translateY(100px) rotateX(0deg);
    animation: rotateCube9 60s infinite linear;
}

.cube10 { 
    transform: rotateY(0deg) translateZ(200px) translateY(100px) rotateX(0deg);
    animation: rotateCube10 65s infinite linear;
}

/* Animation pour le cube 1 */
@keyframes rotateCube1 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(-50px) translateX(-50px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(150px) translateX(150px) rotateX(360deg); }
}

@keyframes rotateCube2 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(150px) translateX(150px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(-50px) translateX(200px) rotateX(360deg); }
}

@keyframes rotateCube3 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(0px) translateX(0px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(400px) translateX(200px) rotateX(360deg); }
}

@keyframes rotateCube4 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(400px) translateX(200px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(0px) translateX(0px) rotateX(360deg); }
}

@keyframes rotateCube5 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(-150px) translateX(300px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(300px) translateX(-150px) rotateX(360deg); }
}

@keyframes rotateCube6 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(300px) translateX(-150px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(-150px) translateX(300px) rotateX(360deg); }
}

@keyframes rotateCube7 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(50px) translateX(-250px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(-250px) translateX(50px) rotateX(360deg); }
}

@keyframes rotateCube8 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(-250px) translateX(50px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(50px) translateX(-250px) rotateX(360deg); }
}

@keyframes rotateCube9 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(-100px) translateX(-100px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(100px) translateX(150px) rotateX(360deg); }
}

@keyframes rotateCube10 {
    0%, 100% { transform: rotateY(0deg) translateZ(200px) translateY(100px) translateX(20px) rotateX(0deg); }
    50% { transform: rotateY(360deg) translateZ(200px) translateY(100px) translateX(-20px) rotateX(360deg); }
}

@keyframes rotateScene {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Classes différentes pour chaque cube */
.cube1, .cube1::before, .cube1::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/La_preuve.jpg');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube2, .cube2::before, .cube2::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/VCR.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube3, .cube3::before, .cube3::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/For_All_The_Dogs.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube4, .cube4::before, .cube4::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Olive_Green.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube5, .cube5::before, .cube5::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Headshots.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube6, .cube6::before, .cube6::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Charge_it.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube7, .cube7::before, .cube7::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/luv.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube8, .cube8::before, .cube8::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Pop_the_glock.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube9, .cube9::before, .cube9::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Riot.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}

.cube10, .cube10::before, .cube10::after {
    backface-visibility: visible;
    background-color: transparent; /* Supprimez la couleur de fond */
    background-image: url('./Cover/Telekinesis.jfif');
    background-size: 100% 100%; /* Ajustez la taille de l'image au cube */
}


/* Répétez ces règles CSS pour chaque cube en changeant le nom de l'image */


/* Ajoutez ces règles CSS */
.active-cube {
    transform: translateZ(0) translateX(0) translateY(0) scale(2);
    animation: none;
}

.scene.scene-paused {
    animation-play-state: paused;
}

.cube.active-cube {
    transition: transform 0.5s ease; /* Réglez la durée de la transition selon vos préférences */
}

.texteMusique{
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 600px) {
.texteMusique {
    transform: translate(-40%);
    margin-top: 356px;
    display: flex;
    flex-direction: column;
}
}

.text-Titre {
    display: inline-block;
    position: relative;
    color: rgb(255, 255, 255);
    text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
    font-size: 30px;
    font-weight: bold;
    top: -60px;
}

.text-Album {
    display: inline-block;
    position: relative;
    color: rgb(156, 156, 156);
    text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
    font-size: 20px;
    font-weight: bold;
    top: -93px;
}

.text-Artiste {
    display: inline-block;
    position: relative;
    color: white;
    text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
    font-size: 25px;
    font-weight: bold;
    top: -30px;
}


.countdown {
    display: inline-block;
    position: relative;
    color: rgb(0, 0, 0);
    text-shadow: -5px -2px 20px rgb(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
    font-size: 15px;
    font-weight: bold;
    top: -41px;
}


@media screen and (max-width: 600px) {
    .text-Titre {
        display: inline-block;
        position: relative;
        color: rgb(255, 255, 255);
        text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
        font-size: 25px;
        font-weight: bold;
        top: -80px;
    }

    
    .text-Artiste {
        display: inline-block;
        position: relative;
        color: white;
        text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
        font-size: 20px;
        font-weight: bold;
        top: -70px;
    }

    .text-Album {
        display: inline-block;
        position: relative;
        color: rgb(156, 156, 156);
        text-shadow: -5px -2px 20px rgba(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
        font-size: 15px;
        font-weight: bold;
        top: -50px;
    }

    .countdown {
        display: inline-block;
        position: relative;
        color: rgb(0, 0, 0);
        text-shadow: -5px -2px 20px rgb(255, 255, 255, 1); /* Couleur d'ombre noire avec transparence */
        font-size: 15px;
        font-weight: bold;
        top: -30px;
    }
}