body {background: linear-gradient(#304096, #00bcd4); width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; padding: 0vh 0; } .modal-header {background-color: #fff !important; } .img-login {width: 15% !important; padding-bottom: 20px; } .main{width: calc(100vw / 2 + 25px); height: 100%; max-width: 410px; min-width: 290px; min-heigth: calc(100vh - 20vh); background: #ddd; padding: 24px 24px; border-radius: 5px; padding-bottom: 32px; position: relative; gap: 32px; display: flex; flex-direction: column; align-items: center; } .main .login{display: flex; flex-direction: column; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; width: 100%; } .main .login h2{font-family: 'Poppins', sans-serif; letter-spacing: 0.8px; font-size: 24px; color: #111; margin-bottom: 0px; font-weight: 300; } .main .group{display: flex; flex-wrap: wrap; flex-direction: column; width: 100%; } .main input{width: 100%; height: 46px; background: #fff; border-radius: 4px; border: unset; padding-left: 15px; color: #505050; } .main input:focus{outline: 2px solid #304096 } .main input::placeholder{color: #aaa; } .main a{text-decoration: none; font-weight: bold; font-size: 14px; color: #304096; margin-top: 0px; transition: 250ms linear; } .main a:hover{color: #304096cd; text-decoration: underline; } .main .btn{width: 100%; height: 48px; border-radius: 6px; border: 2px solid transparent; background: #304096; color: #dedede; text-transform: uppercase; font-family: 'Poppins', sans-serif; font-weight: bold; cursor: pointer; margin-top: 0px; transition: 250ms linear; font-size: 16px; } .main .btn:hover{background: #304096dd; } .main .row{display: flex; width: 100%; height: 6px; position: relative; margin: 8px 0; } .main .row::before, .main .row::after{content: ""; position: absolute; height: 0.5px; width: calc(50% - 3px); top: 50%; transform: translateY(-50%); left: 0; background: linear-gradient(to right, #090526dd, rgba(0,0,50,0.3)); border-radius: 50%; opacity: 0.2; } .main .row::after{left: unset; right: 0; background: linear-gradient(to left, #090526dd, rgba(0,0,50,0.3)) } .main .login .groupRow{display: flex; gap: 4px; justify-content: center; align-items: center; min-height: 46px; width: 100%; color: #444; font-size: 14px; } .main .groupRow .btn-github{background: #333; color: #f5f5f5; stroke: f5f5f5; width: 180px; height: 44px; border: unset; border-radius: 4px; font-weight: bold; font-size: 15px; cursor: pointer; display: flex; gap: 4px; justify-content: center; align-items: center; margin-left: 12px; } .icon{width: 64px; height: 64px; background: #fff; border-radius: 12px; position: relative; z-index: 300; } .icon::before{content: ""; width: 45px; height: 45px; background: linear-gradient(to bottom right, #6503A6, #304096, #260273, #120540, #090526); display: block; border-radius:50%; box-shadow: -2px -2px 6px rgba(0,0,0,0.23), 2px 2px 4px #3040969f; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon::after{content: ""; width: 100%; height: 50%; background: #30409644; display: block; z-index: 500; position: absolute; bottom: 0; left: 0; backdrop-filter: blur(5px); border-radius: 0px 0px 12px 12px; } @media only screen and (max-width: 600px) {.img-login { width: 90% !important; } }