@layer project {
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-s);
    z-index: 100;
    background-color: var(--color-surface-raised);
  }

  .skip-link:focus {
    top: var(--space-s);
  }

  /* Background image */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("/assets/sunset.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Cold colour wash + heavy darken on top of the photo */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      /* Teal/purple/blue tint blended over the photo's warm highlights */
      linear-gradient(
        to bottom,
        rgba(40, 70, 120, 0.35) 0%,
        rgba(80, 50, 140, 0.30) 45%,
        rgba(20, 90, 110, 0.40) 100%
      ),
      /* Strong overall darken so cards don't need their own background */
      rgba(4, 4, 12, 0.85);
    mix-blend-mode: normal;
  }

  footer, header {
    background-color: transparent;
    text-align: center;
    padding-block: var(--space-s);
  }

  article {
    background-color: rgba(0, 0, 0, 0.35);
    border: none;
  }

  .about-photo{
    text-align: center;
  }
}