 {

Margin: 0;

Padding: 0;

Box-sizing: border-box;

Font-family: ‘Poppins’, sans-serif;

Html, body {

Height: 100%;

Width: 100%;

Display: flex;

Justify-content: center;

Align-items: center;

Overflow: hidden;

Body {

Background-size: cover;

Background-position: center;

Animation: backgroundAnimation 20s infinite;

@keyframes backgroundAnimation {

0% {

Background-image: url(‘image1.png’);

25% {
 Background-image: url(‘image2.png’);

50% {

Background-image: url(‘image3.png’);

75% {

Background-image: url(‘image4.png’);

100% {

Background-image: url(‘image1.png’);

.page-overlay {

Width: 100%;

Height: 100%;

Display: flex;

Justify-content: center;

Align-items: center;

Flex-direction: column;

.header-container {

Background-color: rgba(255, 255, 255, 0.15); /* Glass effect */

Padding: 20px;

Border-radius: 10px;

Margin-bottom: 20px;
 Box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);

.header-container .title {

Font-size: 35px;

Font-weight: 600;

Color: #004d4d; /* Calm teal for the title */

Text-align: center;

/* Glass effect for login page container */

.wrapper {

Max-width: 390px;

Background: rgba(255, 255, 255, 0.25); /* Slight transparency for glass

Backdrop-filter: blur(12px); /* Blur for the glass */

Padding: 30px;

Border-radius: 15px;

Box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);

.slide-controls {

Position: relative;

Display: flex;

Height: 50px;

Width: 100%;

Overflow: hidden;
 Margin: 30px 0 10px 0;

Justify-content: space-between;

Border: 1px solid #cfcfcf;

Border-radius: 15px;

.slide-controls .slide {

Height: 100%;

Width: 100%;

Color: #004d4d; /* Calm teal text */

Font-size: 18px;

Font-weight: 500;

Text-align: center;

Line-height: 48px;

Cursor: pointer;

z-index: 1;

transition: all 0.6s ease;

.slide-controls .slider-tab {

Position: absolute;

Height: 100%;

Width: 50%;

Left: 0;

z-index: 0;

border-radius: 15px;
 background: -webkit-linear-gradient(left, #b2dfdb, #80cbc4, #4db6ac,
#26a69a); /* Pastel greenish gradient */

transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Input[type=”radio”] {

Display: none;

#signup:checked ~ .slider-tab {

Left: 50%;

#signup:checked ~ label.signup {

Color: #fff;

Cursor: default;

User-select: none;

#signup:checked ~ label.login {

Color: #004d4d;

#login:checked ~ label.signup {

Color: #004d4d;

}
#login:checked ~ label.login {

Cursor: default;

User-select: none;

.form-container .form-inner {

Display: flex;

Width: 200%;

.form-container .form-inner form {

Width: 50%;

Transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

.form-inner form .field {

Height: 50px;

Width: 100%;

Margin-top: 20px;

.form-inner form .field input {

Height: 100%;

Width: 100%;

Outline: none;

Padding-left: 15px;

Border-radius: 15px;
 Border: 1px solid #b2dfdb;

Font-size: 17px;

Transition: all 0.3s ease;

Background: rgba(255, 255, 255, 0.6);

.form-inner form .field input:focus {

Border-color: #26a69a;

.form-inner form .field input::placeholder {

Color: #004d4d;

Transition: all 0.3s ease;

Form .field input:focus::placeholder {

Color: #26a69a;

.form-inner form .pass-link {

Margin-top: 5px;

.form-inner form .signup-link {

Text-align: center;

Margin-top: 30px;

}
.form-inner form .pass-link a,

.form-inner form .signup-link a {

Color: #26a69a;

Text-decoration: none;

.form-inner form .pass-link a:hover,

.form-inner form .signup-link a:hover {

Text-decoration: underline;

Form .btn {

Height: 50px;

Width: 100%;

Border-radius: 15px;

Position: relative;

Overflow: hidden;

Form .btn .btn-layer {

Height: 100%;

Width: 300%;

Position: absolute;

Left: -100%;

Background: -webkit-linear-gradient(right, #b2dfdb, #80cbc4, #4db6ac,

Transition: all 0.4s ease;

Form .btn:hover .btn-layer {

Left: 0;

Form .btn input[type=”submit”] {

Height: 100%;

Width: 100%;

z-index: 1;

position: relative;

background: none;

border: none;

color: #fff;

padding-left: 0;

border-radius: 15px;

font-size: 20px;

font-weight: 500;

cursor: pointer;