{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<title>Stories</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/ico" href="{% static 'images/logo.png'%}" />

		<!--Style sheets-->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">       
        <style>
            body{
                background-color: #fff5d7;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }

            .backtohome{
                font-weight:bold;
                display: inline-block;
                text-align: center;
                height: fit-content;
                color:black;
                text-decoration: none;
                font-size:1.5vw;
                padding: 4px 0px 4px 0px ;
                margin-top: 10vh;
                background-color:#ff5e6c;
                border-radius: 0.5vw;
                }

            .backtohome:hover{
                color:black;
                background-color: #ff8928;
                text-decoration: none;
            }

        </style>
	</head>
    <body style="background-image:url({% static 'images/404.png' %});">
        <div class="col-5 text-center" style="margin-top:25vh;">
            <h1 style="font-size:4.5vw;color:#3e3b56;">Error 404</h1>
            <h1 style="font-size:2.2vw;color:#545074;">{{defaultmsg}}</h1>
            <a class="col-5 backtohome" href="{% url 'image_repoportal:index' %}">
                <i class="fa fa-home fa-fw"></i>Back to Search</a>
        </div>
       
	</body>
</html>