/**
Theme Name: Custom theme
Template: twentytwentyfour
*/
@keyframes imagerotate {
    from {transform:rotate(0deg);}
    to {transform: rotate(360deg);}
  }
@keyframes imagehover {
    from {transform:scale(1);}
    to {transform: scale(1.05);}
  }
  @keyframes buttonhover {
    from {background-color: black;}
    to {background-color: rgb(0, 57, 92);}
  }
  @keyframes imagegrayscale {
    from {filter: grayscale(100%);}
    to {filter: grayscale(0%);}
  }
  @keyframes backgroundimg {
    from {left:0px;}
    to {left:100px;}
  }
/* animation qui donne une couleur bleue sur les boutons */
.tp2hover a:hover{
    animation: buttonhover 0.3s ease-in-out forwards;
}
/* animation qui grandit les image dans la section équipe de la page à propos */
#tp2imagehover div figure img:hover{
    animation: imagehover 0.5s ease-in-out forwards;
}
/* animation qui fait rotate la lettre dans 2 sections infolettre */
.tp2rotate img:hover{
    animation:imagerotate 0.8s ease;
}
.tp2image img{
    filter: grayscale(100%);
}
/* animation du donne la couleur du l'image du header de la page principale */
.tp2image img:hover{
    animation:imagegrayscale 0.8s linear forwards;
}
/* animation du background du header sur la page "à propos" */
.tp2background img{
    transform: scale(1.1);
    left:5%;
    animation:backgroundimg 6s ease-in-out alternate infinite;
}