.login-00{
    --primary:hsl(300, 100%, 70%);
    --primary-light:hsl(300, 100%, 80%);
    --primary-lighter:hsl(300, 100%, 90%);
    --secondary:hsl(240, 100%, 70%);
    --secondary-light:hsl(240, 100%, 80%);
    --secondary-lighter:hsl(240, 100%, 90%);

    display:flex;
    flex-direction:column;
    gap:30px;
    width:400px;
    background-color:var(--primary);
    border-radius:10px;
    padding:25px;
    box-sizing:border-box;
    border:1px solid var(--primary-lighter);
    box-shadow:2px 2px 10px;

    > span:first-child{
        font-size:2rem;
        color:white;
        text-align:center;
    }

    > span:nth-child(2){
        color:white;
        font-size:1.1rem;
        text-align:center;
    }

    .email{
        display:flex;
        flex-direction:column;
        gap:10px;

        input{
            padding:10px;
            border-radius:5px;
            background-color:var(--primary-light);
            font-family:inherit;
            font-size:inherit;
            color:white;
            border-width:0;

            &::placeholder{
                color:white;
            }

            &:focus{
                outline:1px solid var(--primary-lighter);
            }
        }

        span{
            font-size:0.8rem;
            color:red;
            display:none;
        }
    }

    .password{
        display:flex;
        flex-direction:column;
        gap:10px;

        div{
            display:flex;
            padding:10px;
            border-radius:5px;
            background-color:var(--primary-light);
            align-items:center;

            &:focus-within{
                outline:1px solid var(--primary-lighter);
            }

            input{
                flex-grow:1;
                background-color:transparent;
                border-width:0;
                font-family:inherit;
                font-size:inherit;
                color:white;

                &::placeholder{
                    color:white;
                }

                &:focus{
                    outline-width:0;
                }
            }

            span{
                cursor:pointer;
                border-width:0;
                background-color:transparent;
                color:var(--primary);
            }
        }

        > span{
            color:red;
            font-size:0.8rem;
            display:none;
        }
    }

    .remember{
        display:flex;
        justify-content:space-between;

        input{
            display:none;

            &:checked + label span:first-child i{
                display:initial;
            }
        }

        a{
            text-decoration:none;
            color:white;

            &:focus{
                outline:1px solid var(--primary-lighter);
            }
        }

        label{
            display:flex;
            gap:10px;
            align-items:center;
            cursor:pointer;
            
            span:first-child{
                width:20px;
                height:20px;
                border-radius:2px;
                background-color:var(--primary-light);
                color:var(--primary);
                text-align:center;

                i{
                    display:none;
                }
            }

            span:last-child{
                color:white;
            }
        }
    }

    > input{
        border-width:0;
        padding:10px;
        color:white;
        background-color:var(--secondary-light);
        border-radius:5px;
        cursor:pointer;
        font-size:1.1rem;
        font-family:inherit;

        &:focus{
            outline:1px solid var(--secondary-lighter);
        }

        &:hover{
            background-color:var(--secondary);
        }
    }

    .social-login{
        display:flex;
        gap:20px;
        justify-content:space-around ;

        a{
            background-color:var(--secondary-light);
            color:white;
            border-radius:5px;
            padding:15px;
            text-decoration:none;

            &:focus{
                outline:1px solid var(--secondary-lighter);
            }

            &:hover{
                background-color:var(--secondary);
            }
        }

    }

    .alternative-login{
        display:flex;
        gap:10px;
        align-items:center;

        span:first-child, span:last-child{
            border-bottom:1px solid var(--primary-light);
            flex-grow:1;
        }

        span:nth-child(2){
            color:white;
        }

    }

    > span:last-child{
        color:white;
        text-align:center;

        a{
            color:var(--secondary);
            text-decoration:none;

            &:focus{
                outline:1px solid var(--primary-lighter);
            }
        }
    }

}