@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Share+Tech+Mono&display=swap); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; color: black; } a{ text-decoration: none; } body{ display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; background: #fff; } .containerC{ position: relative; width: 500px; min-height: 500px; display: inline; justify-content: center; align-items: center; background: #fff; box-shadow: 10px 10px 20px #fff, -10px -10px 20px #ccc; border-radius: 30px; padding: 50px; margin: 50px; } form{ position: relative; width: 100%; } .containerC h3{ color: #000; font-weight: 600; font-size: 2em; width: 100%; text-align: center; margin-bottom: 30px; letter-spacing: 2px; text-transform: uppercase; } .CadreInput { position: relative; width: 100%; margin-bottom: 20px; } .CadreInput span{ display: inline-block; color: #000; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75em; border-left: 4px solid #000; padding-left: 4px; line-height: 1em; } .CadreInput .box{ display: flex; } .CadreInput .box .icon{ position: relative; min-width: 40px; height: 40px; background-color: #00DBFF; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-right: 10px; color: #000; font-size: 1.15em; } .CadreInput .box input{ position: relative; width: 100%; border: none; outline: none; padding: 10px 20px; border-radius: 10px; letter-spacing: 1px; font-size: 0.85em; border: #00DBFF 2px solid; } .CadreInput .box input[type="submit"]{ background-color: #00DBFF; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-top: 10px; border: none; } .CadreInput .box input[type="submit"].other{ background-color: #fff; color: #00DBFF; margin-right: 15px; } .forgot{ color: #000; letter-spacing: 1px; font-size: 0.85em; }