{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}

{% block title %}Произошла ошибка{% endblock %}

{% block head %}
{{ header.style() }}
<style>
body {font-family: Arial, sans-serif;}
.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.7);}
.modal-content {background-color: #fff;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;}
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover, .close:focus {color: black;text-decoration: none;cursor: pointer;}
iframe {width: 100%;height: 400px;}
@media (min-width: 901px) {
.c_jz6k0 {  color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
.c_6wvwc { width: 540px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
.c_2ozmq { display: flex; width: 540px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
.c_coxdg { display: flex; box-sizing: unset; justify-content: center; align-items: center; height: 660px; gap: 150px; background: rgba(95, 23, 152, 0.02); }
}

@media (min-width: 700px) and (max-width: 900px) {
.c_jz6k0 { align-self: stretch; color: #000; font-family: Inter; font-size: 65px; font-style: normal; font-weight: 700; line-height: normal; }
.c_6wvwc { width: 700px; align-self: stretch; color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; }
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_kc6kk { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_zod37 { display: flex; align-items: flex-start; gap: 20px; }
.c_2ozmq { display: flex; width: 800px;min-width: 500px; padding: 0 50px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_qa0pb { width: 430px; height: 430px; flex-shrink: 0; }
.c_coxdg { height: 1050px;display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
}

@media (max-width: 699px) {
.c_jz6k0 { height: 78px; align-self: stretch; color: #000; font-family: Inter; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; }
.c_6wvwc { width: 330px; height: 240px; align-self: stretch; color: #000; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.c_ifykb { text-wrap: nowrap; color: #FFF; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }
.c_kc6kk { display: flex; width: 145px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_16ji5 { display: flex; width: 166px; height: 51px; padding: 19px 33px; justify-content: center; align-items: center; border-radius: 5px; background: #5F1798; }
.c_zod37 { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
.c_2ozmq { display: flex; width: 375px; padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.c_qa0pb { width: 375px; height: 295px; flex-shrink: 0; max-width: 100%;}
.c_coxdg { height: 850px; display: flex; box-sizing: unset; justify-content: center; align-items: center; align-content: center; gap: 50px 0; flex-wrap: wrap; background: rgba(95, 23, 152, 0.02); }
}</style>
{{ footer.style() }}
{% endblock %}

{% block content %}
{{ header.section(user) }}
<main class="c_coxdg">
    <div class="c_2ozmq">
        <h1 class="c_jz6k0">Произошла ошибка</h1>
        <p class="c_6wvwc">{{detail}}</p>
        <div class="c_zod37">
            <a class="c_kc6kk" href="/"><span class="c_ifykb">Вернуться на главную</span></a>
        </div>
    </div>
    <picture class="c_qa0pb"><img crossorigin="anonymous" fetchpriority="high" class="c_qa0pb" src="/static/painter.svg"></picture>
</main>

{{ footer.section(user) }}
{% endblock %}