#bg1,
#bg2 {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

#bg1 {
	background: -webkit-linear-gradient(top, rgb(10, 50, 40), rgb(10, 10, 10));
	background: linear-gradient(top, rgb(10, 50, 40), rgb(10, 10, 10));
}

#bg2 {
	opacity: 0;
	background: -webkit-linear-gradient(top, rgb(25, 50, 95), rgb(0, 20, 45));
	background: linear-gradient(top, rgb(25, 50, 95), rgb(0, 20, 45));
}

p {
	font-family: "Verdana";
	font-size: 18px;
	color: #CCCCCC;
	text-align: center;
	display: inline-block;
	width: 100%;
}

h1 {
	font-family: "Verdana";
	font-size: 38px;
	color: #CCCCCC;
	text-align: center;
	display: inline-block;
	width: 100%;
}

.title {
	position: absolute;
	display: inline-block;
	top: 15%;
	width: 29%;
	right: 35%;
	text-align: center;
	-webkit-transition: opacity 1s, right 1s;
	transition: opacity 1s, right 1s;
}

.form {
    background-color: rgba(0, 0, 0, 0.652);
    margin: 0 auto; /* Centrer horizontalement */
    display: block; /* Supprimez la propriété display:inline-block */
    font-size: 14px;
    font-family: "Verdana";
    line-height: 40px;
    color: #CCCCCC;
    top: 5%;
    width: 450px; /* Trois fois plus large */
    text-align: start;
    position: relative; /* Ajoutez cette propriété pour positionner correctement le formulaire */
    border-radius: 20px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    backdrop-filter: blur(6px); /* Ajoutez l'effet de flou */
    -webkit-backdrop-filter: blur(px); /* Pour la prise en charge de navigateurs basés sur WebKit */
}
/* CSS pour le bouton */
.submitButton {
    width: 90%; /* Vous pouvez ajuster la largeur selon vos besoins */
    height: 40px; /* Vous pouvez ajuster la hauteur selon vos besoins */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
	margin-top: 0px;
    padding: 6px 10px; /* Vous pouvez ajuster le padding selon vos besoins */
    font-size: 14px; /* Vous pouvez ajuster la taille de police selon vos besoins */
    text-align: center;
    color: #EEEEEE;
    border-radius: 8px;
    border: solid 2px;
    border-color: #EEEEEE;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition: color 0.5s, border-color 0.5s, background-color 0.5s, opacity 1s;
    transition: color 0.5s, border-color 0.5s, background-color 0.5s, opacity 1s;
    box-sizing: border-box;
}
.inputContainer {
	margin-bottom: 5px; /* Ajustez la marge selon vos besoins */
}

.submitButton:hover {
	color: rgb(38, 82, 153);
	border-color: rgb(38, 82, 153);
	background-color: rgba(0, 0, 0, 0.25);
}

.inputBox {
    width: 90%; /* Vous pouvez ajuster la largeur selon vos besoins */
    height: 40px; /* Vous pouvez ajuster la hauteur selon vos besoins */
    margin: 0 auto;
    display: block; /* Assurez-vous que l'élément est un bloc pour appliquer la marge automatique */
    opacity: 1;
	margin-top: 0px;
    padding: 6px 10px; /* Vous pouvez ajuster le padding selon vos besoins */
    font-size: 14px; /* Vous pouvez ajuster la taille de police selon vos besoins */
    font-family: "Verdana";
    color: rgb(38, 82, 153);
    border-radius: 8px;
    border: solid 2px;
    border-color: #EEEEEE;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-transition: border-width 0.25s, border-color 0.25s, background-color 0.5s, right 1s, opacity 1s;
    transition: border-width 0.25s, border-color 0.25s, background-color 0.5s, right 1s, opacity 1s;
    box-sizing: border-box;
}

.inputBox:focus {
	outline: none;
	border-color: rgb(38, 82, 153);
	background-color: rgba(0, 0, 0, 0.5);
}

.name {
	position: absolute;
	width: 30%;
	opacity: 1;
	right: 35%;
	-webkit-transition: opacity 1s, right 1s, width 1s;
	transition: opacity 1s, right 1s, width 1s;
}

#name1 {
	top: -10%;
}

#name2 {
	top: 32%;
}

.error {
	color: #FF3399;
	font-size: 14px;
}

.message {
	position: absolute;
	display: inline-block;
	font-family: "Verdana";
	font-size: 18px;
	color: #EEEEEE;
	width: 100%;
	text-align: center;
	top: 30%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0s, opacity ease-out 1s, top ease-out 1s;
	transition: visibility 0s, opacity ease-out 1s, top ease-out 1s;
	-webkit-backface-visibility: hidden;
}

.particle {
	opacity: 0;
	position: fixed;
	background-color: rgba(255, 255, 255, 0.5);
	background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
	-webkit-animation: particleAnim 3s ease-in-out infinite;
	animation: particleAnim 3s ease-in-out infinite;
	border-radius: 100%;
	 margin: 0; /* Supprime les marges par défaut du body */
    padding: 0; /* Supprime les espacements par défaut du body */
    height: 100vh; /* Occupera la hauteur complète de la fenêtre */
	width: 100vh;
}

@-webkit-keyframes particleAnim {
	0% {
		opacity: 0;
		transform: translateY(-0%);
	}
	15% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-1500%);
	}
}

@keyframes particleAnim {
	0% {
		opacity: 0;
		transform: translateY(-0%);
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-1500%);
	}
}