body.dark-mode {
    background-color: #2c2c2c;
    color: #f0f0f0;
}

body.light-mode {
    background-color: #f0f0f0;
    color: #2c2c2c;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    position: relative; /* Ensure relative positioning for the home button */
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 50px; /* Adjusted padding to accommodate the toggle button */
}

.clock {
    font-size: 24px;
}

.content-container {
    display: flex;
    flex-direction: column; /* Change to column layout for small screens */
    gap: 20px; /* Increased gap for better separation */
    width: 90%; /* Use percentage for flexible width */
    max-width: 1200px; /* Set a max width for large screens */
    align-items: flex-start; /* Align items to the top */
}

@media (min-width: 768px) {
    .content-container {
        flex-direction: row; /* Change to row layout for larger screens */
    }
}

.input-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.input-container {
    border: 2px solid #005DAA;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    background-color: black;
    box-shadow: 0 4px 8px gainsboro;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increased gap for better spacing */
}

body.light-mode .input-container {
    background-color: white;
    color: #2c2c2c;
}

textarea {
    width: calc(100% - 20px); /* Adjust width to fit within padding */
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #005DAA;
    font-size: 16px;
    resize: none; /* Prevent resizing */
    margin: 0 auto; /* Center horizontally */
}

.time-container {
    display: flex;
    flex-direction: column; /* Stack elements for small screens */
    gap: 10px;
    align-items: center;
    justify-content: center; /* Center the contents */
}

@media (min-width: 768px) {
    .time-container {
        flex-direction: row; /* Inline elements for larger screens */
    }
}

.quick-add-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for small screens */
    gap: 10px;
    justify-content: center;
}

select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #005DAA;
    font-size: 16px;
    background-color: white;
    color: black;
}

.add-btn, .quick-add-btn, .toggle-theme-btn, .toggle-btn {
    font-size: 18px;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.add-btn {
    background-color: #FFD100;
    background: linear-gradient(145deg, #FFD100, #FFC300);
    color: #0033A0;
    height: fit-content; /* Ensure button height fits content */
}

.add-btn:hover {
    color: white;
}

.quick-add-btn {
    background-color: #0033A0;
    background: linear-gradient(145deg, #0033A0, #0055FF);
    color: white;
}

.quick-add-btn:hover {
    background: linear-gradient(145deg, #002080, #0033A0);
}

.toggle-theme-btn, .toggle-btn {
    background-color: #005DAA;
    color: white;
    position: fixed; /* Fixed position to place it in the corner */
    top: 10px; /* Distance from the top of the screen */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
    border: none;
    z-index: 1000; /* Ensure buttons are on top */
}

.toggle-theme-btn {
    right: 10px; /* Distance from the right of the screen */
}

.toggle-btn {
    right: 10px;
    top: 60px; /* Position below the toggle theme button */
}

.toggle-theme-btn ion-icon, .home-button ion-icon {
    font-size: 24px;
}

.task-list-container, .completed-tasks-container {
    border: 2px solid #005DAA;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    background-color: black;
    box-shadow: 0 4px 8px gainsboro;
}

body.light-mode .task-list-container, body.light-mode .completed-tasks-container {
    background-color: white;
    color: #2c2c2c;
}

.task-list-container h2, .completed-tasks-container h2 {
    margin-bottom: 10px;
}

#task-list, #completed-task-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.hidden {
    display: none;
}

.task-list li, .completed-task-list li {
    background-color: #4c4c4c;
    border: 1px solid #005DAA;
    border-radius: 5px;
    margin: 10px 0; /* Increased margin for better separation */
    padding: 15px; /* Increased padding for better readability */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

body.light-mode .task-list li, body.light-mode .completed-task-list li {
    background-color: #e0e0e0;
}

.task-list ion-icon, .completed-task-list ion-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 32px; /* Increased icon size for better clickability */
    margin-left: 10px;
    transition: color 0.2s ease-in-out;
}

.task-list ion-icon:hover, .completed-task-list ion-icon:hover {
    color: #FFD100; /* Change icon color on hover */
}

.complete-btn {
    color: green;
}

.remove-btn {
    color: red;
}

.important-btn {
    color: gold;
    margin-right: 10px;
}

.due {
    background-color: #FF6347; /* Highlight due tasks in red */
    color: white;
}

.completed {
    opacity: 0.6;
    color: green;
}

.important {
    background-color: darkorange;
}

.countdown {
    color: white;
}

body.light-mode .countdown {
    color: #2c2c2c;
}

.home-button {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 24px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000; /* Ensure button is on top */
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-button ion-icon {
    font-size: 24px;
    color: white;
}