:root{--light-purple:rgb(16,22,36);--font-color:rgb(242,251,248);--input-color:rgba(0,0,0,0.5);--border-color:rgb(207,88,206)}*{margin:0;padding:0;box-sizing:border-box;font-family:Shabnam}.container{padding:40px;border-radius:20px;border:2px solid var(--border-color);box-shadow:-5px -5px 15px rgba(255,255,255,.1),5px 5px 15px rgba(0,0,0,.35),inset -5px -5px 15px rgba(255,255,255,.1),inset 5px 5px 15px rgba(0,0,0,.35)}@media (max-width:720px){.container{padding:40px 20px}}.container .form{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:25px}.container .form.signin,.container.signinForm .form.signup{display:none}.container.signinForm .form.signin{display:flex}.container .form h2{color:var(--font-color);font-weight:500}.container .form .inputBox{position:relative;width:300px}.container .form .inputBox input{border:none;width:100%;background:var(--light-purple);border:1px solid rgba(0,0,0,.1);color:white!important;border-radius:25px;box-shadow:-5px -5px 15px rgba(255,255,255,.1),5px 5px 15px rgba(0,0,0,.35);outline:none}.container .form .inputBox input,.container .form .inputBox span{padding:12px 48px 12px 10px;font-weight:300;font-size:1em;transition:.5s}.container .form .inputBox span{position:absolute;right:0;pointer-events:none;letter-spacing:.05em;color:white}.container .form .inputBox input:focus~span,.container .form .inputBox input:valid~span{color:#00dfc4;border:1px solid #00dfc4;background:var(--light-purple);transform:translateX(-25px) translateY(-7px);font-size:.6em;padding:0 8px;border-radius:10px;letter-spacing:.1em}.container .form .inputBox input:focus,.container .form .inputBox input:valid{border:1px solid #00dfc4}.container .form .inputBox i{position:absolute;top:12px;right:16px;width:25px;padding:2px 0 2px 8px;color:#00dfc4;border-left:1px solid #00dfc4}.container .form .inputBox input[type=submit]{background:blueviolet;color:#fff;border:blueviolet;padding:10px 0;font-weight:500;cursor:pointer;box-shadow:-5px -5px 15px rgba(255,255,255,.1),5px 5px 15px rgba(0,0,0,.35),inset -5px -5px 15px rgba(255,255,255,.1),inset 5px 5px 15px rgba(0,0,0,.35)}.container .form p{color:rgba(255,255,255,.496);font-size:.75em;font-weight:300}.container .form p a{font-weight:500;color:var(--font-color);margin-right:8px}.error-text{color:red;margin-top:10px;font-size:14px}