* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #efefef;
}

main {
    max-width: 600px;
    margin: auto;
    padding: 20px 0 0 0;
}

/* Task input and clear section */

h1 {
    text-align: center;
}

.add-task {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: center;
}

.task-inp {
    width: 300px;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid black;
}

/* Task items */

#tasks {
    border: 1px dotted black;
    border-radius: 10px;
    margin: 20px;
}

.task-item {
    border: 1px solid black;
    border-radius: 5px;
    margin: 20px;
    padding: 10px;
}

.taskmg-btns {
    display: flex;
    max-width: 100%;
    justify-content: center;

}

.task-name {
    text-align: center;
    margin: 10px;
}

/* Common styles*/

.task-btn {
    margin: 5px;
    padding: 5px;
    width: 100px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: aliceblue;
    color: #000;
}

.task-btn:hover {
    cursor: pointer;
    color: #656558;
}

.task-btn:active {
    border-color: white;
}