<script>
    import { navigate } from "svelte-routing"
</script>

<div class="not-found">
    <div class="content">
        <h1>404</h1>
        <h2>Seite nicht gefunden</h2>
        <p>
            Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht
            verfügbar.
        </p>
        <button on:click="{() => navigate('/')}" class="back-home">Zurück zur Startseite</button>
    </div>
</div>

<style lang="less">
    @import "../assets/css/main.less";
    .not-found {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;

        .content {
            text-align: center;
            padding: 2rem;
            background-color: rgba(255, 255, 255, 0.9);

            h1 {
                font-size: 6rem;
                margin-bottom: 2rem;
            }

            h2 {
                font-size: 2rem;
                margin-bottom: 1rem;
            }

            p {
                margin-bottom: 2rem;
            }

            .back-home {
                text-decoration: none;
                border: 1px solid black;
                padding: 0.5rem 1rem;
                transition: background-color 0.2s, color 0.2s;
            }
        }
    }
</style>
