<script setup lang="ts"></script>

<template>
  <v-container fluid class="fill-height d-flex flex-column justify-center align-center">
    <h1 class="error-title text-h1 font-weight-bold">404</h1>
    <p class="error-message text-h5">Page not found</p>

    <router-link
      to="/"
      class="text-blue text-decoration-none font-weight-medium mt-5"
    >
      Zurück zur Startseite
    </router-link>
  </v-container>
</template>

<style scoped>
.error-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  color: #fff;
}

.error-message {
  font-size: 1.25rem;
  opacity: 0.85;
  color: #fff;
}
a:hover {
  text-decoration: underline !important;
}
</style>
