#home_section {
    position: relative;
    z-index: 1;
    height: 100vh; /* Hauteur pleine de la fenêtre */
    width: 100vw; /* Largeur pleine de la fenêtre */
    max-width: 100%;
    background: radial-gradient(ellipse at bottom, var(--purple) 0%, #000000 100%);
    display: flex; /* Ajout pour centrer verticalement et horizontalement */
    align-items: center; /* Centrer verticalement le contenu */
    justify-content: center; /* Centrer horizontalement le contenu */
    overflow: hidden; /* Empêche les débordements */
}


/* Mode paysage */
@media (orientation: landscape) {
    #home_section {
        height: 120vh; /* S'assure que la hauteur couvre l'écran */
        padding: 0 2vw; /* Ajoute une légère marge intérieure sur les côtés */
    }

    #home_section .content {
        margin-top: 3vi; /* Réduit la marge supérieure pour un alignement optimal */
        font-size: 1.2em; /* Augmente légèrement la taille de la police */
        pointer-events: auto; /* Permet les interactions si nécessaire */
    }
}

/* Petits écrans en paysage (par exemple, téléphones de faible hauteur) */
@media (orientation: landscape) and (max-height: 500px) {
    #home_section {
        padding: 0 1vw; /* Réduit les marges pour optimiser l'espace */
    }

    #home_section .content {
        font-size: 0.9em; /* Réduit légèrement la taille pour les petits écrans */
        line-height: 1.5; /* Améliore l'espacement des lignes */
        margin-top: 2vi; /* Réduit davantage la marge supérieure */
    }
}

#particles
{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: all;
	-webkit-mask-image: linear-gradient(to bottom, transparent 50px, black 200px);
	mask-image: linear-gradient(to bottom, transparent 50px, black 200px);
}

#home_section .content
{
	pointer-events: none;
	margin-top: 5vi;
	
}

#home_section .content {
    pointer-events: none; /* Empêche les interactions si nécessaire */
    margin-top: 5vi; /* Garde la marge adaptée */
    text-align: center; /* Centrer le contenu pour un meilleur rendu */
}

/* Pour le mode paysage */
@media (orientation: landscape) {
    #home_section .content {
        margin-top: 3vi; /* Réduire la marge pour éviter les coupures */
        max-width: 90%; /* Limiter la largeur du contenu */
        margin-left: auto; /* Centrer horizontalement */
        margin-right: auto;
        pointer-events: auto; /* Activer les interactions si souhaité */
    }
}

/* Ajustements supplémentaires pour petits écrans en paysage */
@media (orientation: landscape) and (max-height: 500px) {
    #home_section .content {
        font-size: 0.9em; /* Réduire légèrement la taille de la police */
        line-height: 1.4; /* Ajuster l'espacement des lignes */
        margin-top: 2vi; /* Encore moins de marge */
    }
}

#home_section .hi
{
	pointer-events: all;
	font-family: raleway_semi_bold;
	font-size: 16px;
	margin-right: 10px;
	color: var(--light_gray);
}

#home_section .name
{
	pointer-events: all;
	font-family: calibre_semi_bold;
	font-size: clamp(40px, 8vw, 80px);
	color: var(--white);
	margin-top: 25px;
}

#home_section .title
{
	pointer-events: all;
	font-family: calibre_semi_bold;
	font-size: clamp(40px, 8vw, 70px);
	color: var(--light_gray);
}

#home_section .bio
{
	pointer-events: all;
	font-family: calibre_regular;
	max-width: 470px;
	font-size: 20px;
	color: var(--light_gray);
	line-height: 1.3;
	margin-top: 15px;
}

#home_section .home_button
{
	margin-top: 50px;
}


#home_section .spaceName{
	width: 15vh; /* Largeur de la div en fonction de la hauteur de la fenêtre */
    height: 15vh; /* Hauteur de la div en fonction de la hauteur de la fenêtre */
    display: flex; /* Active Flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    margin: 0 auto; /* Centre la div horizontalement dans son parent */
	margin-top: 25px;
	margin-bottom: 25px;

}


/* Style pour Mobile */
@media (max-width: 768px) {
    #home_section .spaceName{
	width: 15vh; /* Largeur de la div en fonction de la hauteur de la fenêtre */
    height: 15vh; /* Hauteur de la div en fonction de la hauteur de la fenêtre */
    display: flex; /* Active Flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    margin: 0 auto; /* Centre la div horizontalement dans son parent */
	margin-top: 25px;
	margin-bottom: 25px;
}
}

/* Style pour Desktop */
#home_section .logoSoso {
    position: relative;
    left: 50%;
    top: -20%;
    height: 25px;
    width: 120px;
    z-index: 1;
    margin-left: -60px;
    margin-top: -32px;
    transform-origin: 50% 0;
}

/* Style pour Mobile */
@media (max-width: 768px) {
    #home_section .logoSoso {
        position: relative;
        left: 12vw;  /* Collé à la gauche de l'écran */
        top: -5vh;  /* Ajustez cette valeur selon votre préférence */
        height: 25px;  /* Ajustez la taille pour les écrans plus petits */
        width: 120px;  /* Ajustez la largeur pour les écrans plus petits */
        z-index: 1;
        margin-left: -60px;  /* Collé à gauche sans marge */
        margin-top: 5vh;   /* Ajustez le margin-top si nécessaire */
        transform-origin: 50% 0;
    }
}

/* Style pour un autre élément */
@media (max-width: 768px) {
#home_section .hi {
    pointer-events: all;
    display : flex;
    left: 0;
    font-family: raleway_semi_bold;
    font-size: 16px;
    margin-right: 10px;
    color: var(--light_gray);
    }
}





/* Masquer l'image par défaut */
.svg-logo {
  display: none;
}

/* Afficher uniquement sur les écrans de 768px ou moins */
@media (max-width: 768px) {
  .svg-logo {
    display: block;
    width: 50vw;  /* Ajustez la taille si nécessaire */
    height: auto;
    margin: 10px auto; /* Centrer l'image avec un espace */
  }
}