@extends('front.layout.main')
@section('styles')
    <link rel="stylesheet" type="text/css" href="//cloud.typography.com/746852/739588/css/fonts.css" />
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        body {
            font-family: "Whitney SSm A", "Whitney SSm B", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
            color: #fff;
            -moz-font-smoothing: antialiased;
            -webkit-font-smoothing: antialiased;
        }

        .error-container {
            text-align: center;
            padding: 100px 0;
        }

        @media (max-width: 480px) {
            .error-container {
                position: relative;
                top: 50%;
                height: initial;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }
        }

        .error-container h1 {
            margin: 0;
            font-size: 130px;
            font-weight: 300;
        }
        .error-container h2 {
            margin: 0;
            font-size: 27px;
            font-weight: 300;
            text-transform: uppercase;
        }

        @media (min-width: 480px) {
            .error-container h1 {
                position: relative;
                padding: 100px 0;
            }
        }

        @media (min-width: 768px) {
            .error-container h1 {
                font-size: 220px;
            }
        }

        .return {
            color: rgba(255, 255, 255, 0.6);
            font-weight: 400;
            letter-spacing: -0.04em;
            margin: 0;
        }

        @media (min-width: 480px) {
            .return {
                position: absolute;
                width: 100%;
                bottom: 30px;
            }
        }

        .return a {
            padding-bottom: 1px;
            color: #fff;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.6);
            -webkit-transition: border-color 0.1s ease-in;
            transition: border-color 0.1s ease-in;
        }

        .return a:hover {
            border-bottom-color: #fff;
        }
    </style>
@endsection
@section('content')





    <div class="error-container">
        <h1>404</h1>
        <h2>This page does not exist</h2>
        <p class="return">Take me back to <a href="/">Home</a></p>
    </div>

@endsection