@font-face {
    font-family: "TeleNeo";
    src: url("/resources/TeleNeoVariable-Upright.woff2");
}

body {
margin: 0;
font-family: TeleNeo,Helvetica Neue,Helvetica,Arial,sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
background-image: url('/img/login_background.jpg');
}




canvas {
position: absolute;
z-index: -1;
background-image: url(/img/login_background.jpg);
background-size: cover;
filter: blur(3px);
}


#loginDiv {
margin: auto;
}
.labelfor {
display: block;
margin-bottom: 5px;
color: white;
font-size: 18px;
}
.form_field {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 6px 11px 7px;
font-size: 18px;
line-height: 1.2;
color: white;
background-color: transparent;
border: 1px solid #999999;
border-radius: 4px;
outline: 0;
-webkit-appearance: none;
-webkit-transition: border .15s cubic-bezier(.445,.05,.55,.95);
transition: border .15s cubic-bezier(.445,.05,.55,.95);
}



.form_field:hover {
border-color: #e20074;
-webkit-transition-duration: .1s;
transition-duration: .1s;
}

.form_button {
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
border-color: #b2005c;
background-color: #e20074;
font-size: 18px;
line-height: 1.2;
padding: 6px 23px 7px;
color: #fff;
white-space: nowrap;
background-image: none;
text-decoration: none;
-webkit-transition: border .15s cubic-bezier(.445,.05,.55,.95);
transition: border .15s cubic-bezier(.445,.05,.55,.95);
}
.form_button:hover {
background-color: #d0006a;
border-color: #a00052;
}

.error_field {
display: none;
max-width: 288px;
color: red;
margin-bottom: 20px;
margin-top: -10px;
font-weight: bold;
}