@font-face {
    font-family: 'CommitMono';
    src: url('../fonts/commit-mono/CommitMono-400-Regular.eot');
    src: url('../fonts/commit-mono/CommitMono-400-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/commit-mono/CommitMono-400-Regular.woff2') format('woff2'),
    url('../fonts/commit-mono/CommitMono-400-Regular.woff') format('woff'),
    url('../fonts/commit-mono/CommitMono-400-Regular.ttf') format('truetype'),
    url('../fonts/commit-mono/CommitMono-400-Regular.svg#prxmnvcndnsd_regular') format('svg');
    font-weight: 400;
    font-style: normal;
}

.body-404 {
    padding: 72px;
    background-image: linear-gradient(to right, #F7F6F9 1px, transparent 1px),
                      linear-gradient(to bottom, #F7F6F9 1px, transparent 1px);
    background-size: 72px 72px;
    background-color: #fff;
}
.body-404--content {
    padding-top: 144px;
    padding-bottom: 196px;
    border: 1px dashed #000;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.body-404--content::before,
.body-404--content::after {
    content: '';
    width: 33px;
    height: 33px;
    position: absolute;
    background: url(../img/icon-cross-blue.svg) no-repeat center center;
    background-size: cover;
}
.body-404--content::before {
    top: -17px;
    left: -17px;
}
.body-404--content::after {
    right: -17px;
    bottom: -17px;
}

.pre-heading {
    color: #2E56FF;
    font-family: 'CommitMono', monospace;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 48px;
}
.heading h1 {
    color: #000;
    font-size: 80px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 100% !important;
    letter-spacing: -3.2px !important;
    margin: 0;
}
.body-404--content p {
    color: #000;
    text-align: center;
    font-family: 'CommitMono', monospace;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 20px 0 0;
}
.body-404--content .btn {
    height: 56px;
    padding: 15px 20px;
    margin-top: 48px;
}

@media screen and (max-width: 767px) {
    .body-404--content {
        padding-top: 100px;
        padding-bottom: 120px;
    }
    .heading h1 {
        font-size: 56px !important;
        letter-spacing: -1.8px !important;
    }
}

@media screen and (max-width: 480px) {
    .body-404--content {
        padding-top: 50px;
        padding-bottom: 60px;
    }
    .body-404--content img {
        width: auto;
        height: 120px;
    }
    .pre-heading,
    .body-404--content .btn {
        margin-top: 24px;
    }
    .heading h1 {
        font-size: 38px !important;
        letter-spacing: -1.2px !important;
    }
}