@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.1rem;
  font-variation-settings:
    "wdth" 100;
}

body {
  margin: 0;
}

.background-image {
  margin-top: -2vh;
  margin-left: -2vw;
  position: fixed;
  z-index: 1;
  display: block;
  background-image: url("/style/image/PhotoByClayBanks.jpg");
  width: 100vw;
  height: 100vh;
  transform: scale(1.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.login-form {
  position: absolute;
  z-index: 2;
  background-color: rgba(250, 250, 250, 0.75);
  border-radius: 5px;
  border: 1px solid #ffffff;
  padding: 8px;
  width: fit-content;
  
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

caption div {
  font-size: 1.2rem;
}

.error {
  color: #E53935;
}

.login-form label {
  font-weight: 350;
}

.input-field {
  border: 1px solid #424242;
}

.input-field:focus {
  outline: 1px solid #000000;
}

.blank-row {
  height: 2vh;
}

.submit-button {
  width: 100%;
  border: 1px solid #f5f5f5;
  background-color: #fafafa;
  border-radius: 1px;
}

.submit-button:hover {
  background-color: #e0e0e0;
  border: 1px solid #bdbdbd;
}