/* ------------- Page ------------- */

body {
    background-color: #e6e6e6;
}

/* ------------- Login Form ------------- */

.log-form {
    background-color: #f9f9f9;
    width: 340px;
    height: 600px;
    margin: 100px auto;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    box-shadow: 0 0px 5px #252525;
    display: grid;
    grid-template-rows: repeat(20, 30px);
    grid-template-columns: repeat(10, 34px);
}

/*--------------- log-img ---------------*/

.log-img .img {
    background-image: url(/images/Login\ img1.jpg);
    background-position: center;
    background-size: cover;
    width: 340px;
    height: 215px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    display: flex;
    text-align: center;
}

.log-img {
    position: relative;
}

.log-img .img p {
    color: var(--white-color);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 600;
    align-self: center;
    flex-grow: 1;
}

.log-img p span {
    color: #800095;
    -webkit-text-stroke: 0.3px white;
}

/*--------------- log-form ---------------*/

.login-btn i img {
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.todoist-form {
    grid-area: 16 / 2 / 13 / 10;
}

.todoist-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--white-background-color);
    color: var(--sec-main-color);
    width: 270px;
    height: 45px;
    border: 2px solid var(--sec-main-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.todoist-btn p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}

.google-form {
    grid-area: 13 / 2 / 16 / 10;
}

.google-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--white-background-color);
    color: var(--sec-main-color);
    width: 270px;
    height: 45px;
    border: 2px solid var(--sec-main-color);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.google-btn p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
}

/*--------------- log-form icons ---------------*/

.todoist-btn i img,
.google-btn i img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.todoist-btn:hover i img,
.google-btn:hover i img {
    box-shadow: 0 0 5px #4d101e;
    background-color: white;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.todoist-btn:hover,
.google-btn:hover {
    background-color: var(--sec-main-color);
    border: 0px solid var(--sec-main-color);
    color: white;
    cursor: pointer;
    transition: 0.2s ease;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
}

/*--------------- log-form error ---------------*/

.log-form .error-text {
    text-align: center;
    padding: 0 5px;
    grid-area: 10 / 2 / 12 / 10;
}

.log-form .error-text p {
    font-size: 14px;
    color: var(--error-color);
    font-weight: 400;
}

/*--------------- log-form text ---------------*/

.log-form .btm-text {
    text-align: center;
    padding: 0;
    grid-area: 18 / 2 / 19 / 10;
}

.log-form .btm-text p {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
}

.log-form .btm-text p .privacy-link {
    font-size: 15px;
    text-decoration: none;
    color: var(--sec-main-color);
    font-weight: 600;
}

.log-form .btm-text p .privacy-link:hover {
    color: var(--main-color-alt);
}