* {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none; /* Removes bullet points */
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes default padding */
}

.header-container {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid #cecece;
    padding: 0 20px 0 20px;
}

.header-container h1 {
    font-size: x-large;
    color: #7634d9;
    font-weight: 900;
}


.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.todo-form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.input-form {
    height: 50px;
    width: 45%;
    margin: 20px 0;
    
    /* Ensure uniform border */
    border: 2px solid #cecece;  
    border-radius: 10px;

    /* Optional: Improve input focus */
    outline: none;
    padding: 0 20px;
    box-sizing: border-box;

}

.input-form:focus {
    border-color: #888; /* Slightly darker when focused */
}

button.submit-button {
    width: 15%;
    height: 50px;
    border-radius: 10px;
    background-color: #7634d9;
    border-color: #7634d9;
    margin-left: 5px;
    color: white;
    font-weight: 700;
    font-size: large;
}

ul.main-list-container {
    display: flex;
    margin: 0;
    width: 60%;
    flex-direction: column;
    align-items: center;
}

.main-list-container li.list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    width: 100%;
    border: 2px solid #cecece;
    border-radius: 10px;
    margin-top: 5px;
    padding: 0 20px;
    box-sizing: border-box; /* Avoid grow the container with padding.*/
    font-size: x-large;
}

.main-list-container li.list.gray-background{
    background-color: #cecece;
}

.gray-background-two {
    background-color: #e3e3e3;
}

.far.fa-square, 
.far.fa-check-square{
    margin-right: 10px;
    color: #7634d9;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}

.pagination-link {
    margin:0 10px;
}