@charset "utf-8";
*{
	margin :0;
	list-style: none;
	font-family : "poppins";
	padding: 0;
	
	}
	
	body{
		height: 100vh;
		position: relative;
		display:flex;
		align-items:flex-start;
		justify-content:center;
		background:url(bg.jpg);
		background-attachment: fixed;
		background-size:cover;
		background-position:center;
		
		
		}

header {
	height: 100vh;
	width: 100vw;
}


.btn {
text-decoration: none;
padding: 19px;
font-family: arial;
font-size: 1.9em;
color: #FFFFFF;
background-color: #ff0000;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border: 4px solid #FFFFFF;
box-shadow: 3px 3px 12px #444444;
-webkit-box-shadow: 3px 3px 12px #444444;
-moz-box-shadow: 3px 3px 12px #444444;
}


.btn:hover {
padding: 19px;
background-color: #899F11;
box-shadow: 1px 1px 12px #777777;
-webkit-box-shadow: 1px 1px 12px #777777;
-moz-box-shadow: 1px 1px 12px #777777;
}


.btn1 {
text-decoration: none;
padding: 19px;
font-family: arial;
font-size: 1.9em;
color: #FFFFFF;
background-color: #0070c0;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
border: 4px solid #FFFFFF;
box-shadow: 3px 3px 12px #444444;
-webkit-box-shadow: 3px 3px 12px #444444;
-moz-box-shadow: 3px 3px 12px #444444;
}


.btn1:hover {
padding: 19px;
background-color: #002060;
box-shadow: 1px 1px 12px #777777;
-webkit-box-shadow: 1px 1px 12px #777777;
-moz-box-shadow: 1px 1px 12px #777777;
}






.navbar{
	
	position: fixed;
	/*position: absolute;*/
	align-items: center; 
	padding: 50px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box; 
}

.navbar a {
	color: white;
}
.navbar .logo {
	font-size: 2em;
	font-weight: bold;
}

.navbar .nav-links {
	display: flex;
	align-items: center;
}
.navbar .nav-links ul{
	display: flex;
}
.navbar .nav-links ul li{
	margin: 0 25px;
	
}

.navbar .hamburger {
            display: none;
			font-size: 30px;
            cursor: pointer;
            color: white;
            margin-left: 15px;
			position:absolute;
			top:50px;
			right: 50px;

}


.mobile-menu {
	margin-left:0;
    }	

@media screen and (max-width: 900px) {
	.navbar {padding: 0; }
	
    .nav-links {
		top: 0;
		left:0;
		position: absolute; 
		background-color: rgba(255,255,255,0.20);
		backdrop-filter: blur(8px);
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: -100%;
		transition: all 0.5s ease;
		
	}
	
	.nav-links ul{
		display: flex;
		flex-direction: column; 
		align-items: center;
	}

.navbar .logo {
		position:: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 40px;
		left: 20px;
		
			
	}

.navbar .nav-links ul li{
	margin:  25px 0;
    font-size: 1.2em;	
}

.nav-links.mobile-menu {
	margin-left:0;
    }
.navbar .hamburger {
		display: block;
		
	}



.cardForm{
	display:flex;
	position: relative;
   	top: 100px;
	align-items:right;
	justify-content:center;
	
	padding: 2px;
	/*height: 100%;*/
	width: 100px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	border-left: 1px solid rgb(125,125,125);
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	
	}





}


.card{
	height : 600px;
	width: 400px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	border-left: 1px solid rgb(125,125,125);
	
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	}

.card .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 0 20px;
}
	
.card .content .picture{
	width: 150px;
	height: 150px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 20px;
	margin-top: -50px;
}

.card .content .picture::before {
	position: absolute;
	content: url(circle.png);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 170px;
	width: 170px;
}

.card .content .picture img{
width: 100%;
height: 100%;
}

.card .content h2 {
	color: white;
	
}
.card .content  p {
	color: white;
	font-size: 12px;
}

.card .content  label {
	color: white;
	font-weight: bold;
}

.valid { color:white; }
.invalid { color: black; font-size: 12px; }
.invalid img {  visibility: hidden;}
.valid img { visibility: visible; }


.eye-icon {
  cursor: pointer;
  position: absolute;
   right: 10px;
  top: 50%;
  transform: translateY(-50%);
     }
	 
.input-wrapper  { 
	position: relative;
	width: 350px;
	}
	


.cardForm{
	display:flex;
	position: relative;
   	top: 100px;
	align-items:right;
	justify-content:center;
	
	padding: 20px;
	/*height: 100%;*/
	width: 800px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	border-left: 1px solid rgb(125,125,125);
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	
	}

.cardForm .contentForm {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: right;
	height: 100%;
	padding: 20px;
}






.sidebar {
   position: fixed;
   left: 0;
    height : 600px;
	width: 200px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	border-radius: 15px;
	border-top: 1px solid rgb(125,125,125);
	/*border-left: 1px solid rgb(125,125,125);*/
	
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
 
 
 /*
  position: fixed; // Rendre le menu fixe //
  top: 0;
  left: 0;
  height: 100%; // Prend toute la hauteur de la page //
  width: 250px; // Largeur du menu //
  background-color: #333;
  padding-top: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
*/


}
.sidebar a {
  padding: 15px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}

.sidebar a:hover {  background-color: #575757;  }