<template>
  <BasicPageLayout class="not-found" page-title="404">
    <p>This page could not be found.</p>
    <router-link class="home-link" to="/">Home</router-link>
  </BasicPageLayout>
</template>

<script>
export default {
  name: 'NotFound',
};
</script>

<style lang="stylus" scoped>
@import '~@theme/styles/_mixins.styl';
.not-found {
  text-align: center;

  p {
    margin-bottom: space(2);
  }

  .home-link {
    color: var(--accent-color);
    text-decoration: underline;
  }
}
</style>
