/* Custom styles for the Inter font and basic body setup */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Light gray background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px; /* Add some padding for smaller screens */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Custom scrollbar for the tasks section */
.tasks.overflow {
    max-height: 300px; /* Defined max-height for overflow */
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #a0aec0 #edf2f7; /* For Firefox: thumb and track color */
}

.tasks.overflow::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.tasks.overflow::-webkit-scrollbar-track {
    background: #edf2f7; /* Color of the track */
    border-radius: 10px;
}

.tasks.overflow::-webkit-scrollbar-thumb {
    background-color: #a0aec0; /* Color of the scroll thumb */
    border-radius: 10px;
    border: 2px solid #edf2f7; /* Padding around thumb */
}

/* Style for checked tasks */
.task label p.checked {
    text-decoration: line-through;
    color: #a0aec0; /* Lighter color for checked tasks */
}