@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');



body {
    background-color: black;
    font-family: 'Poppins', sans-serif;
}

.nav {

    background-color: #302e2e8a;

}

.subscribe {
    color: gray;

}

.subscribe:hover {
    color: white;

}

.logo {
    width: 15%;
}

.sectionlog {
    background-color: #302e2e8a;
    width: 50%;
    height: 90%;
    margin-top: 10%;
    margin-left: 25%;
    border-radius: 4%;
    padding: 50px;


}

.bouton {
    background-color: #1ed760;
    height: 60px;
    width: 60%;
    margin-left: 20%;
    border-radius: 5%;
    transition: all 0.5s ease-in-out 0s;
}

.bouton:hover {
    background-color: #1ed760;
    height: 62px;
    width: 61%;
    border-radius: 5%;
    font-size: 1.2rem;
    border: solid rgba(0, 0, 0, 0);

}

.form-control {
    width: 60%;
    font-size: 25px;
    margin-left: 20%;
    background-color: gray;


}

.form-control {
    width: 60%;
    font-size: 25px;
    margin-left: 20%;
    background-color: gray;


}
.login {
    border-radius: 10%;
}
.login:hover {
    border-radius: 10%;
    background-color: #1ed760;
    color: white;
}

@media screen and (max-width: 930px) {

    .sectionlog {
        width: 90%;
        margin-left: 5%
    }
}

a {
    text-decoration: none;
    color: gray;
  }

.btn-flex {
    background-color:#302e2e8a;
    width: 290px;
    
    font-size: 22px;
    

}
.btn-flex:hover{
    background-color: #6f6c6c93;
    color: white; 

}
.test {
    width: 290px;
    height: 245px;
    background-color: #302e2e8a;
}
.inside{
    margin-top: 25px;
    border-radius: 4%;
    margin-left: 7px;
    height:200px;
    width: 95%;
    background-color: #6f6c6c93;
    
}

.btninside {
    width: 230px;
}
.btninside:hover {
    background-color: #1ed760;
    color: white !important;
    border-radius: 10%;
    
    
}

/* partie de droite index */
.secteur {
    background-color: #302e2e8a;
    margin-top: 16px;
    height: 110%;
    width: 99%;
    border-radius: 10px;
}
/* les flexs box musicales  */
.flexa {
    width: 200px;
    height: 250px;
    background-color: rgba(76, 74, 74, 0.244);
    border-radius: 3%;
    border-radius: 3%;
    animation: scaleAnimation 2s infinite alternate;
    transition: 1s;
    margin-top: 5%;
}

.flexa:hover {
    transform: scale(1.1);
    background-color: rgba(76, 74, 74, 0.867);
}

/* div à l'intérieur de flex  */
.flexy {
    width: 181px;
    height: 160px;
    background-color: black;
    border-radius: 3%;
    border-radius: 3%;
    animation: scaleAnimation 2s infinite alternate;
    transition: 1s;

}

/* couleur de spotify */
.green {
    color: #1ed760;
}



/* lecteur audio footer  */
#lecteur{
    display: none !important;
    width: 99%;
    height: 20%;
    background-color: rgba(68, 68, 68, 0.49);
    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 5%;    
}

#lecteur.visible {
    display: block !important;   
}



/* pochette et titre dans le lecteur a gauche  */
.content {
    margin-right: 40%;
}

/* anim sur les boutons play ect du bas */

.play {
    transition: 0.2s;
}
 
.play:hover{
    transform: scale(1.1);
    
}


/* Btn play*/

.btnPlay {

    background-color: black;

}

.btnPlay button {
    height: 100px;
    width:  200px;
    background-color: black;
    text-decoration: none;
}

.teste{

    height: 100%;
    width: 100%;
    background-size: cover;   
}



/* logo play vert au survol de flexy  */
.hiddenLogo {
    opacity: 0;
    position:relative;
    z-index: 100;
    top: 75px;
    

    /* transform: translate(-50%, -50%); */
    transition: opacity 1.3s ease;
  }

  .teste:hover .hiddenLogo {
    opacity: 1;
    transition: 2s;
    transform: scale(1.8);
  }


/* CACHER LE BOUTON PLAY OU PAUSE  */

.hiddenPLAY {

    display: none;
    
}


#volume {
    
    
    appearance: none;
    height: 15px;
    background-color: #1ed760;
    margin-left: 5px;
    border-radius: 20px;
    cursor: pointer;
    
}

/* BARRE DE SON TEST  */
.polling_message {
    color: white;
    float: left;
    margin-right: 2%;
  }
  
  .view_port {
    background-color: black;
    height: 25px;
    width: 100%;
    overflow: hidden;
  }
  
  .cylon_eye {
    background-color:#1ed760;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9) 25%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.9) 75%
    );
    color: white;
    height: 100%;
    width: 20%;
  
    -webkit-animation: 4s linear 0s infinite alternate move_eye;
    animation: 4s linear 0s infinite alternate move_eye;
  }
  
  @-webkit-keyframes move_eye {
    from {
      margin-left: -20%;
    }
    to {
      margin-left: 100%;
    }
  }
  @keyframes move_eye {
    from {
      margin-left: -20%;
    }
    to {
      margin-left: 100%;
    }
  }
  

  /* #message {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }

  #message.visible {
    opacity: 1;
    transform: translateX(0);
  } */


  /* LECTEUR QUI SLIDEIN   */

  .backgroundsection {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-color: #1ed760;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes slideIn {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

.line {
    animation: slideIn 1s ease-in-out;
}
.tracklist {
    background-color: #6f6c6c93;
    border-radius: 5%;
    border: solid;
    border-color: #1ed760;
}

.audiocontrols{
    appearance: none;
    background-color: #6f6c6c93;
}

/* BUTTON LIKE ANIME */
.enlarged {
    transform: scale(1.7);
    color: red !important;
    transition: 1s;   
  }
/* BUTTON ALEATOIRE ANIME */
.ramdombutton {
    transform: scale(1.6);
    color:  #1ed760!important;
    transition: 1s;   
  }

.likedcover {
    height: 100px;
    width: 100px;
    background-size: cover;
}

@media screen and (max-width: 930px){

    .flexa {
        margin-top: 50%;
        width: 90%;
    }
    
}
@media screen and (max-width: 930px){

    .teste {
        width: 90%;
    }
    
}