*{
    /* border : 1px solid blue ; */
}

body{
    background: rgb(3, 3, 3);
    
}

.container-fluid{
        /* border : 1px solid blue ; */

}

.grise{
    background: rgb(15, 15, 15);
}

.pink{
    color: pink
     /* #fb55ed */
     ;
}

/* bouton */

.button {
    display: inline-block;
    /* padding: 15px 25px;
    font-size: 24px; */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    background-color: pink;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
  }
  
  .button:hover {background-color: pink}
  
  .button:active {
    background-color: #af92a5;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }

  /* animation */

  @keyframes apparaition{
      0% {
        opacity: 0%;
      }

      100%{
          opacity: 100%;
      }

  }
  
  @keyframes slidein {
    from {
      margin-top: 10%;
      /* width: 300%; */
    }
    75% {
      /* font-size: 300%; */
      margin-top: 5%;
      /* width: 150%; */
    }
  
    to {
      margin-top: 0%;
      /* width: 100%; */
    }
  }

  .comp, .proj, .forma, .cont{
      opacity: 0;
      /* transform: translateX(-100%); */
      transition: transformn 0.6s ease-in-out,
      opacity 0.6s ease-in-out;
  }

  .comp.active, .proj.active , .cont.active, .forma.active{
    /* transform: translateX(0%); */
    opacity: 1;
  }

 
 

  #accueil{
      
    animation-duration: 4s;
    animation-name: apparaition;
    
  }