/* General Styles */
      body {
    font-family: 'Aileron', sans-serif;
    font-weight: bold;
    text-align: center;
    margin: 0; /* Remove default margin for full control */
    background: linear-gradient(to bottom, #e0f2f1, #f0f4f8); /* Very light gradient */
    background-size: cover; /* Ensure the gradient covers the entire body */
    min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
    display: flex; /* Use flexbox for vertical centering of content, if needed */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the start (top) */
    padding-top: 60px; /* Add padding at the top to prevent overlap with fixed top bar.  Adjust as needed */
    box-sizing: border-box; /* Include padding in body's total width/height */
}

/* Optional: If you have other elements inside the body that need vertical centering, you can use these properties
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
*/

h1, h2, h3 {
    color: #2c3e50; /* Darker heading color for better contrast */
    font-weight: 700; /* Use 700 for the boldest weight if available */
    margin-bottom: 20px; /* Add some margin below headings */
}

p {
    color: #555; /* Slightly darker paragraph color for better readability */
    line-height: 1.7; /* Improved line height for better readability */
    margin-bottom: 16px;
}

a {
    color: #007bff; /* Use the button blue for links */
    text-decoration: none; /* Remove underline */
    font-weight: 600; /* Make links a bit bolder */
    transition: color 0.3s ease; /* Smooth color transition */
}

a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Add underline on hover for clarity */
}

        /* Top Bar */
.top-bar {
    background: linear-gradient(135deg, #a8dadc, #457b9d); /* Ice-like gradient */
    color: white;
    text-align: center;
    padding: 6px 10px; /* Reduced padding for smaller size */
    font-size: 14px; /* Reduced font size */
    font-weight: 600; /* Slightly lighter bold */
    position: fixed;
    top: 5px; /* Adjust top position for spacing */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    width: 90%; /* Reduced width */
    max-width: 600px; /* Optional: limit maximum width */
    z-index: 1000;
    border-radius: 20px; /* Adjusted border radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Add a slight white border for definition */
}

        /* Heading */
        h2 {
            color: #333;
            margin-top: 50px;
            line-height: 1.5;
        }
        /* Dropdown (Select Language) */
        #language {
            display: block;
            margin: 10px auto;
            padding: 8px;
            font-size: 16px;
            border-radius: 5px;
        }
        
    /* Textarea */    
textarea {
    width: 90%; /* Ensures it fits well on all screen sizes */
    max-width: 800px; /* Optional: limit max width */
    height: 125px; /* More space */
    margin: 15px auto; /* Center it horizontally */
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    display: block;
    resize: vertical;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 15px auto; /* This auto-centers horizontally */
}

/* Focus effect */
textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

/* Placeholder styling */
textarea::placeholder {
    color: #aaa;
    font-style: italic;
}
        /* Buttons */
        
button {
    padding: 10px 15px;
    margin: 10px;
    background: linear-gradient(135deg, #a8dadc, #457b9d); /* Match top bar gradient */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 20px; /* Adjusted to match top bar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    font-weight: 500; /* slightly bolder */
}

button:hover {
    transform: translateY(-3px); /* Pop out effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

button:active {
    transform: translateY(-1px); /* Slightly less pop when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slightly less shadow on click */
}
        }        
        
        
.buttons {
    display: flex; /* Use flexbox for button alignment */
    justify-content: center; /* Center buttons horizontally */
    margin-top: 10px; /* Add space between textarea and buttons */
    width: 100%; /* Ensure the buttons container takes full width */
}

.buttons button {
    /* Keep the existing button styles */
    padding: 10px 15px;
    margin: 10px;
    background: linear-gradient(135deg, #a8dadc, #457b9d);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
}

.buttons button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.buttons button:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Adjust button margins if needed */
.buttons button {
    margin-left: 10px;
    margin-right: 10px;
}


/* Default Light Mode */
body {
    background-color: #ffffff;
    color: #000000;
    transition: background 0.3s, color 0.3s;
}

/* Dark Mode Styling */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* Dark Mode for Translator Box */
body.dark-mode .translator {
    background: #1e1e1e;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

/* Dark Mode for Textareas */
body.dark-mode textarea {
    background: #222;
    color: #fff;
    border: 1px solid #444;
}

/* Dark Mode for Buttons */
body.dark-mode button {
    background: #444;
    color: #fff;
    border: 1px solid #555;
}

footer {
    background: linear-gradient(135deg, #a8dadc, #457b9d); /* Match top bar gradient */
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px; /* Add space between main content and footer */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Subtle top border */
    border-radius: 20px 20px 0 0; /* Only round the top corners */
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1); /* Subtle top shadow */
    font-size: 0.9em; /* Slightly smaller font size for the footer */
    position: relative; /* Allows for absolute positioning of pseudo-elements if needed */
    width: 100%;
    box-sizing: border-box;
}

/* Optional: Style for the copyright symbol.  You can use HTML entity or a pseudo-element */
footer::before {
    content: "\00A9"; /* Unicode character for the copyright symbol */
    margin-right: 5px; /* Add a little space between the symbol and the text */
}

/* Style for the copyright text */
footer span {
    font-family: Arial, sans-serif;  /* A widely available font */
}

.breadcrumb {
            list-style: none;
            padding: 10px;
            margin: 0;
            background-color: #f0f0f0; /* Light background */
            font-size: 14px;
        }

        .breadcrumb li {
            display: inline;
        }

        .breadcrumb li+li:before {
            padding: 8px;
            color: black;
            content: "/\00a0"; /* Separator */
        }

        .breadcrumb li a {
            color: #007bff; /* Link color */
            text-decoration: none;
        }

        .breadcrumb li a:hover {
            text-decoration: underline;
        }