* {
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  min-width: unset;
}
#product-background {
  width: 100%;
}
.product-title.matrix-logo {
  font-size: 2.5rem;
}
@media screen and (min-width: 25em) {
  .product-title.matrix-logo {
    font-size: 3.5rem;
  }
}
@media screen and (min-width: 35.5em) {
  .product-title.matrix-logo {
    font-size: 6.2rem;
  }
}
@media screen and (min-width: 48em) {
  .product-title.matrix-logo {
    font-size: 8.25rem;
  }
}
.content {
  width: 100%;
  max-width: 78em;
  padding: 0.5rem 1rem;
}
.flex-vertical .flex-bottom.notice-message {
  width: 100%;
  max-width: 78em;
}
.notice-message {
  word-break: keep-all;
}
#login-form {
  width: 100%;
  max-width: 29em;
  padding-top: 3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
#footer {
  flex: 0 0 auto;
}
.logo-and-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding-bottom: 1rem;
}
#footer .matrix-logo {
  margin: 0;
}
#footer .footer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (min-width: 35.5em) {
  .logo-and-tagline {
    justify-content: flex-start;
  }
  #footer .footer-text {
    padding: 0;
    justify-content: right;
    text-align: right;
  }
}