body {
    font-family: Poppins, sans-serif;
    background-color: #4CAF50; /* Couleur de fond verte */
    background-image: url("https://cdn2.unrealengine.com/Diesel%2Fblog%2Faccount-security-at-epic-games%2FEGS_Social_Update_News-2560x1440-128a69890d92407b815582c1deba54450e5645f9.jpg");
}
.containerlogin {
    background: rgba(0, 0, 0, 0.26); /* Fond blanc transparent */
    backdrop-filter: blur(10px); /* Flou de l'arrière-plan */
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Ombre douce */
    padding: 50px; /* Réduction de la taille de l'interface */
    width: 40%; /* Largeur fixe pour la taille de l'interface */
    min-height: 300px;
}
.error{
    text-align: center;
    color: red;
    font-size: 1.1em;
}
input[type="text"].inputerror,
input[type="password"].inputerror {
    border: 2px solid red; /* Définit une bordure rouge épaisse pour les éléments d'entrée */
}
input[type="text"].inputerror:focus,
input[type="password"].inputerror:focus {
    border: none; /* Définit une bordure rouge épaisse pour les éléments d'entrée */
}
.logout{
    text-align: center;
    color: green;
    font-size: 1.1em;
}
.tab {
    color: white;
    background-color: #171a21;
    padding: 20px;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 15px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 20px;
    border-radius: 15px;
}
input[type="submit"] {
    background-color: #05ee84;
    color: white;
    padding: 10px 10px;
    margin: 15px 0;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    width: 25%;
    font-size: 20px;
    transition: background-color 200ms;
}
input[type="submit"]:hover {
    background-color: #06ad61;
}
legend{
    text-align: center;
}legend a{
     color: white;
 }
button{
    background-color: #05ee84;
    color: white;
    padding: 10px 10px;
    margin: 15px 0;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    width: 25%;
    font-size: 20px;
    transition: background-color 200ms;
}
button:hover {
    background-color: #06ad61;
}
.btn-container {
    display: flex;
    justify-content: space-between;
}
.btn-right{
    justify-content: end !important;
}
h2{
    text-align: center;
    text-shadow: 0 0 15px black;
}
input.invalid{
    border: 3px solid red;
}

input[type="text"]:valid,
input[type="password"]:valid,
input[type="email"]:valid,
input[type="date"]:valid {
    border: 3px solid green;
}