/* #region Home */
.home {
  display: flex;
  flex-direction: column;
  /* sticky footer */
  flex: 1;
}

/* Banner */
.banner {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  /* !importants are here to fix issue in minify-html
      This uses css-minify at optimisation level of 3 which replaces the
      inline style on the banner for the "background-image" with just "background"
      There is no way to set the optimisation level lower in minify-html so we need
      to mark these next two rules as important to make sure they are not overwritten
      https://github.com/wilsonzlin/minify-html/issues/89
      "
  */
  background-size: cover !important;
  background-position: center center !important;
  filter: grayscale(var(--grayperc));
}

.banner__text {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  text-align: center;
  font-family: 'Jost';
  font-weight: bolder;
  color: white;
  padding: 1em 1.5em;
  /* background-color: rgba(31, 29, 37, 0.6); */
}

.banner__text__title {
  font-size: min(6vw, 4em);
  letter-spacing: 0.4em;
  text-shadow: 1px 1px 5px black, -1px 1px 5px black, 1px -1px 5px black, -1px -1px 5px black;
}

.banner__text__subtitle {
  font-size: min(3vw, 1.5em);
  text-shadow: 1px 1px 5px black, -1px 1px 5px black, 1px -1px 5px black, -1px -1px 5px black;
}

@media (prefers-reduced-motion: no-preference) {
  .banner__text__subtitle {
    animation: 2s slide-in-bottom 2s forwards;
    transform: translateY(10px);
    opacity: 0;
  }
}
/* #endregion */

/* #region Footer */
.footer {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #1f1d25;
  padding: 0.5em 0;
}

.footer a {
  color: white;
  text-decoration: none;
  position: relative;
}

.footer p {
  font-size: small;
  color: white;
}
/* #endregion */


/* #region Expanding navbar underline */
.footer a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(0);
}

.footer a:hover::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .footer a::before {
    transition: transform 0.4s ease;
  }
}
/* #endregion */