body {
    direction: rtl;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    background-color: #f8f9fa;
    font-size: 15px; /* Even smaller base font size */
    overflow-y: auto; /* Allows for scrolling if absolutely necessary */
}

.container {
    max-width: 700px; /* Slightly reduced width */
    margin: 5px auto; /* Reduced vertical margin */
    padding: 10px; /* Reduced padding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 5px;
}

input[type="number"].age-input {
    width: 70px; /* Set a width that works for both */
    padding: 8px 12px; /* Add padding to make input taller and balanced */
    margin-right: 5px; /* Space between inputs if inline */
    border: 1px solid #ddd; /* Standard border to match design */
    border-radius: 4px; /* Rounded corners */
    font-size: 1.0em; /* Font size to match other inputs */
}

h1, h2 {
    font-size: 20px; /* Further reduced font size for headers */
    margin: 10px 0; /* Reduced margin around headers */
}

table {
    width: 75%; /* Increase the width to 90% of the container's width */
    margin: 5px auto 0px; /* Reduced bottom margin to 5px */
    border-collapse: collapse;
    border-bottom: 2px solid #ccc;
}

th, td {
    border: 1px solid #ddd;
    padding: 2px; /* Very minimal padding */
    font-size: 16px; /* Smaller font size */
}

.form-container {
    margin: 5px auto; /* Reduced margin */
}

.submit-container {
    background-color: transparent;
}

.form-container, .container, body {
    background-color: transparent; /* or the desired background color of your page */
}

input[type="submit"] {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 2.5px 10px; /* Larger padding for a bigger button */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Larger font size */
    font-weight: bold; /* Bold font */
    cursor: pointer; /* Cursor changes to a hand symbol when hovered over */
    transition: background-color 0.3s, transform 0.2s; /* Smooth background color transition and transform */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

input[type="submit"]:hover {
    background-color: #45a049; /* Slightly darker green on hover */
    transform: translateY(-2px); /* Button moves up slightly when hovered */
}

input[type="submit"]:active {
    background-color: #3e8e41; /* Even darker green when button is clicked */
    transform: translateY(1px); /* Button moves down slightly when clicked */
}

.footer-content {
    color: black;
    background-color: #eaeaea; /* Light grey background */
    font-family: Arial, sans-serif; /* Using Arial as the standard font */
    padding: 7.5px; /* Padding inside the footer */
    border-radius: 5px; /* Rounded corners */
    position: fixed; /* Fixed position to keep it in view */
    bottom: 0; /* Position it at the bottom of the viewport */
    right: 0; /* Align to the right of the viewport */
    font-size: 1.1em; /* Keep original font size */
    z-index: 10; /* Ensure footer stays above other content */
    justify-content: space-between;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    border-top: 2px solid #cccccc; /* Light grey border on top for definition */
    transition: all 0.3s ease; /* Transition for hover effects */
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-inner > span {
    display: block;
}

.refresh-link {
    padding: 8px 15px; /* Smaller refresh link */
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    transition: background-color 0.3s;
    position: fixed;
    bottom: 10px;
    left: 10px;
}

.refresh-link:hover {
    background-color: #e2e6ea;
}

/* Responsive adjustments */
@media (max-width: 768px) {
body {
   font-size: 15px; /* Smaller font size on smaller screens */
}
h1, h2 {
   font-size: 18px; /* Smaller headers on smaller screens */
}
.container {
   padding: 5px; /* Less padding on smaller screens */
}
input[type=submit] {
   padding: 5px 10px; /* Smaller buttons on smaller screens */
}
table, th, td {
   font-size: 10px; /* Smaller font size for table on smaller screens */
}