html, body {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure full width */
    height: 100%; /* Ensure full height */
    font-family: Arial, sans-serif; /* Inherit the font from the main content */
    background-color: #ccc; /* Set the background color for the entire page */
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #002C5F;
    color: #fff;
    width: 100%;
    z-index: 999;
    font-family: Arial, sans-serif;
}

.footer {
    flex-shrink: 0;
    background-color: #000;
    color: #fff;
    padding: 8px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.logo img {
    max-width: 250px;
    height: auto;
    margin-right: 0.5rem;
}

@media (min-height: 900px) {
    /* Adjust 800px based on when you want this to kick in */
    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
.footer a {
    color: #63B1E5;
    text-decoration: none;
}

@media (max-width: 767px) {
    .error-code {
        font-size: 20vw; /* Use viewport width for scaling the font size */
    }

    .error-message {
        font-size: 5vw; /* Use viewport width for scaling the font size */
    }

    .back-home-btn {
        font-size: 4vw; /* Use viewport width for scaling the font size */
    }

    .error-container {
        min-height: calc(100vh - 60px); /* Adjust for smaller header/footer on mobile */
        padding: 1rem; /* Ensure there's space around the content */
    }

    /* Adjust the footer to not be fixed on mobile */
    .footer {
        position: static;
        padding: 0.5rem;
        font-size: 12px;
    }

    /* Adjust the header and logo for smaller screens */
    .header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .logo img {
        max-width: 150px; /* Further reduce the size of the logo if needed */
    }
}
*, *:before, *:after {
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
}


.error-code {
    font-size: 64px; /* This is quite large for mobile devices */
    color: #6a1d2b;
    margin: 0; /* Remove default margins */
}

.error-message {
    font-size: 32px; /* Adjust if necessary */
    margin: 0.5rem 0; /* Add some vertical spacing */
}

.error-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px); /* Use min-height instead of height */
    text-align: center;
    padding: 1rem; /* Add padding to prevent content from touching the edges */
    background-color: #ccc; /* Background color */
    color: #6a1d2b; /* Text color */
}

.back-home-btn {
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 15px; /* Initial border radius */
    background-color: #002C5F; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, border-radius 0.6s ease-in-out;
}
.back-home-btn:hover {
    background-color: white;
    color: #002C5F;
    border-radius: 50px; /* Rounded corners on hover */
}