@import"https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*{margin:0;padding:0;font-family:Poppins,sans-serif;box-sizing:border-box}:root{--background: rgba(24, 23, 40, 255);--box: rgba(32, 29, 50, 255);--font: rgba(245, 245, 250, 255);--border: rgba(132, 130, 145, 255);--boxborder: rgba(138, 136, 243, 255);--placeholder: rgba(131, 129, 143, 255)}section{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--background)}.signup-box{width:400px;height:530px;display:flex;justify-content:center;align-items:center;border-radius:20px;background-color:var(--box);position:relative}h2{font-size:30px;margin-bottom:40px;text-align:center;color:var(--font)}.input{width:300px;margin:30px;border-bottom:2px solid var(--border)}input{border:none;outline:none;background:none;color:var(--font)}input::placeholder{color:var(--placeholder)}button{width:300px;margin:10px 0 20px 30px;padding:10px;border-radius:10px;border:none;outline:none;background:none;border:3px solid var(--boxborder);color:var(--font);font-size:15px}button:hover{background-color:var(--boxborder);color:var(--font);transition:.25s}.input input{width:100%;padding:10px;border-radius:10px;border:none}.login{font-size:13px;text-align:center;color:var(--font)}.login a{font-size:14px;text-decoration:none;color:var(--font)}.login a:hover{text-decoration:underline;color:var(--boxborder);transition:.1s}.demo-acc{width:100px;height:100px;background-color:orange;position:absolute;border-radius:50%;right:-50px;top:50px;display:flex;text-align:center;align-items:center}.demo-acc:hover{cursor:pointer;scale:110%}