*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Arial',sans-serif;background-color:#1c1c1e;color:#f5f5f5;margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
h1{font-size:2rem;text-align:center;margin:20px 0}h1 a{text-decoration:none;color:#007bff;display:flex;align-items:center;justify-content:center;gap:10px;transition:color .3s ease}h1 a:hover{color:#ffffff}h1 a i{font-size:1.5rem;color:#007bff;transition:color .3s ease}h1 a:hover i{color:#ffffff}
#todo-form{display:flex;justify-content:center;margin-bottom:20px;width:100%;max-width:500px}
#todo-form input{flex:1;padding:12px 15px;font-size:1rem;border:1px solid #3a3a3c;border-radius:10px;background-color:#2c2c2e;color:#f5f5f5;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
#todo-form button{padding:12px 20px;font-size:1rem;margin-left:10px;border:none;border-radius:10px;cursor:pointer;background-color:#007aff;color:#fff;transition:background-color 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.5)}
#todo-form button:hover{background-color:#005bb5}
ul{list-style-type:none;padding:0;width:100%;max-width:500px}
li{display:flex;justify-content:space-between;align-items:center;padding:15px;margin-bottom:10px;background-color:#2c2c2e;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.5);transition:transform 0.2s ease,background-color 0.3s ease}
li:hover{transform:scale(1.02);background-color:#3a3a3c}
li.completed span{text-decoration:line-through;color:#8e8e93}
.checkbox-container{display:flex;align-items:center;cursor:pointer}
.checkbox-container input[type="checkbox"]{display:none}
.custom-checkbox{width:24px;height:24px;border:2px solid #007aff;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:10px;transition:background-color 0.3s ease,border-color 0.3s ease}
.custom-checkbox.checked{background-color:#007aff;border-color:#007aff}
.custom-checkbox.checked::after{content:'🗸';color:#fff;font-size:20px}
.task-content{flex:1;display:flex;align-items:center}
.task-content span{margin-left:10px}
.action-buttons{display:flex;gap:10px}
.edit-btn,.delete-btn{padding:8px 12px;border:none;border-radius:10px;cursor:pointer;transition:background-color 0.3s ease;font-size:.9rem;font-weight:bold}
.edit-btn{background-color:#34c759;color:#fff}
.edit-btn:hover{background-color:#28a745}
.delete-btn{background-color:#ff3b30;color:#fff}
.delete-btn:hover{background-color:#c12a23}
#edit-modal,#confirm-delete-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#2c2c2e;padding:30px;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,0.5);display:none;z-index:1000;width:90%;max-width:400px}
#edit-modal textarea,#edit-modal input{width:100%;padding:10px;margin-bottom:15px;border:1px solid #3a3a3c;border-radius:10px;background-color:#1c1c1e;color:#f5f5f5;font-size:1rem;max-block-size: 100px;max-width: 350px;}
#edit-modal button,#confirm-delete-modal button{padding:12px 20px;border:none;border-radius:10px;cursor:pointer;font-size:1rem}
#modal-options{display:flex;justify-content:center;gap:10px;margin-top:10px}
#save-edit-btn{background-color:#34c759;color:#fff}
#save-edit-btn:hover{background-color:#28a745}
#cancel-edit-btn,#cancel-delete-btn{background-color:#ff3b30;color:#fff}
#cancel-edit-btn:hover,#cancel-delete-btn:hover{background-color:#c12a23}
#confirm-delete-btn{background-color:#ffcc00;color:#000}
#confirm-delete-btn:hover{background-color:#e6b800}
#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:none;z-index:999}
#export-import-buttons{margin-bottom:20px}
#export-import-buttons button{padding:12px 20px;font-size:1rem;border:none;border-radius:10px;cursor:pointer;background-color:#007aff;color:#fff;margin:5px;transition:background-color 0.3s ease}
#export-import-buttons button:hover{background-color:#005bb5}
#import-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#2c2c2e;padding:30px;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,0.5);display:none;z-index:1000;width:90%;max-width:400px}
#import-modal textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #3a3a3c;border-radius:10px;background-color:#1c1c1e;color:#f5f5f5;font-size:14px;    max-block-size: 100px;max-width: 350px;}
#import-modal button{padding:12px 20px;border:none;border-radius:10px;cursor:pointer;font-size:1rem}
#import-modal #import-save-btn{background-color:#34c759;color:#fff}
#import-modal #import-save-btn:hover{background-color:#28a745}
#import-modal #import-cancel-btn{background-color:#ff3b30;color:#fff}
#import-modal #import-cancel-btn:hover{background-color:#c12a23}
.notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);background-color:#34c759;color:#fff;padding:15px;border-radius:10px;font-size:1.1rem;font-weight:bold;display:none;z-index:1001;max-width:80%;min-width:250px;text-align:center;transition:opacity .3s ease-in-out}
.completed{color:#8e8e93}
#export-import-sort-container{display:flex;justify-content:center;align-items:center}
#sort-by-select{padding:12px 15px;font-size:1rem;border:1px solid #3a3a3c;border-radius:10px;background-color:#2c2c2e;color:#f5f5f5;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-shadow:0 2px 4px rgba(0,0,0,0.5);transition:background-color 0.3s ease,border-color 0.3s ease;width:200px}
#sort-by-select:hover{background-color:#3a3a3c;border-color:#007aff}
#sort-by-select:focus{outline:none;background-color:#3a3a3c;border-color:#007aff;box-shadow:0 2px 6px rgba(0,122,255,.6)}
/* Animation for task removal */
.fade-out { opacity: 0; visibility: hidden; transition: opacity 10s ease-out, visibility 0s 10s; }
.completed-task { background-color: #1d2d22; }
.no-tasks-message {
color:fff;
display: flex;
justify-content: center;
background-color: #007aff;
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
font-size: 16px;
}

.no-tasks-message i {
margin-right: 10px;
font-size: 20px;
}

/* Caution message style */
.caution-message {
color: #ffcc00;
background-color: #2c2c2e;
padding: 15px;
margin-bottom: 15px;
border-radius: 10px;
font-size: 1rem;
border: 1px solid #ffaa00;
text-align: center;
font-weight: bold;
line-height: 1.5;
}

/* Style for the error alert */
.error-message {
background-color: rgba(248, 215, 218, 0.9); /* Slightly transparent for blur effect */
color: #721c24;
border: 1px solid #f5c6cb;
padding: 15px;
margin-top: 10px;
border-radius: 5px;
font-size: 14px;
display: none; /* Hidden by default */
width: 100%;
max-width: 400px;
text-align: center;
margin: 20px auto;
box-sizing: border-box;

/* Z-index to ensure it's above other content */
position: fixed; /* Fixes the error message in the viewport */
top: 10%; /* You can adjust this value to control vertical positioning */
left: 50%; /* Centers the message horizontally */
transform: translateX(-50%); /* Ensures perfect centering */
z-index: 9999; /* Ensures it appears above all other elements */

/* Fade-out transition */
opacity: 1;
transition: opacity 0.3s ease-out;
}

/* Style for error message when it's visible */
.error-message.show {
display: block;
opacity: 1;
}

/* Style for error message when it's hidden */
.error-message.hide {
opacity: 0;
display: none;
}