/* The "not found" page.
 *
 * Like secure.css this one is not from the crawl. The layout follows
 * hessaire.com's 404 page: a spinning fan blade stands in for the zero of
 * "404". Sizes are that page's desktop ones, because the content column here
 * is a fixed 1024px.
 */

.notfound {
    padding: 60px 0 80px 0;
    text-align: center;
}

/* The blade and its margins are in em, so they follow the digits' size. */
.notfound-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 200px;
    font-weight: bold;
    line-height: .9;
    letter-spacing: -.02em;
    color: #231f20;
}

.notfound-fan {
    display: block;
    width: .9em;
    height: .9em;
    margin: 0 .05em;
    animation: notfound-spin 2s linear infinite;
}

.notfound-message {
    max-width: 720px;
    margin: 40px auto 0 auto;
    font-size: 26px;
    line-height: 1.4;
}

.notfound-home {
    margin-top: 24px;
    font-size: 14px;
}

@keyframes notfound-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notfound-fan {
        animation: none;
    }
}