* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000; color: #fff; font-family: 'Arial', sans-serif; transition: all 0.4s ease; position: relative; overflow: hidden; } body::after { content: ''; position: absolute; width: 200vmax; height: 200vmax; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0) 70%); animation: glow 8s infinite; z-index: -1; } [class~="container"] { text-align: center; position: relative; z-index: 2; } [class~="error-code"] { font-size: 15vw; font-weight: 900; text-shadow: 0 0 1.25rem rgba(255,255,255,0.3); margin-bottom: 1rem; } [class~="message"] { font-size: 1.5rem; letter-spacing: 0.125rem; } [class~="theme-toggle"] { position: fixed; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } [class~="theme-toggle"]:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); } body[class~="light-mode"] { background-color: #fff; color: #000; } body[class~="light-mode"]::after { background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 70%); } body[class~="light-mode"] [class~="theme-toggle"] { color: #000; background: rgba(0,0,0,0.1); } @keyframes glow { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(180deg); } } @media (max-width: 48rem) { [class~="error-code"] { font-size: 7.5rem; } [class~="message"] { font-size: 1rem; } }