*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; font-family: verdana; color: #ffffff; letter-spacing: 0.5px; outline: none; border: none; text-decoration: none; } body{ background-color: #080710; } .wrap{ width: 430px; height: 520px; position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; } .wrap .shape{ height: 200px; width: 200px; position: absolute; border-radius: 50%; } .shape:first-child{ background: linear-gradient( #1845ad, #23a2f6 ); left: -50px; top: -50px; } .shape:last-child{ background: linear-gradient( to right, #ff512f, #f09819 ); right: -30px; bottom: -50px; } form{ height: 600px; width: 500px; background-color: rgba(255,255,255,0.13); position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 20px; backdrop-filter: blur(3px); border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 0 40px rgba(8,7,16,0.6); padding: 40px 25px; } h2{ text-align: center; font-size: 2em; } p{ margin: 10px; text-align: center; } .form-group{ margin-top: 40px; } input{ display: block; height: 50px; width: 100%; background-color: rgba(255,255,255,0.07); border-radius: 5px; padding: 0 10px; margin-top: 30px; margin-bottom: 15px; font-size: 15px; font-weight: 300; } ::placeholder{ color: #e5e5e5; } .container { position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); } .button { position: relative; text-align: center; width: 200px; padding: 10px; font-size: 20px; font-family: poppins; font-weight: 400; border: 5px solid #15f4ee; text-transform: uppercase; letter-spacing: 7px; cursor: pointer; border-radius: 100px; transition: 1.5s; } .button:hover { box-shadow: 0 5px 50px 0 #15f4ee inset,0 5px 50px 0 #15f4ee, 0 5px 50px 0 #15f4ee inset,0 5px 50px 0 #15f4ee; } form1 div { margin-bottom: 10px; } form1 div .clear { margin-bottom: 0; } form1 input,label { cursor: pointer; } form1 input[type="radio"] { float: left; width: 20px; margin-right: 20px; margin-top: 0px; } form1 label { float: left; width: 100px; margin-bottom: 50px;}