@font-face {
    font-family: "NeoSans";
    src: url("../assets/assets/NeoSans/NeoSans-Medium.otf");
}

@font-face {
    font-family: "QuickSand";
    src: url("../assets/assets/QuickSand/QuickSand-Regular.ttf");
}

@font-face {
    font-family: "QuickSandLight";
    src: url("../assets/assets/QuickSand/QuickSand-Light.ttf");
}

html {
    font-family: QuickSand, Arial, Helvetica, sans-serif;
}

#app {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

#loading {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

#web-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

#branding {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;

    h1 {
        padding-left: 24px;
        color: #444444;
        font-family: NeoSans, Arial, Helvetica, sans-serif;
        font-size: 36px;
        padding-top: 6px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    img {
        width: 40px;
        height: 40px;
    }
}

#register,
#login,
#reset {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #EEEEEE;
    z-index: 1;

    h1,
    p {
        width: 350px;
        margin-top: 0;
        margin-bottom: 16px;
    }

    h1 {
        font-weight: 100;
    }

    .last {
        flex-grow: 0.3;
    }
}

#login-email,
#register-email {
    opacity: 0;
    z-index: 1;
}

#login-options,
#register-options {
    z-index: 1000;
}

.option-email {

    #login-email,
    #register-email {
        opacity: 1;
        z-index: 2000;
    }

    #login-options,
    #register-options {
        opacity: 0;
        z-index: 1;
    }
}

#reset-email,
#login-options,
#login-email,
#register-options,
#register-email {
    height: 100%;
    width: 100%;
    position: absolute;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.option-register {
    #register {
        opacity: 1;
        z-index: 1000;
    }
}

.option-login {
    #login {
        opacity: 1;
        z-index: 1000;
    }
}

.option-reset {
    #reset {
        opacity: 1;
        z-index: 1000;
    }
}

.option-loading {
    #loading {
        opacity: 1;
    }
}

#login-email-select,
#register-email-select {
    border: none;
    background: linear-gradient(to right, #0091C9, #38C6EF);
    font-family: QuicksandLight, Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: white;
    padding: 8px;
    border-radius: 28px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 12px;
    margin-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    width: 350px;
}

.apple-icon {
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.envelope-icon {
    margin-right: 12px;
    position: relative;
    top: 4px;
}

.google-icon {
    margin-right: 12px;
    position: relative;
    height: 36px;
    width: 36px;
    margin-top: -12px;
    position: relative;
    top: 10px;
}

.oauth-google {
    border: 1px solid #4C4C4C;
    background: white;
    font-family: "Roboto Medium", Arial, Helvetica, sans-serif;
    /* letter-spacing: 1px; */
    color: #0B0B0B;
    padding: 0px;
    border-radius: 28px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 12px;
    margin-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    width: 350px;
}

.oauth-apple {
    border: 1px solid #4C4C4C;
    background: white;
    font-family: QuicksandLight, Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #0B0B0B;
    padding: 8px;
    border-radius: 28px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 12px;
    margin-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    width: 350px;
}

.error {
    color: red;
    max-width: 350px;
    display: block;
    font-size: 16px;
}

span.dummy,
#register-select,
#reset-select,
#login-select {
    display: block;
    text-decoration: none;
    font-size: 20px;
    color: #007AD0;
    margin: 8px;
    height: 20px;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding-bottom: 12px;
    color: #444444;

    a {
        text-decoration: none;
        color: #444444;
        margin-left: 12px;
        margin-right: 12px;
    }
}