背景画像が銀河な404ページ

<div class="container">
    <div class="error">
        <span>4</span>
        <div class="astronaut">
            <svg viewbox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <clippath id="planetClip">
                        <circle cx="120" cy="120" r="70"></circle>
                    </clippath>
                    <filter id="glow">
                        <fegaussianblur stddeviation="6" result="coloredBlur"></fegaussianblur>
                        <femerge>
                            <femergenode in="coloredBlur"></femergenode>
                            <femergenode in="SourceGraphic"></femergenode>
                        </femerge>
                    </filter>
                </defs>

                <!-- 後ろ側のリング（上半分） -->
                <ellipse class="ring" cx="120" cy="120" rx="95" ry="35" fill="none" stroke="rgb(161, 162, 178)" stroke-width="3" filter="url(#glow)" clip-path="url(#backRing)"></ellipse>
                <clippath id="backRing">
                    <rect x="0" y="0" width="240" height="120"></rect>
                </clippath>

                <!-- 球体 -->
                <circle cx="120" cy="120" r="70" fill="#e8e8e8"></circle>

                <!-- 手前側のリング（下半分）- 球体でクリップ -->
                <g clip-path="url(#planetClip)" style="clip-path: none;">
                    <ellipse class="ring" cx="120" cy="120" rx="95" ry="35" fill="none" stroke="rgb(161, 162, 178)" stroke-width="3" filter="url(#glow)" clip-path="url(#frontRing)"></ellipse>
                </g>
                <clippath id="frontRing">
                    <rect x="0" y="120" width="240" height="120"></rect>
                </clippath>
            </svg>
        </div>
        <span>4</span>
    </div>

    <a href="/" class="home" aria-label="ホームへ戻る">
        <span class="earth">🌍</span>
        HOME
    </a>
</div>

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: url('https://pa-tu.work/storage/img/templates/stars-1837306_1920.jpg') center center / cover no-repeat fixed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* オーバーレイで少し暗く */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

/* 中央配置 */
.container {
    position: relative;
    height: 100%;
    display: grid;
    place-items: center;
    z-index: 1;
}

/* 404 漂う */
.error {
    display: flex;
    align-items: center;
    gap: -20px;
    font-size: clamp(80px, 20vw, 200px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 土星（0の代わり） */
.astronaut {
    position: relative;
    width: clamp(100px, 25vw, 250px);
    height: clamp(100px, 25vw, 250px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.astronaut svg {
    width: 100%;
    height: 100%;
}

/* リング回転アニメーション */
.ring {
    stroke-dasharray: 3 5;
    animation: ringRotate 52s linear infinite;
    transform-origin: 120px 120px;
}

@keyframes ringRotate {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 400;
    }
}

/* 浮遊アニメーション */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-28px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ホーム */
.home {
    position: absolute;
    bottom: 48px;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.home:hover {
    opacity: 1;
}

/* 地球アイコン */
.earth {
    font-size: 32px;
    display: block;
    margin-bottom: 4px;
}