body, html {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top:30px; /* prevent content hiding under fixed navbar */
            background-color: yellow;
            height: 100%;
            margin: 0; 
            /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
        }

        .hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/images/foxtrot-bg.jpg') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 120px 0;
            text-align: center;
        }
        .hero h1 {
            font-size: 3rem;
            font-weight: bold;
        }
        .hero p {
            font-size: 1.3rem;
        }
        .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        footer {
            background: #212529;
            color: #aaa;
            padding: 30px 0;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.9rem;
        }
        .error-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            /*justify-content: center;*/
            align-items: center;
            text-align: center;
            /*padding: 5rem;*/
            /* padding-bottom: 4rem;  */
            /* margin-bottom: 2rem; */
        }
        .error-code {
            font-size: 10rem;
            font-weight: bold;
            color: #dc3545;
        }
        .error-message {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            color: #495057;
        }
        .btn-home {
            font-size: 1.1rem;
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            
        }
        .error-illustration {
            max-width: 400px;
            margin-bottom: 2rem;
        }
        @media (max-width: 576px) {
            .error-code {
                font-size: 6rem;
            }
            .error-message {
                font-size: 1.2rem;
            }
        }