---
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import ErrorPageButton from "../components/ErrorPageButton.vue";
import Footer from "../components/Footer.vue";
---
<Layout title="">
    <Menu />
    <main>
        <div class="body">
            <section class="container-fluid bg3 shadow-xl mb-32">
                <div class="container mx-auto px-4 xl:px-24 flex flex-col xl:flex-row">
                    <div class="flex flex-col justify-center w-full">
                        <p class="hero-text font-bold text-blue-700">Page Not Found</p>
                        <p class="h1-text font-bold mb-4">Sorry, the page you asked for couldn’t be found.</p>
                        <ErrorPageButton client:visible/>
                    </div>
                    <div class="flex">
                        <img class="w-fit" src="/img/img-404.png" alt=""> </div>
                </div>
            </section>
        </div>
    </main>
    <Footer client:visible/>
</Layout>

<style>
    @media screen and (min-width: 1500px) {
  .hero-text {
    font-size: 80px;    
  }
}

@media screen and (max-width: 1499px) {
  .hero-text {
    font-size: 60px;
    
  }
}
@media screen and (max-width: 1199px) {
  .hero-text {
    font-size: 40px;
    
  }
}
@media screen and (min-width: 801px) {
  .h1-text {
    font-size: 40px;
    
    
  } 
}

@media screen and (max-width: 800px) {
  .h1-text {
    font-size: 25px;
    
  }
}
.bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);
  }
</style>