todo-list/style.css

:root {
    --text-color: black;
    --background-color: white;
    --border-color: #cbcbcb;
    --hover-background: #F5F5F5;
    --form-border-color: #bbbbbb;
    --input-border-color: gray;
    --btn-background: #5F9EA0;
    --edit-btn-background: #5F9EA0;
    --del-btn-background: #800000;
    --msg-background: #dff0d8;
    --msg-border-color: #3c763d;
    --msg-text-color: #3c763d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: white;
        --background-color: #393939;
        --border-color: #4a4a4a;
        --hover-background: #3a3a3a;
        --form-border-color: #6b6b6b;
        --input-border-color: #6b6b6b;
        --btn-background: #5d7d59;
        --edit-btn-background: #5d7d59;
        --del-btn-background: #800000;
        --msg-background: #3a3a3a;
        --msg-border-color: #6b6b6b;
        --msg-text-color: white;
    }
}

body {
    font-size: 19px;
    font-family: 'Arial';
    color: var(--text-color);
    background-color: var(--background-color);
}

h2 {
    width: 45%;
    margin: 50px auto;
    color: var(--text-color);
}

table {
    width: 50%;
    margin: 30px auto;
    border-collapse: collapse;
    text-align: left;
    color: var(--text-color);
}

tr {
    border-bottom: 1px solid var(--border-color);
}

th, td {
    border: none;
    height: 30px;
    padding: 2px;
    color: var(--text-color);
}

tr:hover {
    background: var(--hover-background);
}

form {
    width: 45%;
    margin: 50px auto;
    text-align: left;
    padding: 20px; 
    border: 1px solid var(--form-border-color); 
    border-radius: 5px;
    background-color: var(--background-color);
}

.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
    color: var(--text-color);
}

.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid var(--input-border-color);
    background-color: var(--background-color);
    color: var(--text-color);
}

.task-list {
    cursor:default ;
}

.strike {
    text-decoration: line-through;
}

.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: var(--btn-background);
    border: none;
    border-radius: 5px;
}

.btn:hover {
    filter: brightness(85%);
}

.btn-group { width: 25%; }

.edit_btn {
    text-decoration: none;
    padding: 10px;
    font-size: 16px;
    background: var(--edit-btn-background);
    color: white;
    border-radius: 5px;
    width: 50%;
}

.edit_btn:hover {
    filter: brightness(85%);
}

.del_btn {
    text-decoration: none;
    padding: 10px;
    font-size: 16px;
    color: white;
    border-radius: 5px;
    background: var(--del-btn-background);
    width: 50%;
}

.del_btn:hover {
    filter: brightness(85%);
}

.msg {
    margin: 30px auto; 
    padding: 10px; 
    border-radius: 5px; 
    color: var(--msg-text-color); 
    background: var(--msg-background); 
    border: 1px solid var(--msg-border-color);
    width: 50%;
    text-align: center;
}