body{
    background-image: url(loginbg.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.top{
    display: flex;
    padding:0 5%;
    box-sizing: border-box;
    background: black;
    height: 80px;
    line-height: 80px;
}

.t_l{
    flex:1;
}
.t_l a{
    color: #fff;
    font-size: 1.4em;
}

.login-page {
    widteh: 400px;
    padding: 20% 0 0;
    margin auto;
}

.form {
    position: relative;
    z-index: 1;
    max-width: 400px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
}

/* set registration performance */
.form input {
    font-family: "Roboto", sans-serif;
    outline: 1;
    background: #e3e8e3;
    width: 100%;
    margin: 0 0 15px;
    padding 15px;
    border: 0;
    box-sizing: border-box;
    font-size: 15px;
}

/* set create button performance */
.form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #ccccff;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}

/* set color when mouse on the button */
.form button:hover, .form button:active{
    background: #00ff00;
}


.form message{
    margin: 15px 0 0;
    color: aliceblue;
    font-size: 12px;
}

/* hide regitration-form */
.form .register-form {
    display: none;
}