* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: linear-gradient(90deg, #e2e2e2, #c9d6ff)
}

.container {
   position: relative;
   width: 850px;
   height: 550px;
   background: #fff;
   border-radius: 30px;
   box-shadow: 0 0 30px rgba(0, 0, 0, .2);
   margin: 20px;
   overflow: hidden;
}

.form-box {
   position: absolute;
   right: 0;
   width: 50%;
   height: 100%;
   background: #fff;
   display: flex;
   align-items: center;
   color: #333;
   text-align: center;
   padding: 30px;
   z-index: 1;
   transition: .6s ease-in-out .6s, visibility .1s .8s;
}

.container.active .form-box {
   left: .5%;
}

.form-box.register {
   visibility: hidden;
}

.container.active .form-box.register {
   visibility: visible;
}

form {
   width: 100%;
}

.container h1 {
   font-size: 36px;
   margin: -10px 0;
}

.input-box {
   position: relative;
   margin: 30px 0;
}

.input-box input {
   width: 100%;
   padding: 13px 50px 13px 20px;
   background: #eee;
   border-radius: 8px;
   border: none;
   outline: none
   font-size 16px;
   color: #333;
   font-weight: 500;
}

.input-box input::placeholder {
   color: #888;
   font-weight: 400;
}

.input-box i {
   position: absolute;
   right: 20px;
   top: 37%;
   transform: translateY(-50%)
   font-size 20px;
   color: #888;
}

.btn {
   width: 100%;
   height: 70px;
   background: #7494ec;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 1);
   border: none;
   cursor: pointer;
   font-size: 16px;
   color: #fff;
   font-weight: 600;
}

.container p {
   font-size: 14.5px;
   margin: 15px 0;
}

.social-icons {
   display: flex;
   justify-content: center;
}

.social-icons a {
   display: inline-flex;
   padding: 10px;
   border: 1.6px solid #ccc;
   border-radius: 8px;
   font-size: 24px;
   color: #333;
   text-decoration: none;
   margin: 0 8px;
}

.toggle-box {
   position: absolute;
   width: 100%;
   height: 100%;
}

.toggle-box::before {
   content: '';
   position: absolute;
   left: -250%;
   width: 300%;
   height: 100%;
   background: #7494ec;
   border-radius: 80px;
   z-index: 2;
   transition: 1.2s ease-in-out;
}

.container.active .toggle-box::before {
   left: 50%;
}

.toggle-panel {
   position: absolute;
   width: 50%;
   height: 100%;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 2;
   transition: .6s ease-in-out;
}

.toggle-panel.toggle-left {
   left: 0;
   transition-delay: .6s;
}

.container.active .toggle-panel.toggle-left {
   left: -45%;
   transition-delay: .6s;
}

.toggle-panel.toggle-right {
   right: -50%;
}

.container.active .toggle-panel.toggle-right{
   right: 0;
   transition-delay: .8s;
}

.toggle-panel p {
   margin-bottom: 20px;
}

.toggle-panel .btn {
   width: 160px;
   height: 46px;
   background: transparent;
   border: 2px solid #fff;
   box-shadow: none;
}

@media screen and (max-width: 650px) {
   .container {
     height: calc(135vh - 45vh);
   }
   
   .form-box {
     bottom: 0;
     width: 100%;
     height: 70%;
     padding: 20px;
   }
   
   .container.active .form-box {
     right: 0;
     bottom: 150px;
     transition: .6s ease-in-out .6s;
   }
   
   .toggle-box::before {
     left: 0;
     top: -270%;
     width: 100%;
     height: 300%;
   }
   
   .container.active .toggle-box::before {
     left: 0;
     top: 75%;
     border-radius: 20vw;
   }
   
   .toggle-panel {
     width: 100%;
     height: 30%;
   }
   
   .toggle-panel h1 {
     font-size: 25px;
     margin-top: 10px;
   }
   
   .toggle-panel p{
     font-size: 10px;
     margin-bottom: 10px;
   }
   
   .toggle-panel.toggle-left {
     top: 0;
   }
   
   .container.active .toggle-panel.toggle-left {
     left: 0;
     top: -30%;
   }
   
   .toggle-panel.toggle-right {
     right: 0;
     bottom: -30%;
   }
   
   .container.active .toggle-panel.toggle-right {
     bottom: -2%;
   }
}