{% extends 'base.html' %}

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

{% block head %}
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4b9ba14b0f.js" crossorigin="anonymous"></script>
<style>
    .mainbox {
        background-color: #ffffff;
        margin: auto;
        height: 600px;
        width: 600px;
        position: relative;
    }

    .err {
        color: #000000;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 11rem;
        position: absolute;
        left: 20%;
        top: 8%;
    }

    .far {
        position: absolute;
        font-size: 8.5rem;
        left: 42%;
        top: 15%;
        color: #000000;
    }

    .err2 {
        color: #000000;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 11rem;
        position: absolute;
        left: 68%;
        top: 8%;
    }

    .msg {
        text-align: center;
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1.6rem;
        position: absolute;
        left: 16%;
        top: 45%;
        width: 75%;
    }

    .home-link {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .home-link:hover {
        text-decoration: underline;
    }
</style>
{% endblock head %}

{% block body %}
<div class="container">
    <div class="mainbox">
        <div class="err">4</div>
        <i class="far fa-question-circle fa-spin"></i>
        <div class="err2">4</div>
        <div class="msg">Maybe this page moved? Got deleted? Is hiding out in quarantine? Never existed in the first
            place?<p>Let's go <a class="home-link" href="{% url 'home' %}">home</a> and try from there.</p>
        </div>
    </div>
</div>
{% endblock body %}