@extends('layouts.app')

@section('content')
    <main class="flex-auto flex flex-col relative">
        <div class="relative container">
            <div class="pt-[100px] pb-[200px] sm:px-[32px] lg:pt-[200px] lg:px-[100px] lg:pb-[300px] xl:px-[200px] lg:flex ">
                <div class="hidden lg:block lg:w-[20%] xl:w-[30%]"></div>
                <div class="relative lg:w-[80%] xl:w-[70%]">
                    <h1 class="text-[60px] leading-none font-bold uppercase text-sky-500 sm:text-[70px] md:text-[80px] lg:text-[85px] 2xl:text-[100px]">404</h1>
                    <h2 class="pr-[105px] text-[18px] font-medium mt-[40px] sm:pr-0 sm:text-[20px] md:text-[24px] lg:text-[28px] lg:mt-[60px] xl:text-[30px] ">{{ 'Požadovaná stránka neexistuje.' }}</h2>
                    <div class="mt-[80px]">
                        <a href="{{ localized_route('home_page') }}" class="relative inline-flex text-[18px] w-full py-[16px] px-[16px] text-center leading-tight text-white font-semibold bg-gradient-to-r from-slate-800 to-slate-900 rounded-full shadow-lg shadow-slate-50/20 transition-all hover:-translate-y-2 hover:shadow-slate-500 sm:w-auto sm:px-[40px] sm:text-[22px] sm:py-[18px] lg:text-[24px] lg:px-[60px] lg:py-[16px] 2xl:text-[28px]"><span class="relative mx-auto">{{ 'Prejsť na úvodnú stránku' }}</span></a>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection