body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    margin: 0;
    padding: 20px;
    position: relative;
}

.container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.container:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    color: #333;
    font-size: 2.5em;
    margin-bottom: 20px;
}

h2 {
    margin-top: 20px;
    color: #333;
    font-size: 1.8em;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

.file-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.file-input {
    display: none; /* Hide the default file input */
}

.file-label {
    display: inline-block;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.file-label:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.input-section {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    height: 120px;
    resize: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

.options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.option-group {
    flex: 1;
    margin-right: 10px;
}

.option-group:last-child {
    margin-right: 0;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

select {
    width: 100%;
    padding: 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

select:focus {
    border-color: #0056b3;
    outline: none;
}

.description {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.button-group button {
    flex: 1;
    margin: 0 5px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    padding: 10px 15px;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

.spacer {
    border: none;
    border-top: 2px solid #007bff;
    margin: 20px 0;
}

.dark-mode-toggle {
    display: flex;
    align-items: center;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1000;
}

.toggle-switch {
    cursor: pointer;
    width: 50px;
    height: 25px;
    background-color: #ccc;
    border-radius: 50px;
    position: relative;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

.toggle-switch:before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 2.5px;
    transition: left 0.3s ease;
}

.dark-mode-toggle.active .toggle-switch {
    background-color: #007bff;
}

.dark-mode-toggle.active .toggle-switch:before {
    left: calc(100% - 22.5px);
}

#darkModeToggle:checked + .toggle-switch {
    background-color: #007bff;
}

#darkModeToggle:checked + .toggle-switch:before {
    left: calc(100% - 23px);
}

#historyList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#historyList li {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    background-color: #f9f9f9;
}

#historyList li:hover {
    background-color: #e9ecef;
}

#convertBtn {
    margin-top: 10px;
    width: 100%;
}

body.dark-mode {
    background-color: #121212; /* Darker background */
    color: #e0e0e0; /* Light gray text for better readability */
}

.container.dark-mode {
    background: #1e1e1e; /* Slightly lighter dark background for the container */
    border: 1px solid #333; /* Subtle border for the container */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Soft shadow for depth */
}

h1.dark-mode, h2.dark-mode {
    color: #ffffff; /* Bright white for headings */
}

select.dark-mode, textarea.dark-mode, button.dark-mode {
    background-color: #333; /* Dark background for inputs */
    color: #ffffff; /* White text for inputs */
    border: 1px solid #555; /* Lighter border for inputs */
}

button {
    background-color: #007bff; /* Primary button color */
    color: white; /* Button text color */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

.dark-mode-toggle.active .toggle-switch {
    background-color: #007bff; /* Active toggle switch color */
}

.toggle-switch:before {
    background-color: #ffffff; /* White toggle switch knob */
}

#historyList li {
    background-color: #2a2a2a; /* Dark background for history items */
    border: 1px solid #444; /* Border for history items */
}

#historyList li:hover {
    background-color: #3a3a3a; /* Highlight on hover */
}

/* Light Mode Styles */
#historyList li {
    background-color: #f9f9f9; /* Light background for history items */
    border: 1px solid #ccc; /* Light border for history items */
}

#historyList li:hover {
    background-color: #e9ecef; /* Highlight on hover in light mode */
}

/* Dark Mode Styles */
body.dark-mode #historyList li {
    background-color: #2a2a2a; /* Dark background for history items */
    border: 1px solid #444; /* Darker border for history items */
}

body.dark-mode #historyList li:hover {
    background-color: #3a3a3a; /* Highlight on hover in dark mode */
}

body.dark-mode .history-entry {
    background-color: #1e1e1e; /* Darker background for the history entry */
}

.history-entry {
    margin-bottom: 10px; /* Space between history entries */
    border: 1px solid #ccc; /* Border for each entry */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
}

.history-summary {
    padding: 10px; /* Padding for summary */
    cursor: pointer; /* Pointer cursor for clickable summary */
    background-color: #f9f9f9; /* Light background for summary */
}

.history-details {
    display: none; /* Initially hide details */
    padding: 10px; /* Padding for details */
    background-color: #f1f1f1; /* Slightly darker background for details */
}

.toggle-icon {
    margin-right: 10px; /* Space between icon and text */
}

/* Dark Mode Styles for History List */
body.dark-mode #historyList li {
    background-color: #2a2a2a; /* Dark background for history items */
    border: 1px solid #444; /* Darker border for history items */
}

body.dark-mode #historyList li:hover {
    background-color: #3a3a3a; /* Highlight on hover in dark mode */
}

body.dark-mode .history-entry {
    background-color: #1e1e1e; /* Darker background for the history entry */
}

/* Dark Mode Styles for History Entry */
body.dark-mode .history-entry {
    background-color: #1e1e1e; /* Darker background for the history entry */
}

body.dark-mode .history-summary {
    background-color: #2a2a2a; /* Dark background for summary */
    color: #ffffff; /* Light text color for better readability */
}

body.dark-mode .history-details {
    background-color: #2a2a2a; /* Dark background for details */
    color: #ffffff; /* Light text color for better readability */
}

/* Light Mode Styles for History Entry */
.history-entry {
    background-color: #f9f9f9; /* Light background for history entry */
}

.history-summary {
    background-color: #f9f9f9; /* Light background for summary */
    color: #333; /* Dark text color */
}

.history-details {
    background-color: #f1f1f1; /* Slightly darker background for details */
    color: #333; /* Dark text color */
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f9f9f9; /* Light background for the footer */
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #ccc; /* Optional border for separation */
}

.heart {
    color: red; /* Red color for the heart */
}
.ad-container-1x3 {
    position: fixed; /* Fix the position to the viewport */
    top: 100px; /* Distance from the top */
    left: 20px; /* Distance from the left */
    width: 300px; /* Set a width for the 1x3 widget */
    height: 700px; /* Height will adjust based on content */
    border: 1px solid #ccc; /* Light border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background */
    text-align: center; /* Center text */
    overflow: hidden; /* Hide overflow */
    z-index: 1000; /* Ensure it stays above other content */
}

.moon-emoji {
    font-size: 2em; /* Adjust the size as needed */
}

.emoji {
    font-size: 2em; /* Increase the size of the moon emoji */
}
/* Prevent text selection in the text box */
textarea {
    user-select: none; /* Prevent text selection inside the textarea */
    pointer-events: auto; /* Ensure pointer events are enabled */
}

/* Allow text selection for other elements */
.container {
    user-select: text; /* Allow text selection for the container */
}

@media (max-width: 768px) {
    .ad-container-1x3 {
        display: none; /* Hide the ad container on mobile devices */
    }
}