:root {
    --light-color: #ffffff;
    --light-gray-color: #dadada;
    --gray-color: #8b8b8b;
    --dark-gray-color: #555555;
    --dark-color: #333333;
    --primary-color: #28903B;
    --secondary-color: #0E1B2C;
    --terciary-color: #00091B;
    --last-emphasis-color: #E71A00;
    --important-color: #D93025;
    --light-shadows: #00000038;
    --transition: 350ms;
}

body {
    font-family: 'Montserrat' !important;
    width: 100%;
    height: 100svh;
    background-color: var(--light-gray-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
}

.login {
    width: 100%;
    max-width: 512px;
    margin: auto;
    background-color: var(--light-color);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--gray-color);
    .login__icon {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .login__img {
            width: 140px;
        }
    }
    .login__content {
        width: 100%;
        margin-top: 2rem;
        .login__form {
            width: 100%;
            div {
                width: 100%;
                margin: 1rem 0;
                display: block;
                .login__input {
                    width: 100%;
                    display: block;
                }
                .login__submit {
                    background-color: var(--primary-color);
                    color: var(--light-color);
                    width: auto;
                    padding: 5px 2rem;
                    border-radius: 99px 99px 20px 99px;
                    transition: var(--transition);
                    border: 2px solid var(--primary-color);
                    display: block;
                    &:hover {
                        background-color: transparent;
                        color: var(--primary-color);
                        box-shadow: 0 0 10px var(--primary-color);
                    }
                }
            }
        }
    }
}