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

body{
margin:0; 
padding:0; 
min-height:100vh; 
display:flex; 
justify-content:center; 
align-items:center; 
overflow:hidden; 
font-family:Arial, sans-serif;
perspective:1200px; 
background: linear-gradient( -45deg, #DC143C, #E0115F, #003893, #002868, #DC143C ); 
background-size:400% 400%; 
animation:bgMove 12s ease infinite;
}

@keyframes bgMove{ 
    0%{ background-position:0% 50%; } 
    50%{ background-position:100% 50%; } 
    100%{ background-position:0% 50%; } 
    
}

.container{
position:relative; 
width:900px;
max-width:95%; 
min-height:550px;
background:rgba(255,255,255,0.12); 
backdrop-filter:blur(18px); 
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,0.25);
border-radius:25px; 
box-shadow: 0 25px 50px rgba(0,0,0,0.35), inset 0 0 20px rgba(255,255,255,0.1);
transform-style:preserve-3d; animation:floatBox 6s ease-in-out infinite;
}

@keyframes floatBox{ 
    0%{ transform:rotateX(0deg) rotateY(0deg) translateY(0px); } 
    25%{ transform:rotateX(4deg) rotateY(-4deg) translateY(-10px); } 
    50%{ transform:rotateX(0deg) rotateY(4deg) translateY(0px); } 
    75%{ transform:rotateX(-4deg) rotateY(-4deg) translateY(10px); } 
    100%{ transform:rotateX(0deg) rotateY(0deg) translateY(0px); } 
    
}

.form-box{
position:absolute;
top:0;
width:50%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
padding:40px;
transition:0.6s;
}

form{
width:100%;
}

form h1{
margin-bottom:20px;
}

form input{
width:100%; padding:14px; margin:10px 0; border:none; border-radius:12px; outline:none; background:rgba(255,255,255,0.18); color:#fff; font-size:15px;
}

input::placeholder{ color:rgba(255,255,255,0.75); }

button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:linear-gradient(45deg,#DC143C,#003893);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:0.4s;
}

button:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 10px 20px rgba(0,0,0,0.25);
}

/* Text */
h1,p,label{
    color:#fff;
}

/* Shining Effect */
.container::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
    );
    transform:rotate(25deg);
    animation:shine 5s linear infinite;
}

@keyframes shine{
    0%{transform:translateX(-100%) rotate(25deg);}
    100%{transform:translateX(100%) rotate(25deg);}
}

.login-box{
left:0;
}

.register-box{
left:0;
opacity:0;
z-index:1;
}

.overlay-box{
position:absolute;
right:0;
top:0;
width:50%;
height:100%;
background:linear-gradient(135deg,#6a11cb,#2575fc);
color:#fff;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
transition:0.6s;
}

.overlay-panel{
text-align:center;
padding:20px;
}

.ghost{
background:transparent;
border:2px solid #fff;
padding:12px 30px;
color:#fff;
margin-top:20px;
cursor:pointer;
}

.container.active .login-box{
transform:translateX(100%);
opacity:0;
}

.container.active .register-box{
transform:translateX(100%);
opacity:1;
z-index:5;
}

.container.active .overlay-box{
transform:translateX(-100%);
}

p{
margin-top:10px;
color:red;
}