html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url("/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

header {
  background-color: #000;
  padding: 1rem 0;
}

main {
  flex: 1;
}

footer {
  background-color: #000;
  padding: 2rem 1rem;
  margin-top: auto;
  text-align: center;
  color: #999;
  border-top: 1px solid #444;
}

.custom-card {
  max-width: 50rem;
  margin: 0 auto;
  border-radius: 10px !important;
}

/* Improve readability for text directly on top of the background image */
main .row > [class*="col-"] > h1,
main .row > [class*="col-"] > h2,
main .row > [class*="col-"] > h3,
main .row > [class*="col-"] > p {
  color: #eef5ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}