body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;

  background: linear-gradient(
    180deg,
    #f48ca8 0%,
    #f6a5b8 25%,
    #f8c6cf 55%,
    #fde2e8 100%
  );
}

body::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  background: radial-gradient(
    circle at 20% 10%,
    rgba(255,255,255,0.4),
    transparent 40%
  );

  pointer-events:none;
}

/* MAIN CONTAINER FOR WAVES */
.background-wave{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}

.background-wave::before{
  content:"";
  position:absolute;
  bottom:-80px;
  left:-10%;
  width:130%;
  height:350px;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.9),
    rgba(255,255,255,0.4)
  );

  border-radius:50%;
  filter: blur(20px); 
}

.background-wave::after{
  content:"";
  position:absolute;
  bottom:-40px;
  left:-15%;
  width:140%;
  height:300px;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.2)
  );

  border-radius:50%;
  filter: blur(30px);
}

.logo{
  position:absolute;
  top:30px;
  left:40px;
  width:250px;
  z-index:10;
}

/* CONTAINER */
.container{
  position:relative;
  width:850px;
  height:500px;
  background:white;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
  display:flex;
}

/* FORMS */
.form-container{
  position:absolute;
  width:50%;
  height:100%;
  padding:60px;
  transition:0.6s ease-in-out;
  left: 0;
}

.login{
  left:0;
  background:#e4779a;
  color:white;
}

.register{
  right:0;
  background:#e4779a;
  color:white;
}

/* INPUT STYLE */
input{
  width:70%;
  margin:12px 0;
  padding:12px 14px;

  border:none;
  border-bottom:2px solid rgba(255,255,255,0.4);

  background: rgba(255,255,255,0.08); 
  border-radius:8px 8px 0 0;

  outline:none;
  color:white;

  transition: all 0.35s ease;
}

/* FOCUS EFFECT */
input:focus{
  border-bottom:2px solid white;
  background: rgba(255,255,255,0.15);

  box-shadow: 
    0 0 8px rgba(255,255,255,0.3),
    0 4px 15px rgba(255,255,255,0.1);
}

/* PLACEHOLDER STYLE */
input::placeholder{
  color: rgba(255,255,255,0.6);
  transition:0.3s;
}

/* PLACEHOLDER MOVE EFFECT */
input:focus::placeholder{
  opacity:0.4;
  transform:translateX(5px);
}

input:focus{
  border-bottom:2px solid white;
  box-shadow: 
    0 2px 10px rgba(255,255,255,0.25);
}

.password-box{
  position:relative;
  width:70%;
}

.password-box input{
  width:100%;
  padding-right:10px; 
}

.eye{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;

  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.eye svg{
  position:absolute;
  width:18px;
  height:18px;

  stroke:#d94f7d;
  stroke-width:2;
  fill:none;
}

/* hide closed eye */
.eye-closed{
  opacity:0;
}

/* toggle */
.eye.active .eye-open{
  opacity:0;
}

.eye.active .eye-closed{
  opacity:1;
}

/* BUTTON */
.btn{
  width:70%;
  margin-top:25px;
  padding:12px;

  border:none;
  border-radius:30px;

  background: linear-gradient(135deg, #ff2e6f, #ff6f91);
  color:white;
  font-weight:600;
  letter-spacing:0.5px;

  cursor:pointer;
  transition: all 0.35s ease;

  position:relative;
  overflow:hidden;

  box-shadow:
    0 8px 25px rgba(255,0,100,0.4),
    inset 0 2px 5px rgba(255,255,255,0.3);
}

/* TEXT LINKS */
span{
  color:#cd0052;
  cursor:pointer;
  font-weight:bold;
}

/* PANEL */
.panel{
  position:absolute;
  width:50%;
  height:100%;
  left:50%;

  background:#f2d8de;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:40px;
  text-align:center;
  overflow:hidden;
}

.panel-content{
  position:absolute;
  width:80%; 
  
  top:40%;
  left:45%;
  transform:translate(-50%, -65%); 

  text-align:center;

  opacity:0;
  transition:0.6s ease;
}
.panel-content h2{
  margin-bottom:5px;
  letter-spacing:1px;
}

.panel-content p{
  line-height:1.6;
  font-size:14px;
}

/* default = LOGIN */
.panel .left{
  opacity:0;
}

.panel .right{
  opacity:1;
}

/* show login by default */
.login{
  display:block;
}

.register{
  display:none;
}

@keyframes floatWave {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-20px) translateY(10px); }
  100% { transform: translateX(0) translateY(0); }
}

.background-wave::before{
  animation: floatWave 8s ease-in-out infinite;
}

.background-wave::after{
  animation: floatWave 10s ease-in-out infinite;
}