@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Alegreya',sans-serif; } a{ text-decoration: none; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: url("../img/background-login.jpg"); -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */ backdrop-filter: blur(35px); background-color: rgba(182, 182, 182, 0.2); } .container{ position: relative; width: 400px; min-height: 550px; justify-content: center; align-items: center; background: #F2561D; box-shadow: 25px 25px 75px rgba(0,0,0,0.25), 10px 10px 70px rgba(0,0,0,0.5); border-radius: 30px; padding: 50px; } form{ position: relative; width: 100%; } .container h3{ color: #0D0D0D; font-weight: 600; font-size: 2em; width: 100%; text-align: center; margin-bottom: 30px; letter-spacing: 1px; } container a:link{ color: #0D0D0D; } container a:visited{ color: #0D0D0D; } container a:hover{ color: #0D0D0D; } .Input{ position: relative; width: 100%; margin-bottom: 20px; } .Input span{ display: inline-block; color: #0D0D0D; margin-bottom: 10px; letter-spacing: 1px; font-size: 1.25em; border-left: 4px solid #FF8444; padding-left: 4px; line-height: 1em; } .Input .box{ display: flex; } .Input .box .icon{ position: relative; min-width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 10px; color: #0D0D0D; font-size: 1.15em; box-shadow: 5px 5px 7px rgba(0,0,0,0.25); } .Input .box input{ position: relative; width: 100%; border: none; outline: none; padding: 10px 20px; border-radius: 30px; font-size: 0.85em; box-shadow: 5px 5px 7px rgba(0,0,0,0.25); } .Input .box input[type="submit"]{ background-color: #0D0D0D; box-shadow: 5px 5px 7px rgba(0,0,0,0.25); color: #FF8444; cursor:pointer; letter-spacing: 2px; font-weight: 600; margin-top: 10px; } label{ color: #0D0D0D; letter-spacing: 1px; font-size: 0.95em; display: flex; align-items: center; } label input{ margin-right: 5px; }