{% extends "default.html" %}

{% block nav_title %}{{ error }}{% endblock %}
{% block title %}{{ error_code }} {{ error }} | {{ site_name }}{% endblock %}

{% block extra_head %}
    <style>
        body::before {
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            content: "";
            filter: saturate(0.875) brightness(0.875);
            background:
                radial-gradient(circle, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)),
                url("/raw/picture/{{ random_picture.id }}") center / cover no-repeat,
                #000000;
        }
        main {
            height: 100%;
            width: 100%;
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            --color-background-text: #ffffff;
            --text-soft: #ffffffe0;
            --text-faint: #ffffffc0;
            --text-softer: #ffffff80;
            --text-softest: #ffffff50;
            --color-link-text: #ffffff;
            --color-link-hover-text: #ffffff;
            --color-link-visited-text: #ffffff;
            --color-link-active-text: #ffffff;
            --color-link-visited-hover-text: #ffffff;
            text-align: center;
        }
        #error-code {
            font-size: 1.25em;
            font-weight: bold;
            text-transform: uppercase;
            color: var(--color-accent-3);
            width: fit-content;
            margin: 1rem;
            text-shadow: 0 1px 4px #00000080, 0 0 1px #00000080, 0 0 2px #00000040;
        }
    </style>
{% endblock %}

{% block content %}
    <h1>{{ error }}</h1>
    {% block error_content %}
    {% endblock %}
    <p id="error-code">
        HTTP error {{ error_code }}
    </p>
    <p>
        If you came here from the API, <a href="/info/">RTFM</a> :)
    </p>
    <p>
        If you believe this is our fault, please <a href="{{ config.CONTACT_LINK }}">contact us</a>.
    </p>
{% endblock %}