@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);

body {
  font-family: "Lato", sans-serif;
  font-size: 1.5em;
  background: white;
  color: rgb(11, 8, 24);
  margin: 0em;
  padding: 0em;
  background-image: url(https://metadev.pro/img/metadev-A.svg);
  background-repeat: no-repeat;
  background-size: 68em;
  background-position: -34em -2em;
  min-width: 320px;
}
@media only screen and (max-width: 880px) {
  body {
    background-size: 46em;
    background-position: -23em 6em;
  }
}
@media only screen and (max-width: 600px) {
  body {
    background-size: 36em;
    background-position: -18em 4em;
  }
}
@media only screen and (max-width: 500px) {
  body {
    background-size: 21em;
    background-position: -9em 4em;
  }
}
@media only screen and (max-width: 420px) {
  body {
    background-size: 18em;
    background-position: -9em 4em;
  }
}
.login-screen {
  margin: 4em 0em;
  display: grid;
  grid-template-columns: 20% 30% 30% 20%;
}
.logo {
  grid-column: 2;
  vertical-align: middle;
  margin-top: 3.2em;
  margin-right: 1em;
}
.login-data {
  grid-column: 3;
}
button,
a {
  cursor: pointer;
}
input,
label {
  display: block;
}
label {
  margin-bottom: 0.3em;
  font-weight: bold;
}
form {
  margin-bottom: 2em;
}
ul {
  list-style: none;
  margin-bottom: 2em;
}
ul li:before {
  content: "∎";
  margin-right: 1em;
}
input {
  caret-color: #003366;
  font-size: 1.2em;
  margin-bottom: 0.7em;
  width: 95%;
  padding: 0.1em 0.5em;
  border: 2px solid #ccc;
}
input:focus {
  border: 2px solid #003366;
}
button {
  font-family: "Lato", sans-serif;
  display: inline-block;
  color: white;
  background-color: #003366;
  font-size: 1em;
  padding: 0.4em 1.5em;
  margin-bottom: 1em;
  border: 0px solid transparent;
  border-radius: 0px;
}
button:hover,
button:focus {
  background-color: #3075ca;
  border-radius: 0px;
  border: 0px solid transparent;
}
.login-help {
  font-size: 0.8rem;
}
.login-help a {
  margin-right: 1rem;
}
.cancel {
  display: inline-block;
  color: white;
  background-color: #e96913;
  font-size: 1em;
  padding: 0.4em 1.5em;
  margin-bottom: 1em;
  text-decoration: none;
  border: 0px solid transparent;
  border-radius: 0px;
}
a.cancel:hover,
a.cancel:focus {
  background-color: #e9792f;
  border-radius: 0px;
  border: 0px solid transparent;
}