@import url('https://fonts.googleapis.com/css?family=Nunito:100,300,400,500,700');

*{
    box-sizing: border-box;
    padding:0;
    margin: 0;
    font-family: 'Nunito', sans-serif;
}


body {
    font-size: 1em;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    background-color: whitesmoke;
    min-height: 100vh;
}











/* buffering style */
body > .buffering {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
}

body > .buffering > .loader-img {
    position: absolute;
    top: 40vh;
    left: calc(50vw - 10vh);
    z-index: 100;
    height: 20vh
}





















/* login section */
.reset-password-main
.register-main,
.login-main {
    display: flex;
    flex-direction: column;
    flex:1;
    align-items:center;
    justify-content:center;
}

.reset-password-input,
.register-input,
.login-input {
    text-decoration: none;
    outline: none;
    border: none;
    box-sizing: border-box;

    font-size: 1em;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0.25em 0;
    cursor: pointer;
    
    width: 19rem;
}

.reset-password-div,
.register-div,
.login-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reset-password-button,
.register-button,
.login-button {
    margin: 0.25em 0;
}

.reset-password-p,
.register-p,
.login-p {
    font-size:1em;
}

.reset-password-error,
.register-error,
.login-error{
    font-size:0.75em;
    color: orangered;
}

.reset-password-p a,
.register-p a,
.login-p a {
    color:black;
}

.reset-password-main,
.register-main,
.login-main{
   margin: auto auto;
}

.reset-password-button,
.register-button,
.login-button {
    font-size: 1em;
    display: inline-block;
    padding: 0.5em 1em;
    color: white;
    background-color: black;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    border: none;
    box-shadow: 1px 2px 10px grey;
    width: 14rem;
    margin: 0.25em 0;
}

.reset-password-status {
    color: #3e8e41;
}

.reset-password-button:hover, .register-button:hover, .login-button:hover {
    background-color: #3e8e41;
}


.form-switch {
    all: unset;
    flex-direction: row;
    color: black;
    text-decoration: underline;
    cursor: pointer;
}