/* Apply linear gradient background */
body {
    background: linear-gradient(to right, #46943c, #e0f5dd);
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; /* This centers all content */
}

/* Container that holds the form and text */
.container {
    text-align: center; /* Ensures content inside is centered */
    max-width: 80%;
    width: 500px; /* Fixed width for better control */
    margin: 0 auto;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9); /* White background with opacity */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-size: 22px; /* Increase font size for better readability */
}

/* Heading */
h1 {
    font-size: 48px; /* Larger heading */
    color: #333;
    margin-bottom: 30px;
}

/* Form styling */
input[type="file"] {
    padding: 20px;
    font-size: 22px; /* Larger font for better visibility */
    margin-top: 20px;
    border-radius: 5px;
    width: 100%; /* Make input take full width */
}

button {
    padding: 20px 40px;
    font-size: 22px; /* Larger button text */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 30px;
    width: 100%; /* Full width button */
}

button:hover {
    background-color: #45a049;
}

/* Result page styling - align text to the left and handle overflow */
pre {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
    font-size: 22px; /* Larger text */
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left; /* Left align extracted text */
    max-width: 100%; /* Ensure it fits within the container */
    margin: 20px auto;
    max-height: 400px; /* Limit height for the text box */
    overflow-y: scroll; /* Scroll vertically if text exceeds the height */
    box-sizing: border-box; /* Ensures padding does not affect the height */
}
/* Link styling */
a {
    display: inline-block;
    margin-top: 30px;
    color: #333;
    text-decoration: none;
    font-size: 22px; /* Larger link text */
}

a:hover {
    color: #4CAF50;
}