*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    font-family: sans-serif;
}

body{

    width: 100vw;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8FBFFF;

}

.front{
    display: flex;
    flex-direction: column;
    row-gap: 30px;

    .button{

        background-color: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        font-size: 25px;
        box-shadow: 1px 1px 3px black;

        &:hover{

            background-color: black;
            color: white;
            


        }
    }

}
.contConnect {

    background-color: white;
    width: 600px;
    height: fit-content;
    border-radius: 20px;
    padding: 20px;

    .error{

        border: 2px solid red;
        color: red;
        padding: 10px;
        border-radius: 8px;
        width: fit-content;
        font-weight: bold;
        font-size: 16px;


    }

    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: fit-content;
        

        .text{
            height: fit-content;
            width: fit-content;
        }

        .logoCPNE{
            width: 250px;
            height: 80px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url('/imgs/logo/CPNE_logo.jpg');
        }

    }
    .form{

        display: flex;
        flex-direction: column;
        row-gap: 20px;

        .username, .pw{
            display: inherit;
            flex-direction: column;
            row-gap: 5px;
            font-size: 18px;

            input{
                font-size: 18px;
                padding: 12px;
                border-radius: 8px;
                
            }
        }
        .action{

            background-color: black;
            width: 100%;
            color: white;
            height: fit-content;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            &:hover{

                background-color: lightgray;
                color: black;
                box-shadow: 1px 1px 3px #8FBFFF;

            }
        }

        .invalid{
            border: none;
            outline: 2.5px solid red;
            border-radius: 10px;
        }
    }


    
}