.page-container{width:100vw}.flex-container{display:flex;align-items:center;gap:200px;margin:80px 150px 180px}.sign-in-up-h1{font-weight:700;font-size:120px;line-height:100%}.user-form{display:flex;flex-direction:column;margin:60px auto 0;border:1px solid var(--translucent-purple);border-radius:25px;background-color:var(--white);padding:28px;width:550px}.h1-user-form{background-image:linear-gradient(90deg,#8e10e7,#dc82ff);background-clip:text;color:transparent;font-weight:700;font-size:40px;text-align:center}.h2-user-form{margin:0 0 50px;color:var(--secondary-text-color);font-weight:400;font-size:18px;text-align:center}.form-input-container{display:flex;flex-direction:column;margin-bottom:20px;font-size:16px;label{margin-bottom:5px;font-weight:700}}.signupin-page-container input,.signupin-page-container textarea{border:1px solid var(--translucent-purple);border-radius:15px;background-color:var(--white-gray);padding:12px;&:focus{box-shadow:0 0 25px 2px rgba(188,97,254,.5)}&:focus-visible{outline:1px solid #9d14ff}}.btn-form{cursor:pointer;border-radius:35px;padding:20px 40px;width:100%;font-weight:700;font-size:17px}.btn-form-sign-in,.btn-form-sign-up{transition:background-position .6s ease;background:linear-gradient(90deg,rgba(142,16,231,1),rgba(220,130,255,1) 51%,rgba(142,16,231,1));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.user-form-hr{margin:20px 0;color:var(--light-gray)}.btn-form-github{position:relative;transition:background-position .6s ease;background:linear-gradient(90deg,rgb(34,34,34),rgb(110,110,110) 51%,rgb(34,34,34));background-position:0 100%;background-size:200% 100%;color:var(--white);&:hover{background-position:100% 100%}}.github-logo{position:absolute;top:50%;left:0;transform:translateY(-50%);padding-left:20px;width:55px}.switch-form{margin-top:30px;color:var(--secondary-text-color);text-align:center;span{margin-left:10px;color:var(--purple);font-weight:700}}