/*──────────────────
        social media
──────────────────*/

.social-media{
        padding: 10px;
        display: flex;
        position: center;
        align-items: space-around;
        justify-content:center;
}

.social-media a {
        margin: 10px;
        font-size: 2rem;
        text-align:center;
        display: inline-block;
        color: var(--main-fonts-color);
}

/* Style spécifique pour les réseaux sociaux dans la pixelated frame */
.profile-signature .social-media a {
        font-size: 3.5rem; /* Plus grand que les médias sociaux standards */
        margin: 50px 45px; /*The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left */  
        margin-top:  200px;
        color: #FFFFFF; /* Blanc pour une meilleure visibilité */
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Ombre légère pour améliorer la lisibilité */
        transition: all 0.3s ease; /* Transition fluide pour les animations */
}

/* Style au survol des icônes dans la pixelated frame */
.profile-signature .social-media a:hover {
        color: var(--main-decor-color); /* Couleur d'accentuation au survol */
        transform: scale(1.25); /* Agrandissement au survol */
        text-shadow: 0 0 15px var(--main-decor-color); /* Effet lumineux renforcé */
}

.profile-signature .social-media {
        margin-top: 20px; /* Espace au-dessus des icônes */
}

.social-media a i{
        cursor: pointer;
}

.social-media a:hover {
        color: var(--main-decor-color);
        text-shadow: 0 0 50px var(--main-decor-color);
}

/* Styles pour les médias sociaux dans le contact */
.contact-content-below .social-media {
        margin-top: 25px;
}

.contact-content-below .social-media a {
        font-size: 2.2rem;
        margin: 0 10px;
        color: var(--main-fonts-color);
        transition: all 0.3s ease;
}

.contact-content-below .social-media a:hover {
        transform: scale(1.2);
        color: var(--main-decor-color);
}

/* Styles responsifs pour la section médias sociaux */
@media only screen and (max-width: 768px) {
        .social-media a {
                font-size: 1.8rem;
                margin: 0 8px;
        }
        
        .contact-content .social-media a {
                font-size: 1.8rem;
                margin: 0 8px;
        }
        
        /* Style spécifique pour les réseaux sociaux dans la pixelated frame sur mobile */
        .profile-signature .social-media a {
                font-size: 2.2rem; /* Un peu plus petit que sur desktop, mais toujours assez visible */
                margin: 8px 10px;
                color: #FFFFFF; /* Maintient la couleur blanche sur mobile */
        }
        
        .profile-signature .social-media {
                margin-top: 15px; /* Espace légèrement réduit sur mobile */
                margin-bottom: 5px; /* Ajout d'une marge en bas */
        }
}