the javascript vaildction seem to work the problem now is with CSS can someone please help with this i have to sumbit the project today PIRIUMIS:

Signup

Already have an account?

Back to home page $*\{$

margin: $0$;

padding: $0$;

box$-$sizing: border$-$box;

font$-$family: Arial, sans$-$serif; $/*$ Using Arial as the fallback font $*/$

$\}$

body $\{$

width: $100\%$;

height: $100$vh;

background$-$image: linear$-$gradient$($rgba$(0,0,0,0\mathrm{.}75),$rgba$(0,0,0,0\mathrm{.}75)),$url$($img$/$wallpaper$\backslash$ perfumes.jpg$)$;

background$-$size: cover;

background$-$position: center;

display: flex;

justify$-$content: center;

align$-$items: center;

min$-$height: $100$vh;

$\}$

$.$logo$\{$

position: absolute;

top: $30$px;

left: $30$px;

width: $200$px;

height: auto;

$\}$

$.$banner $\{$

width: $420$px; $/*$ Adjust width as needed $*/$

background: transparent;

color: white;

border: $2$px solid rgba$(225,255,225,\mathrm{.}2)$;

border$-$radius: $10$px;

padding: $30$px $40$px;

backdrop$-$filter: blur$(20$px$)$;

box$-$shadow: $0010$px rgba$(0,0,0,0\mathrm{.}2)$;

margin: $50$px auto; $/*$ Adjust margin as needed $*/$

$\}$

$.$banner h$1\{$

font$-$size: $36$px;

text$-$align: center;

margin$-$bottom: $20$px;

$\}$

$.$banner $.$input$-$box $\{$

width: $100\%$;

height: $50$px;

margin: $30$px $0$;

position: relative; $/*$ Add this line $*/$

$\}$

$.$input$-$box input $\{$

width: $100\%$;

height: $100\%$;

background: transparent;

border: none;

outline: none;

border: $2$px solid rgba$(225,255,225,\mathrm{.}2)$;

border$-$radius: $40$px;

color: white;

padding: $20$px $45$px $20$px $20$px;

$\}$

$.$input$-$box input::placeholder $\{$

color: white;

$\}$

$.$error $\{$

position: absolute;

top: $-20$px;

left: $0$;

color: red;

font$-$size: $14$px;

$\}$

$.$banner $.$button $\{$

width:$100\%$;

height: $45$px;

background: transparent;

border: $2$px solid #C$98694$;

border$-$radius:$40$px;

box$-$shadow: $0010$px rgba$(0,0,0,0\mathrm{.}1)$;

cursor: pointer;

font$-$size: $16$px;

color:#fff;

font$-$weight:$600$;

text$-$align:center;

margin:$20$px $10$px; $/*$ Adjust margin as needed $*/$

position: relative;

overflow: hidden;

margin$-$top: $20$px;

$\}$

span $\{$

background: #C$98694$;

height: $100\%$;

width: $0\%$;

border$-$radius: $25$px;

position: absolute;

left: $0$;

bottom: $0$;

z$-$index: $-1$;

transition: $0\mathrm{.}5$s;

$\}$

button:hover span $\{$

width: $100\%$;

$\}$

$.$banner $.$register$-$link $\{$

font$-$size: $14\mathrm{.}5$px;

text$-$align: center;

margin: $20$px $015$px;

$\}$

$.$register$-$link p a $\{$

color: #fff;

text$-$decoration: none;

font$-$weight: $600$;

$\}$

$.$register$-$link p a:hover $\{$

text$-$decoration: underline;

$\}$

$.$banner $.$Privacy a $\{$

color: #fff;

text$-$decoration: none;

font$-$weight: $600$;

text$-$decoration: underline;

display:contents;

$\}$

$.$Privacy input $\{$

accent$-$color: #fff;

margin$-$right: $5$px;

$\}$