@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

 body {

    /*
     background: linear-gradient(135deg, #00c3ff, #eeef1c);
     background: linear-gradient(135deg, #fc00ff, #00dbde);
     background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
     background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
     */
     background-color: #3498DB;
 }


/*
* Login page
*/
 .wrapper-login {
     max-width: 470px;
     margin: 130px auto;
 }

 .wrapper-login .card {
     max-width: 450px;
     min-height: 320px;
     margin: 0px;
     /*background: rgba(255, 255, 255, 0.1);*/
     overflow: hidden;
     backdrop-filter: blur(10px);
     border: 1px solid #FFBF00;
     border-radius: 15px;
     cursor: pointer;
     padding: 0.8rem
 }

 .wrapper-login .card .btn.btn-primary {
     border-radius: 10px;
     width: auto;
     background-color: #CCCCFF;
     color: #000;
     /*border: none*/
 }

 .wrapper-login .card .btn.btn-primary:hover {
     color: #fff;
     background: #2980B9;
 }

 .wrapper-login .card .btn.btn-primary:focus {
     border: none;
     box-shadow: none
 }

 .wrapper-login .card .text-light-white {
     color: #ddd
 }

 .wrapper-login .card .line span.connect {
     position: absolute;
     top: -12px;
     left: 33%;
     color: #000;
     padding: 0 0.3rem;
     z-index: 100;
     border-radius: 2px;
     background-color: #fff
 }

 .wrapper-login .card .connections a img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover
 }

 /*
* Register page: Start
*/
 .wrapper-register {
     max-width: 500px;
     margin: 30px auto;
 }

 .wrapper-register .card {
     max-width: 450px;
     /*background: rgba(255, 255, 255, 0.1);*/
     overflow: hidden;
     backdrop-filter: blur(10px);
     border: 1px solid #FFBF00;
     border-radius: 15px;
     cursor: pointer;
     padding: 0.8rem
 }

 .wrapper-register .card .btn.btn-primary {
     border-radius: 10px;
     width: 120px;
     background-color: #CCCCFF;
     color: #000;
     /*border: none*/
 }

 .wrapper-register .card .btn.btn-primary:hover {
     color: #fff;
     background: #2980B9;
 }

 .wrapper-register .card .btn.btn-primary:focus {
     border: none;
     box-shadow: none
 }

 .wrapper-register .card .text-light-white {
     color: #ddd
 }

 .wrapper-register .card .line span.connect {
     position: absolute;
     top: -12px;
     left: 33%;
     color: #000;
     padding: 0 0.3rem;
     z-index: 100;
     border-radius: 2px;
     background-color: #fff
 }

 .wrapper-register .card .connections a img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover
 }

 /*
 * Register Page : End
 */

 @media(max-width: 370px) {
     .wrapper-login .card .line:after {
         left: 27%
     }
 }

 @media(max-width: 350px) {
     .wrapper-login {
         margin: 10px auto
     }

     .wrapper-login .card {
         margin: 10px
     }
 }

 /*
 * Check validate
 */