@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");:root{--first-color:#12192c;--text-color:#8590ad;--body-font:"Roboto",sans-serif;--big-font-size:2rem;--normal-font-size:0.938rem}@media screen and (min-width:768px){:root{--big-font-size:2.5rem;--normal-font-size:1rem}}*,:after,:before{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--body-font);color:var(--first-color)}.l-form{position:relative;height:100vh;overflow:hidden}.shape1,.shape2{position:absolute;width:200px;height:200px;border-radius:50%}.shape1{top:-7rem;left:-3.5rem}.shape1,.shape2{background:linear-gradient(180deg,var(--first-color) 0,hsla(0,0%,77%,0) 100%)}.shape2{bottom:-6rem;right:-5.5rem;transform:rotate(180deg)}.form{height:100vh;display:grid;justify-content:center;align-items:center;padding:0 1rem}.form-content{width:290px}.form-img{display:none}.form-title{font-size:var(--big-font-size);font-weight:500;margin-bottom:2rem}.form-div{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--text-color);margin-bottom:1rem;padding:.25rem 0;transition:border-bottom-color .3s}.form-div.focus{border-bottom:1px solid var(--first-color)}.form-div-one{margin-bottom:3rem}.form-icon{font-size:1.5rem;color:var(--text-color);margin-right:.5rem;transition:color .3s}.form-div.focus .form-icon{color:var(--first-color)}.form-label{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);font-size:var(--normal-font-size);color:var(--text-color);pointer-events:none;transition:all .3s ease}.form-div.focus .form-label,.form-input:focus+.form-label,.form-input:not(:placeholder-shown)+.form-label{top:-1rem;font-size:.875rem;color:var(--first-color)}.form-div-input{flex:1;position:relative}.form-input{width:100%;border:none;outline:none;background:none;padding:.5rem .75rem;font-size:1rem;color:var(--text-color);transition:color .3s}.form-input:focus{color:var(--first-color)}.form-forgot{display:block;text-align:right;margin-bottom:2rem;font-size:var(--normal-font-size);color:var(--text-color);font-weight:500;transition:.5s}.form-forgot:hover{color:var(--first-color)}.form-button{width:100%;padding:1rem;font-size:var(--normal-font-size);outline:none;border:none;margin-bottom:3rem;background-color:var(--first-color);color:#fff;border-radius:.5rem;cursor:pointer;transition:.3s}.form-button:hover{box-shadow:0 15px 36px rgba(0,0,0,.15)}.form-social{text-align:center}.form-social-text{display:block;font-size:var(--normal-font-size);margin-bottom:1rem}.form-social-icon{display:inline-flex;justify-content:center;align-items:center;width:30px;height:30px;margin-right:1rem;padding:.5rem;background-color:var(--text-color);color:#fff;font-size:1.25rem;border-radius:50%;transition:.5s}.form-social-icon:hover{background-color:var(--first-color)}@media screen and (min-width:968px){.shape1{width:400px;height:400px;top:-11rem;left:-6.5rem}.shape2{width:300px;height:300px;right:-6.5rem}.form{grid-template-columns:1.5fr 1fr;padding:0 2rem}.form-content{width:320px}.form-img{display:block;width:700px;justify-self:center}}