@font-face{
    font-family: AritaHeiti;
    src: url("../../fonts/AritaHeiti-Medium.woff2");
    font-weight: 400;
}

section.login {

    & * {
        font-family: 'Roboto','AritaHeiti';
    }

    background: white;
    width: 400px;
    height: 600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;


    $width: 368px;
    $height: 60px;

    div.login-title {
        font-size: 24px;
        padding: 20px;
    }

    div.login-name,div.login-passwd {

        width: $width;
        height: $height;
        box-sizing: border-box;
        border-radius: $height / 2;
        background: #f2f3f7;
        margin: 15px auto;
        display: flex;

        &>input {
            height: 100%;
            width: 100%;
            flex-grow: 1;
            min-width: 100px;
            text-align: center;
            margin: 0;
            border-width: 0;
            outline: none;
            background: transparent;
            font-size: 22px;
            font-weight: 300;
            color: #0d1224;
        }
    }

    div.login-name {
        align-items: center;

        $ic-height: $height * 7.5 / 10;
        $ic-gap: ($height - $ic-height)/2;

        &>img,&>button {
            height: $ic-height;
            border-radius: 50%;
        }

        &>img {
            margin-left: $ic-gap;
        }

        &>button {
            width: $ic-height;
            outline: none;
            cursor: pointer;
            background-image: url('./down_arrow_light.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 100%;
            margin-right: $ic-gap;
            border-width: 0;
            background-color: transparent;
        }
    }

    div.login-submit {
        width: $height;
        height: $height;
        border-radius: $height / 2;
        background: #31aafd;
        outline: none;
        box-shadow: 1px 1px 4px 0px rgba(136, 124, 234, 0.5), 
                    -1px -1px 4px 0px rgba(106, 99, 164, 0.5);

        &:hover {
            box-shadow: 1px 1px 6px 0px rgba(106, 99, 164, 0.8), 
                        -1px -1px 6px 0 rgba(106, 99, 164, 0.8);
            background: #2daafd;
        }

        &>button[type=submit] {
            width: 100%;
            height: 100%;
            cursor: pointer;
            outline: none;
            border-width: 0;
            background-color: transparent;
            background-image: url('./right_arrow.svg');
            background-position: center;
            background-size: 60% 60%;
            background-repeat: no-repeat;
        }
    }

    div.login-other {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        & * {
            font-size: 16pt;
            text-shadow: 1px 1px 10px rgba(0,0,0,0.1);
        }
    


        div.login-help {
            position: relative;
            display: flex;
            align-items: center;

            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                background-color: #d2d4d9;
                width: 3px;
                height: 80%;
            }

            &>span {
                padding: 2px;
                flex-grow: 1;
                cursor: pointer;
                text-align: center;
                color: #070c1d;
                font-weight: 400;
            }

        }

        .login-read {
            color: #888c9a;
            text-align: center;
            padding-top: 20px;
            padding-bottom: 10px;

            .read-more {
                color: #070c1d;
                font-weight: 400;
            }
        }
        
    }
}