html,body,#app { height: 100%; scroll-behavior: smooth; }

.linkedin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;       /* taille du rond */
    height: 50px;
    background-color: #f6a200; /* couleur du fond */
    color: white;      /* couleur du logo */
    border-radius: 50%; /* rond */
    text-decoration: none;
    font-size: 24px;   /* taille du logo */
    transition: transform 0.3s;
}

.linkedin-icon:hover {
    transform: scale(1.1); /* petit effet au survol */
}

.ca-anim-container{
    position: relative;
    display: inline-block;
    font-weight: 800;
    font-size: clamp(40px, 6vw, 110px);
    color:white;
}

.ca-letter{
    display:inline-block;
    padding:0 2px;
    transform-origin:center;
    will-change: transform, filter;
}

.wink{ position:relative; }

.wink::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:10px;
    height:10px;
    border-radius:50%;
    background:#f6a200;
    opacity:0;
}

section {
    scroll-margin-top: 10vh; /* Décale le scroll de 10% de la hauteur de la fenêtre */
}

/* Smooth arrow movement on hover */
#heroText:hover span {
    transform: translateX(8px);
    transition: transform 0.3s ease;
}

.parallax {
  /* The image used */
  
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}