body {
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: system-ui, sans-serif;
  font-weight: normal;
  background-color: var(--custom-text-background-color, #fff);

  @media only screen and (width >= 600px) {
    background-color: var(--custom-background-color, #fff);
    background-image: var(--bg-image);
  }
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

main {
  display: flex;
  flex: 1;
  justify-content: center;

  @media only screen and (width >= 600px) {
    flex: none;
    padding: 3rem 3rem 1.5rem;
  }
}

.flex-container > footer {
  padding: 0 1rem 1rem;
  text-align: center;
}

.hidden {
  display: none;
}