<div class="wrapper">
  <h1>This is unexpected...</h1>
  <p>This URL doesn't seem to exist. <br>If you are certain there should be something here, please <a href="/contact">contact me</a> and let me know.</p>
</div>
<style>
  .wrapper {
    max-width: 1200px;
    padding: var(--spacing-outer);
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    gap: 0;
  }
  h1 {
    font-size: 8.5vw;
    letter-spacing: -0.04em;
    margin: 0 0 0.2em 0;
  }
  p {
    font-size: 1.1em;
    margin: 0 0 1em 0;
  }
</style>