@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.ttf');
}

* {
  font-family: 'Roboto', sans-serif;
}
html,
body {
  height: 100%;
}
body.ejs {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.landing {
  z-index: -1;
  background-image: url(/images/landing.webp);
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.landing-overlay {
  background: #ffffffc4;
  left: calc(50% - 190px);
  width: 380px;
  top: calc(50% - 200px);
  height: fit-content;
  position: absolute;
  z-index: -1;
  border-radius: 10px;
}
.logo {
  position: absolute;
  left: calc(50% - 190px);
  width: 80px;
  height: 80px;
}

.form {
  max-width: 330px;
}

.form .form-floating:focus-within {
  z-index: 2;
}

#footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
}

.btn.btn-primary {
  background-color: #001e60;
  border-color: #001e60;
}

.btn.btn-primary {
  float: right;
}


@media screen and (max-device-width: 640px) {
    .landing-overlay {
        top: calc(50% - 300px);
          height: 600px;
        }
        
        .logo {
          top: calc(50% - 300px);
    }
}