*{
            box-sizing: border-box;
}
body{
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 40px;
}
.container{
            background: #fff;
            padding: 35px;
            border-radius: 10px;
            width:600px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            
}

h1{
            text-align: center;
            margin-bottom: 20px;
}
form{
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
}
input[type="text"]{
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
}
button{
            border: none;
            border-radius: 5px;
            color: #fff;
            background-color: #007bff;
            font-size: 15px;
}
button:active{
            transform: scale(0.90);
}
button:hover{
            background-color: #0056b3;
}
ul{
            list-style: none;
            padding: 0;
            margin: 0;
}
li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
}
/* “ถ้า <li> ตัวนั้นมีคลาสชื่อ completed → ให้จัดรูปแบบ <span> ที่อยู่ข้างในมันให้เป็นตัวอักษรถูกขีดฆ่าและเป็นสีเทา” */
li.completed span{
            text-decoration: line-through;
            color: gray;
}
.delete-btn{
            background-color: #dc3545;
            padding: 6px 10px;
}
.delete-btn:hover{
            background-color: #b02a37;
}
.alert{
            background-color: #d1e7dd;
            border: 1px solid #badbcc;
            color: #0f5132;
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
}
.hidden{
            display: none;
}
.col{
            display: flex;
            flex-direction: column;
            font-size: 13px;
}
.col input{
            font-size: 13px;
            width: 250px;
            margin-bottom: 5px;
}

.form-label{
            font-size: 14px;
}
.input-group input{
            width: 80px;
            margin-bottom: 3px;
}
.resetBtn{
            display: flex;
            flex-direction: column;
            gap: 5px;
}
.Resetred{
            background-color: #dc3545;
}
.Resetred:hover{
            background-color: #b02a37;
}
.countdownForm{
            padding: 5px 40px;
            display: flex;
            justify-content: center;
}
.card-body{
            
            padding-bottom: 5px;
}
.Remaining{
            display: flex;
            justify-content: center;
            gap: 3px;
            font-size: 18px;
            color: #ccc;
}
h4{
            text-align: center;
            font-size: 15px;
            color: #696969;
}
.Remaining span{
            color: #007bff;
}
.clock{
            text-align: end;
}
.clock:hover{
            transform: scaleY(1.20);
            color: #dc3545;
}
h1:hover{
            color: #ccc;
}