/**
*   Theme name: Grand Sunrise
*   Template: twentytwentyfour
*/

/* Donne une rotation de 360 degrées pour tous les boutons */
.bouton{
    animation: rotateButtons 4s .5s ease-in-out;
}

@keyframes rotateButtons {
    0% {
      transform:rotate(0deg);
    }

    50%{
        scale: 1.5;
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Fait un dégradé de couleur pour les h2 */
h2 {
    animation: degradeCouleur 10s ease-in-out infinite;
    color: #274ece;
}

@keyframes degradeCouleur{
    0%{
        color: #274ece;
    }
    20%{
        color: #27a7ce;
    }
   40%{
        color: #27ce51;
    }
    60%{
        color: #afce27;
    }
    80%{
        color: #ceaf27;
    }
    100%{
        color: #ce4827;
    }
}

/* Noircit graduellement le cover de la page "À propos" */
.banniere{
    animation: adjustContrast 3s ease-in-out;
}

@keyframes adjustContrast{
    0%{opacity: .5;}
    20%{opacity: .6;}
    40%{opacity: .7;}
    60%{opacity: .8;}
    80%{opacity: .9;}
    100%{opacity: 1;}
}

/* Fait grossir les membres de l'équipe lors du survol */
.grossir:hover{
    animation: grossir 1.5s linear alternate infinite;
}

@keyframes grossir {
    0%{
        scale: 1;
    }

    25%{
        scale: 1.1;
    }

    50%{
        scale: 1.2;
    }

    75%{
        scale: 1.3;
    }

    100%{
        scale: 1.4;
    }
}

/* Fait une translation de la gauche vers la droite du logo et titre dans le header */
.translation{
    animation: translation 3s linear;
}

@keyframes translation {
    0%{
        transform: translateX(0%);
    }

    25%{
        transform: translateX(50%);
    }

    50%{
        transform: translateX(100%);
    }

    75%{
        transform: translateX(50%);
    }

    100%{
        transform: translateX(0%);
    }
}