@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";:root{--font: "Inter", sans-serif;--primary: #428eff;--white: rgba(255, 255, 255);--black: #202020}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font)}.layout{background-image:url(https://images.pexels.com/photos/1902415/pexels-photo-1902415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);background-position:center;background-repeat:no-repeat;background-size:cover;height:100vh;display:flex;justify-content:center;align-items:center}form{width:30%;display:flex;gap:1rem;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;border-radius:10px;padding:2rem 3rem;box-shadow:0 0 10px #00000030}.form-input{display:flex;flex-direction:column;width:100%;gap:.5rem}.form-input input{padding:1rem 1.5rem;width:100%;font-family:var(--font);border:1px solid gray;border-radius:5px}.form-input label{color:gray}.form-input span{font-size:.9rem;color:red;display:none}input:invalid[focused=true]{border:1px solid red}input:invalid[focused=true]~span{display:block}.btn{background:#ff4742;border:1px solid #ff4742;border-radius:6px;box-shadow:#0000001a 1px 2px 4px;box-sizing:border-box;color:#fff;cursor:pointer;font-family:var(--font);display:inline-block;font-size:16px;font-weight:800;line-height:16px;min-height:40px;outline:0;padding:12px 14px;text-align:center;text-rendering:geometricprecision;text-transform:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;vertical-align:middle}.btn:hover,.btn:active{background-color:initial;background-position:0 0;color:#ff4742}.btn:active{opacity:.5}