body {
    font-family: 'Arial', sans-serif;
    color: white; /* Texte en blanc */
    background-color: #000; /* Fond en noir */
    margin: 0;
    padding: 20px;
}

h2 {
    color: white; /* Titre en blanc */
    text-align: center;
    margin-bottom: 20px;
}

/* Styles pour le conteneur de formulaire */
.form-container {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    max-width: 300px; /* Réglage de la largeur maximale du formulaire */
    margin: 0 auto; /* Centrer le formulaire */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* Styles pour les champs du formulaire */
.form-container input[type="text"],
.form-container input[type="email"], /* Ajout de cette ligne */
.form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #333; /* Fond plus clair pour les champs */
    color: white; /* Texte en blanc pour les champs */
    box-sizing: border-box; /* S'assurer que padding et border sont inclus dans la largeur totale */
}

/* Styles pour les boutons de connexion et d'inscription */
.form-container button, /* Ajout pour inclure les boutons */
.form-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #ee3131; /* Rouge pour le bouton */
    color: white; /* Texte en blanc pour le bouton */
    cursor: pointer;
    font-size: 16px; /* Assurer que le texte dans le bouton est bien lisible */
    margin-bottom: 10px; /* Espace entre les boutons s'ils sont l'un sur l'autre */
}

.form-container button:hover, /* Ajout pour l'effet de survol des boutons */
.form-container input[type="submit"]:hover {
    background-color: #d82828; /* Rouge assombri pour l'effet de survol */
}

/* Style pour les messages d'erreur */
.error-message {
    color: #D8000C;
    background-color: #FFD2D2;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #D8000C;
    border-radius: 4px;
    text-align: center;
}

/* Styles pour le conteneur du logo */
.logo-container {
    text-align: center;
    margin-bottom: 20px; /* Ajoutez de l'espace entre le logo et le formulaire */
    max-width: 300px; /* Même largeur que le conteneur de formulaire */
    margin-left: auto; /* Centrer le conteneur du logo */
    margin-right: auto; /* Centrer le conteneur du logo */
}

.logo-container img {
    width: 100%; /* Le logo prend toute la largeur du conteneur */
    height: auto; /* Gardez l'aspect ratio de l'image */
}
/* Styles pour le séparateur entre les boutons */
.separator {
    text-align: center;
    margin: 5px 0; /* Ajustez cette valeur selon vos préférences */
}