@import url('https://fonts.googleapis.com/css?family=Poppins');

/* -------------- ROOT VARIABLES -------------- */
:root {
    --color-primary: #244F8F;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-info-dark: #7d8da1;
    --color-info-ligth: #dce1eb;
    --color-dark: #363949;
    --color-ligth: rgba(132, 139, 200, 0.18);
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;
    --color-background: #fbf6f0;

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 2rem 3rem var(--color-ligth);

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--color-background);
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    transition: var(--tran-05);
}

/* ==================== LOGIN ==================== */

.container-login {
    perspective: 1000px;
}

.login-all {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    animation: login_box 1s 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
}

.animation img {
    width: auto;
    max-width: 470px;
    height: 100%;
    border-radius: 15px 0 0 15px;
    background: var(--color-primary);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-login {
    border-radius: 0 15px 15px 0;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.logo-login {
    width: 60%;
    height: auto;
    animation: login_attribute 3s 1;
}

.title-login {
    text-align: center;
    font-weight: bolder;
    text-transform: uppercase;
    animation: login_attribute 3s 1;
}

.txt-login {
    color: var(--color-dark);
    /* background-color: var(--color-success); */
}

.txt-login,
.btn-login {
    border-radius: 15px;
}

#frm_username {
    animation: login_input 1s ease;
}

#frm_password {
    animation: login_input 1.5s 1;
}

.btn-login {
    animation: login_input 2s 1;
}

.icheck-primary {
    animation: login_attribute 2.5s 1;
}

@media (max-width: 768px) {
    .animation img {
        width: 0;
        height: 0;
    }

    .card-login {
        border-radius: 15px;
    }
}

@keyframes login_attribute {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes login_box {
    from {
        transform: scale(5);
    }

    to {
        transform: scale(1);
    }
}

@keyframes login_input {
    from {
        transform: translateX(1000px);
    }

    to {
        transform: translateX(0px);
    }
}