WP 404!! Page

404.css

/* -404 Page CSS
-------------------------------------------------------------------------*/
.wrap {
    font-family: 'Open Sans', sans-serif;
	-webkit-background-size:cover;
	-moz-background-size:cover; 
	background-size:cover;
    background-attachment: fixed;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fbb034;
} 
.agileinfo-row {
    width: 65%;
    margin:0 auto;
}
.w3layouts-errortext{
    padding-top:4em;
    text-align: center;
} 
.w3layouts-errortext h1 {
    font-size: 1.2em;
    color: #fff;
    font-weight: 900; 
	line-height: 1.8em;
}  
p.w3lstext {
    font-size: 0.9em;
    color: #fff;
    line-height: 1.8em;
    font-weight: 400;
    width: 65%;
    text-transform: capitalize;
    margin: 1.5em auto 2.5em;
}
p.w3lstext a {
    color: #fbb034;
	padding-right:10px;
}
p.w3lstext a:hover{
    color: #ffffff;
}
.w3layouts-errortext h2{
    font-size: 14em;
    color: #fff;
}
.w3layouts-errortext span {
    color: #fbb034;
}
/*-- 404!! responsive-design --*/ 
    @media(max-width:1366px) {
        p.w3lstext {
            width: 75%;
        }
    .w3layouts-errortext h2 {
            letter-spacing: 10px;
        }
    }

    @media(max-width:1080px) {
        .agileinfo-row {
            width: 75%;
        }
    @media(max-width:667px) {
        p.w3lstext {
            width: 100%;
            font-size: 0.85em;
            line-height: 2em;
        }
        .w3layouts-errortext h2 {
            font-size: 10em;
            color: #fff;
        }
        .w3layouts-errortext {
            padding-top: 2em;
        }
    }
    @media(max-width:414px) {
        .w3layouts-errortext h2 {
            font-size: 9em;
        }
        .w3layouts-errortext {
            padding-top: 2em;
        }
    }
    @media(max-width:384px) {
        .agileinfo-row {
            width: 87%;
        }
        .w3layouts-errortext h2 {
            letter-spacing: 10px;
        }
    }
    @media(max-width:320px) {
        .w3layouts-errortext h2 {
            font-size: 7em;
        }
    }
/*-- //responsive-design --*/

404.php

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage MY_Theme
 * @since 1.0
 * @version 1.0
 */
?>

    <?php get_header(); ?>
    <div class="wrap" style="background:url(<?php echo get_stylesheet_directory_uri(); ?>/images/error.jpg)">

        <div class="agileits-main">
            <div class="agileinfo-row">
                <div class="w3layouts-errortext">
                    <h2>4<span>0</span>4</h2>
                    <h1>Sorry! The page you were looking for could not be found </h1>
                    <p class="w3lstext">You have been tricked into click on a link that can not be found. Please check the url or go to <a href="<?php echo home_url(); ?>">main page</a> and see if you can locate what you are looking for </p>
                </div>

                <div class="page-content">
                    <?php get_search_form(); ?>
                </div> <!-- .page-content -->
            </div>
        </div>

    </div>

    <?php get_footer(); ?>