<script>
    import {url} from '@roxi/routify'
    import MainLayout from "../Layout/MainLayout.svelte";
    import Fa from 'svelte-fa'
    import {faSadCry,faArrowAltCircleLeft} from '@fortawesome/free-regular-svg-icons'
    import Button from "../Components/Button.svelte";
</script>

<style>
    .text-huge {
        font-size: 12rem;
    }
    .main {
        display: grid;
        place-content: center;
        @apply h-full w-full text-center
    }

</style>

<MainLayout>
    <div class="main">
        <div class="text-huge"><Fa icon={faSadCry} fw /> 404</div>
        <div>
            <div>Page not found.</div>
            <a href={$url('../')}><Button rounded green><Fa slot="leading" icon={faArrowAltCircleLeft} fw />Go back</Button></a>
        </div>
    </div>
</MainLayout>