/*permet de changer le fonc de l'applicatin en noir*/
.noir {
    background-color: black;
}

.gala {
    background: url("../audio/gala.gif") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

/*style de tout les boutons pour les aligner*/
button {

    float: left;
    border: 1px solid;
    color: black;
    cursor: pointer;
    width: 150px;
    font-size: 25px;
    width: 16cm;
    display: block;



    box-shadow: inset 0 0 18px #fff,
        inset -6px 0 18px #f3bad6,
        inset 6px 0 18px #0ff,
        inset -6px 0 30px #f3bad6,
        inset 6px 0 30px #0ff,
        0 0 18px #fff, 4px 0 18px #f3bad6, -4px 0 18px #0ff;
}

/*affiche un rouge foncé quand on passe dessus et que le button n'est pas avtivé*/
.isNotActivate:hover {
    background-color: rgb(63, 11, 11);
    color: white;
}

/*style pour mettre le font en noir et le texte en blanc quand le bouton n'est pas activé*/
.isNotActivate {
    color: white;
    background-color: black;
}

/*affiche un vert claire quand on passe sur un bouton activé*/
.isActivated:hover {
    background-color: #3e8e41;
}

/*affiche un vert foncé quand on active un bouton*/
.isActivated {
    background-color: green;
}

/*permet de grouper les boutons au centre*/
.buttonGrp {
    margin-top: 2cm;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
}

/*permet de faire briller en style néons*/
.glow {
    position: relative;
    background: #C0FFE4;
    box-shadow: 1px 1px 0 #1D8758, 0 0 20px 5px #C0FFE4, inset 2px 2px 0 #D3FFEC;
    animation: glow 2s infinite ease;
}

/*style pour les information de chargement/dechargement*/
.info {
    margin-top: 1cm;
    text-align: center;
    color: white;
    font-size: 1.5cm;
}

@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Odibee Sans', cursive;
}

/*style de la progresse barre pour mettre la couleur en vert*/
.barVert {

    margin-top: 1cm;
    -webkit-appearance: none;
    height: 1.4em;
    width: 300px;
}

/*style de la progresse barre pour mettre la couleur en vert*/
.barVert::-webkit-progress-bar {
    padding: 0.3em;
    border-radius: calc(1.4em / 2);
    background: #1e1e1e;
}

/*style de la progresse barre pour mettre la couleur en vert*/
.barVert::-webkit-progress-value {
    background: #03fcc2;
    box-shadow: 0 0 0.6em #0dfcc4, 0 0 0.8em #17fcc7;
    border-radius: calc(1.4em/2);
}







/*style de la progresse barre pour mettre la couleur en orange*/
.barOrange {

    margin-top: 1cm;
    -webkit-appearance: none;
    height: 1.4em;
    width: 300px;
}

/*style de la progresse barre pour mettre la couleur en orange*/
.barOrange::-webkit-progress-bar {
    padding: 0.3em;
    border-radius: calc(1.4em / 2);
    background: #1e1e1e;
}

/*style de la progresse barre pour mettre la couleur en orange*/
.barOrange::-webkit-progress-value {
    background: #fcad03;
    box-shadow: 0 0 0.6em #fcc40d, 0 0 0.8em #fcda17;
    border-radius: calc(1.4em/2);
}









/*style de la progresse barre pour mettre la couleur en rouge*/
.barRed {

    margin-top: 1cm;
    -webkit-appearance: none;
    height: 1.4em;
    width: 300px;
}

/*style de la progresse barre pour mettre la couleur en rouge*/
.barRed::-webkit-progress-bar {
    padding: 0.3em;
    border-radius: calc(1.4em / 2);
    background: #1e1e1e;
}

/*style de la progresse barre pour mettre la couleur en rouge*/
.barRed::-webkit-progress-value {
    background: rgb(206, 29, 6);
    box-shadow: 0 0 0.6em #fc3d0d, 0 0 0.8em #d80f08;
    border-radius: calc(1.4em/2);
}

/*met le texte du pourcentage en vert*/
.bar__value_vert {
    color: #03fc41;
    font-size: 1.2em;
    line-height: 1.4em;
    letter-spacing: 1px;
    text-shadow: 0 0 0.3em #03f74c, 0 0 0.6em #03de45;
    margin-left: 0.5em;
}

/*met le texte du pourcentage en orange*/
.bar__value_orange {
    color: #fce303;
    font-size: 1.2em;
    line-height: 1.4em;
    letter-spacing: 1px;
    text-shadow: 0 0 0.3em #f7e703, 0 0 0.6em #deda03;
    margin-left: 0.5em;
}

/*met le texte du pourcentage en rouge*/
.bar__value_red {
    color: #fc3d03;
    font-size: 1.2em;
    line-height: 1.4em;
    letter-spacing: 1px;
    text-shadow: 0 0 0.3em #f73c03, 0 0 0.6em #de2f03;
    margin-left: 0.5em;
}


/*permet de centrer*/
.center {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-end;
    justify-content: center;
}