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

body {
    background-color: #fefae0;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.content {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    font-size: 1.3rem;
    color: #fff;
    background: #540b0e;
    max-width: 800px;
    padding: 2rem 3rem;
    border-radius: .5rem;
}

/* Champs du formulaire */
#form .input-field {
    padding: .2rem .5rem;
    font-size: 1.3rem;
    border: none;
    background-color: #540b0e;
    color: #fefae0;
    border-bottom: 1px solid #fefae0;
}

#form .input-field::placeholder {
    color: #fefae088;
}

/* le bouton d'envoi du formulaire */
#form .btn {
    padding: .25rem .5rem;
    font-size: 1.3rem;
    background-color: #fefae0;
    color: #540b0e;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#form .btn:hover {
    background-color: #fefae0aa;
}

/* ligne de tâche (élément) ajoutée */
#task-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    padding-bottom: .25rem;
    margin-bottom: 2rem;
    border-bottom: 3px solid #fefae0;
}

.anime-up {
    animation: showup 1s ease;
}

.anime-down {
    animation: showdown 1s ease;
}

/* bouton de suppression d'élément */
.delete-btn {
    padding: .25rem;
    border-radius: 5px;
    transition: background-color .5s ease;
    border: none;
    background-color: transparent;
}

.delete-btn:hover {
    background-color: #fff3;
    cursor: pointer;
}

.delete-btn:hover span {
    color: #f00;
}

.delete-btn span {
    color: #fff;
    vertical-align: middle;
    transition: color .5s ease;
}

/* animation pour faire apparaitre un élément lors de son ajout */
@keyframes showup {
    from {
        transform: translateX(-50px) scale(0);
    }
    to {
        transform: translateX(0) scale(1);
    }
}

/* animation pour faire disparaitre un élément lors de sa suppression */
@keyframes showdown {
    to {
        transform: translateX(-50px) scale(0);
    }
}