@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons";

body {
    background-color: #e4e5e7;
}
.fond{
  background-color: #84fab0;
}
               // style des titres
.title {
    font-size: 5rem;
    color: #84fab0;
    font-style: bold;
    font-family: cursive;
    text-shadow: 4px 4px 6px rgb(36, 175, 203) ;
    
    
    @keyframes bounce-in {
        from {
          transform: translateY(-200%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
    
    animation: bounce-in 1s ease-out; 
}
.title3{
  font-size: 2rem;
  text-shadow: 4px 4px 6px #84fab0 ; 
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

    animation: blink 1.5s step-start infinite;
  
  
}

.title2{
    font-size: 2rem;
    //text-decoration: underline;
    text-shadow: 4px 4px 6px #84fab0 ; 
}

//effet zoom sur les boutons
.bouton {
       background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);}
.btn:hover {
    transform: scale(1.2);
}   
// effet sur la barre de navigation
.a { 
    font-weight: bold;
    transition: all 1s ease-out;
  }
  
.a:hover,.a:focus {
    font-weight: bold;
    background-color:#4adf6d ;
    color: white;
    border-radius: 0.5em;
  }
  // effet zoom hover sur les images
.zoom {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoom:hover{
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

//ombre sur image
.box {
    box-shadow: 0px 0px 24px 6px #84fab0;
}