:root{ --main-body-color:linear-gradient(45deg,#f9e906, #f7ff80); --yellow:#f9e906; --light-yellow:#f7ff80; --blue:#130f40; --light-color:#666; --box-shadow:0 .5rem 1rem rgba(0,0,0,.1); --border:.1rem solid rgba(0,0,0,.1); } body{ font-family: Arial, Helvetica, sans-serif; margin: 0; background:var(--main-body-color); background-size: cover; background-attachment: fixed; } .logo-place{ width: 130px; justify-content: center; align-items: center; margin-top:1px; } .logo-place img{ width: 90%; } *{ box-sizing: border-box; } .contenedor{ width: 100%; padding: 15px; } .formulario{ background: #fff; margin-top: 150px; padding: 3px; } h1{ text-align: center; color: var(--blue); font-size: 40px; } input[type="text"], input[type="password"]{ font-size: 20px; width: 82%; padding: 10px; border: none; } .input-contenedor{ margin-bottom: 15px; border: 1px solid #aaa; } .icon{ min-width: 50px; text-align: center; color: #999; } .button{ border: none; width: 100%; color: white; font-size: 20px; background: var(--blue); padding: 15px 20px; border-radius: 5px; cursor: pointer; } .button:hover{ background: cadetblue; } p{ text-align: center; } .link{ text-decoration: none; color: var(--blue); font-weight: 600; } .link:hover{ color: cadetblue; } @media(min-width:768px) { .formulario{ margin: auto; width: 500px; margin-top: 100px; border-radius: 2%; } }