@font-face {
  font-family: "Matter-Regular";
  font-style: normal;
  font-display: block;
  src: local("Matter-Regular"),
    url("../fonts/Matter-Regular.woff2") format("woff2"),
    url("../fonts/Matter-Regular.woff") format("woff"),
    url("../fonts/Matter-Regular.ttf") format("truetype");
}

main {
  background: #005b77 !important;
}

.box {
  font-family: "Matter-Regular" !important;
  position: relative !important;
  height: auto !important;
  padding: 3rem 2rem 2rem 2rem !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  border-radius: 5px !important;
  color: #000 !important;
}

.box:after {
  content: "";
  width: 250px;
  height: 58px;
  position: absolute;
  top: -80px;
  left: calc(50% - 140px);
  background-image: url("../logo.svg");
  background-size: cover;
}

input[type="password"] {
  margin-top: 5px !important;
  padding: 0 !important;
  font-size: 26px !important;
  border: none !important;
  border-radius: 0px !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
  color: #000 !important;
}

input[type="password"]:hover {
  border-bottom: 1px solid #051e51 !important;
}

input[type="submit"] {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12) !important;
  background-color: #005b77 !important;
  border-radius: 32px !important;
  font-weight: bold !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  main {
    padding-top: 8rem !important;
  }
}