/* CSS Document */

#pagePath{
	display: none;
	}

#notFound {
    display: grid;
    grid-gap: 48px;
    width: var(--wrap);
    margin: 48px auto 64px auto;
}

@media (min-width: 1200px) {
    #notFound {
        margin: 64px auto 128px auto;
    }
}

#notFound h2 {
    display: grid;
    justify-items: center;
    grid-gap: 16px;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    text-wrap: balance;
    word-break: break-all;
}

#notFound h2:before {
    content: "";
    display: block;
    width: 144px;
    aspect-ratio: 1;
    -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M22,34h-14c-1.1,0-2-.9-2-2V8c0-1.1.9-2,2-2h32c1.1,0,2,.9,2,2v16"/><path d="M6,26h20"/><path d="M16,42h8"/><path d="M20,34l-1,8"/><path d="M30,36c0,3.31,2.69,6,6,6s6-2.69,6-6-2.69-6-6-6-6,2.69-6,6"/><path d="M40.4,40.4l3.6,3.6"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    background: var(--color-theme);
}

@media (min-width: 1200px) {
    #notFound h2 {
        grid-gap: 24px;
        font-size: 32px;
    }

    #notFound h2:before {
        width: 160px;
    }
}

#notFound h2 + div {
    @media (min-width: 576px) {
        text-align: center;
    }
}

.caution {
    justify-self: center;
    padding: 24px;
    background: #f2f2f2;
    border: 1px solid #ccc;
}

.caution p {
    font-size: 14px;
}