* { 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; } /* Efeito de glow no fundo */ 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; } .container { text-align: center; position: relative; z-index: 2; } .error-code { font-size: 15vw; font-weight: 900; text-shadow: 0 0 20px rgba(255,255,255,0.3); margin-bottom: 1rem; } .message { font-size: 1.5rem; letter-spacing: 2px; } /* Botão de tema */ .theme-toggle { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; 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; } .theme-toggle:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); } /* Modo claro */ body.light-mode { background-color: #fff; color: #000; } body.light-mode::after { background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 70%); } body.light-mode .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: 768px) { .error-code { font-size: 120px; } .message { font-size: 1rem; } }