@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
        :root{
        /* primary  */
        --macaw: #1cb0f6;
        --humpback: #2b70c9;
        --beetle: #ce82ff;
        --bee: #ffc800;
        --fox: #ff9600;
        --cardinal: #ff4b4b;
        --light-hover: rgba(74, 135, 206, 0.20);
    
        /* neutrals  */
        --eel: #4b4b4b;
        --wolf: #777;
        --hare: #afafaf;
        --swan: #e5e5e5;
        --polar: #f7f7f7;
        --snow: #fff;
    
        /* font family  */
        --font-open-sans: 'Open Sans', sans-serif;
        --shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.25);
    
        /* font size  */
        --fs-10: 10px;
        --fs-12: 12px;
        --fs-14: 14px;
        --fs-16: 16px;
        --fs-18: 18px;
        --fs-24: 24px;
        --fs-26: 26px;
        --fs-28: 28px;
        --fs-32: 32px;
        --fs-40: 40px;
    
        /* font weight  */
        --fw-bold: 700;
        --fw-semibold: 600;
        --fw-medium: 500;
        --fw-regular: 400;
        --fw-light: 300;
    }
    
    /* for universal  */
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: var(--font-open-sans);
    }
            .container{
                width: 100%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: var(--snow);
            }
    
            .content{
                margin: auto;
                /* margin-top: 100px; */
                width: 350px;
                border: 1px solid var(--hare);
                border-radius: 5px;
                box-shadow: var(--shadow);
                position: relative;
                height: auto;
                padding: 1rem;
            }

            .fa-xmark-circle{
                position: absolute;
                font-size: var(--fs-24);
                cursor: pointer;
                right: 9px;
                top: 9px;
                color: var(--wolf);
            }
            .fa-xmark-circle:hover{
                color: var(--cardinal);
            }
    
            .header{
                text-align: center;
                /* padding-top: 20px; */
                /* margin-bottom: 2rem; */
            }
    
            .log-in{
                font-size: var(--fs-24);
                color: var(--humpback);
                margin-top: 9px;
                margin-bottom: 7px;
                font-weight: var(--fw-bold);
            }
    
            .text{
                font-size: var(--fs-14);
                margin-top: 4px;
                margin-bottom: 25px;
                color: var(--hare);
            }
    
            .input-group {
                position: relative;
            }

            .input {
                display: block;
                margin: auto;
                margin-bottom: 16px;
                padding-left: 20px;
                width: 90%;
                height: 50px;
                border: 2px solid var(--hare);
                border-radius: 5px;
                background: none;
                font-size: var(--fs-16);
                transition: border 150ms cubic-bezier(0.4,0,0.2,1);
                /* margin-bottom: 1.5rem; */
            }

            .user-label {
                position: absolute;
                left: 40px;
                bottom: 34px;
                color: var(--wolf);
                pointer-events: none;
                transform: translateY(1rem);
                font-size: var(--fs-14);
                font-weight: var(--fw-semibold);
                transition: 150ms cubic-bezier(0.4,0,0.2,1);
            }

            .input:focus, input:valid {
                outline: none;
                border: 2px solid var(--humpback);
            }

            .input:focus ~ label, input:valid ~ label {
                transform: translateY(-6%) scale(0.8);
                background-color: #fff;
                padding: 0.2em;
                color: var(--humpback);
            }
    
            .continue{
                margin-top: 10px;
                display: flex;
                justify-content: center;
            }
    
            .continue button{
                background-color: var(--humpback);
                color: var(--polar);
                font-size: var(--fs-14);
                border: 1px solid var(--hare);
                border-radius: 5px;
                padding: 10px 20px;
            }
    
            .continue button:hover{
                background-color: var(--macaw);
            }
    
            .button-group{
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            
            .or{
                text-align: center;
                padding: .7rem 0;
            }
    
            .social-link{
                cursor: pointer;
                background-color: #fff;
                font-weight: var(--fw-medium);
                width: 100px;
                height: 35px;
                /* margin-bottom: 18px; */
                border: 1px solid var(--hare);
                border-radius: 6px;
            }
    
            .social-link:hover{
                background-color: var(--polar);
            }
    
            .twitter{
                margin: 0px 15px;
            }
    
            .button-group i{
                font-size: 18px;
                margin-right: 6px;
            }
    
            .line{
                margin: auto;
                /* margin-bottom: 22px; */
                width: 60%;
                height: 1px;
                margin-top: 1rem;
                background-color: var(--swan);
            }
    
            .footer{
                font-size: var(--fs-14);
                font-weight: var(--fw-medium);
                text-align: center;
                /* margin-bottom: 50px; */
            }

    
            .login a{
                text-decoration: none;
            }

            /* forget password style  */
            .forget-password{
                padding: 0 1rem;
                font-size: var(--fs-14);
                font-weight: var(--fw-semibold);
                color: var(--humpback);
                text-decoration: none;
            }

            /* password  eye*/
            .fa-eye, .fa-eye-slash{
                position: absolute;
                right: 10%;
                top: 35%;
                color: var(--hare);
                cursor: pointer;
            }
            
            .fa-eye:hover, .fa-eye-slash:hover{
                color: var(--eel);
            }

            .fa-eye-slash.active{
                display: none;
            }

            .fa-eye.active{
                display: none;
            }