body {
    margin: 0;
    height: 100vh;
    background: radial-gradient(circle, #FFFFFF 0%, #C6AEBC 100%);
}

.accueil {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    height: 100vh; /* Hauteur du conteneur (100% de la hauteur de la fenêtre) */
}

#elenaaccueil {
    font-family: gigalypse, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 90px;
    white-space: nowrap; /* Empêche le saut de ligne */
    text-align: center;
}

#profil {
    font-family: 'Roboto-Bold', sans-serif;
    font-size: 35px;
    color: #C6AEBC;
}

.profil {
    display: flex; /* Active Flexbox */
    align-items: center; /* Aligne verticalement au centre */
    justify-content: center; /* Aligne horizontalement au besoin */
    gap: 15px; /* Ajoute un espacement entre le texte et l'image */
    font-family: 'Roboto-Bold', sans-serif;
    color: #C6AEBC;
    margin-top: 1%;
}

@keyframes bounceArrow {
    0% {
        transform: translateX(0); /* Position initiale */
    }
    50% {
        transform: translateX(30px); /* Déplacement vers la droite */
    }
    100% {
        transform: translateX(0); /* Retour à la position initiale */
    }
}

.profil img {
    animation: bounceArrow 2s infinite; /* Applique l'animation */
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Effet de rebond */
}

@keyframes scintillement {
    0% {
        opacity: 1; /* Pleine visibilité au début */
    }
    50% {
        opacity: 0; /* Disparaît à 50% */
    }
    100% {
        opacity: 1; /* Réapparaît à 100% */
    }
}

.etoile1, .etoile2 {
    display: flex;
    position: absolute;
    animation: scintillement 2.5s infinite; /* Animation continue */
}


.etoile1 {
    left: 74%;
    bottom: 61%;
    animation-delay: 0s; /* Début immédiat */
}

.etoile2 {
    left: 76.5%;
    bottom: 54%;
    animation-delay: 0.7s; /* Délai pour que l'animation commence légèrement après celle de .etoile1 */
}

#a_profil {
    text-decoration: none;
}

#profil:hover {
    text-decoration: underline;
    text-decoration-color: #C6AEBC;
    text-decoration-thickness: 3px;
}

/* Par défaut (format ordinateur) */
#elenaaccueil {
    font-size: 90px; /* Taille adaptée pour les grands écrans */
    white-space: nowrap; /* Empêche le saut de ligne */
    text-align: center;
}

/* Responsive Design pour les petites tailles d'écran */

@media (max-width: 1024px) {
    #elenaaccueil {
        font-size: 70px; /* Taille plus petite pour les écrans moyens */
        white-space: normal; /* Permet le passage à la ligne */
    }

    .etoile1 {
        left: 85%; /* Ajuste la position des étoiles */
        bottom: 60%;
        display: none;
    }

    .etoile2 {
        left: 91%;
        bottom: 55%;
        display:none ;
    }
}

@media (max-width: 480px) {
    #elenaaccueil {
        font-size: 50px; /* Taille encore plus petite pour les petits écrans */
        white-space: normal; /* Passage automatique à la ligne */
    }

    .etoile1 {
        left: 60%; /* Ajuste encore la position des étoiles */
        bottom: 50%;
        display: none;
    }

    .etoile2 {
        left: 62%;
        bottom: 43%;
        display: none;
    }

    .profil {
        flex-direction: column; /* Réorganise le contenu pour un meilleur affichage */
    }

    #profil {
        font-size: 28px; /* Réduit la taille du texte sur les petits écrans */
    }
}