{% extends 'base.html' %}

{% block title %}Page Not Found{% endblock %}

{% block mystyle %}

<style>
    .error-icon {
        font-size: 100px;
        color: #dc3545; /* Bootstrap's danger color */
    }

    #page-not-found h1 {
        font-size: 2rem;
    }

    @media (max-width: 768px) {
        .error-icon {
            font-size: 70px; /* Adjust icon size for smaller screens */
        }   
    }
</style>

{% endblock %}

{% block content %}

<div class="container1">
    <div class="container text-center mt-5">
        <!-- Add an icon -->
        <div id="page-not-found">
            <i class="fas fa-exclamation-triangle error-icon"></i> <!-- Font Awesome Icon -->
            <h1 class="text-danger mt-3">404 - Page Not Found</h1>
        </div>
        <p class="mb-4">Sorry, the page you are looking for does not exist.</p>
        <a href="{{ url_for('home') }}" class="btn btn-primary">Return to Home</a>
    </div>
</div>

<!-- If last container is 1 -->
<div class="breaker31"></div>

{% endblock %}

{% block myscript %}

{% endblock %}