{% extends 'base.html' %}

{% block title %}Unauthorized Access{% endblock %}

{% block mystyle %}

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

    #unauthorized-access 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="unauthorized-access">
            <i class="fas fa-user-lock error-icon"></i> <!-- Font Awesome Icon -->
            <h1 class="text-warning mt-3">401 - Unauthorized Access</h1>
        </div>
        <p class="mb-4">You do not have permission to view this page.</p>
        <a href="{{ url_for('login') }}" class="btn btn-primary">Login</a>
        <a href="{{ url_for('home') }}" class="btn btn-secondary">Return to Home</a>
    </div>
</div>

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

{% endblock %}

{% block myscript %}

{% endblock %}