{% extends "base.html" %}  
{% block content %}

    <style>
        body::before {
            background:
            url("../static/img/error.gif") no-repeat center center;
            /* background-size: cover; */
            content: " ";
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            will-change: transform;
            z-index: -1;
        }
        .section_wrapper{
            margin-top: 10%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .section_wrapper p{
            font-size: 30px;
            color: red;

        }
        .section_wrapper a{
            font-size: 20px;
            color: greenyellow;

        }
    </style>
    <section class="error_404">
        <div class="section_wrapper">
            <p>
                Упс, щось пішло не так :(
            </p>
            <a href="{% url 'home' %}">
                <button class="btn waves-effect waves-light">
                    На головну сторінку 
                </button>
            </a>
        </div>
    </section>
{% endblock content%}