*{
  box-sizing:border-box;
  margin:0;
  padding:0
}

body{
  font-family:"ADLaM Display",system-ui;
  background:#301c49;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-weight: 400;
}

h1{
  margin:50px auto 30px; 
  font-size:32px; 
  color:#fff;
  text-shadow:-2px 0 #A13DFF; 
  font-weight:400; 
  letter-spacing:2px; 
  text-align:center
}


.login{
  display:grid;
  grid-template-columns: 1fr 70px 1fr;
  grid-template-areas:
    "header header header"
    "email  email  email"
    "passwd passwd passwd"
    "google instagram x"
    "login  .      signup"
    "forgot forgot  forgot";
  gap:18px 18px;
  padding: 30px 75px 70px;
  border-radius:8px;
  border:1px solid transparent;
  background:
    linear-gradient(#1c1129,#1c1129) padding-box,
    linear-gradient(180deg,#8E48FF,#552B99 50%,#6200FF) border-box;
  color:#fff;
}

h2 { 
  grid-area:header; 
  text-align:center; 
  margin-bottom:4px;
  font-weight: 400;
}

.email{ grid-area:email; }
.passwd{ grid-area:passwd; }

.email, .passwd{ 
  display:flex; 
  flex-direction:column;
  gap:8px; 
}

label{
  font-size:12px; color:#fff;
}

input{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid transparent;
  outline:none;
  color:#e9e3ff;
  background:
    linear-gradient(#2a1a3a,#2a1a3a) padding-box,
    linear-gradient(180deg,rgba(223, 161, 237, 1) 0%, rgba(157, 107, 237, 1) 62%, rgba(96, 54, 149, 1) 100%) border-box;
}

input::placeholder{ 
  color:#b6a5e7; 
  opacity:.8;
  font-weight: 600;
}

.google{ grid-area:google; }
.instagram{ grid-area:instagram; }
.x{ grid-area:x; }

button{
  cursor:pointer; 
  border:0; 
  background:none; 
  color:#fff;
}

.google, .instagram, .x{
  height:48px; 
  border-radius:8px; 
  padding:0;
  border:1px solid transparent;
  background:
    linear-gradient(#2a1a3a,#2a1a3a) padding-box,
    linear-gradient(180deg,rgba(223, 161, 237, 1) 0%, rgba(157, 107, 237, 1) 62%, rgba(96, 54, 149, 1) 100%) border-box;
  display:flex; 
  align-items:center; 
  justify-content:center;
}
.google img, .instagram img, .x img{ 
  width:26px; 
  height:26px; 
  display:block 
}

.b-login{  grid-area:login;  justify-self:end;  }
.b-signup{ grid-area:signup; justify-self:start; }

.b-login, .b-signup{
  padding:12px 20px; font-weight:800; border-radius:10px;
  border:1px solid transparent;
  background:
    linear-gradient(#2a1a3a,#2a1a3a) padding-box,
    linear-gradient(180deg,rgba(223, 161, 237, 1) 0%, rgba(157, 107, 237, 1) 62%, rgba(96, 54, 149, 1) 100%) border-box;
}

.b-login:hover, .b-signup:hover{ 
  box-shadow:0 0 12px rgba(142,72,255,.25);
}

.forgotpasswd{
  grid-area:forgot;
  margin-top:6px;
  color:#b8a6ea; font-size:12px;
  text-decoration:underline; cursor:pointer; width:max-content;
}

.forgotpasswd:hover{ 
  color:#fff
}