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

body {
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    position: fixed;
    left: 50%; /* Centraliza horizontalmente */
    top: 20%;
    transform: translateX(-50%); /* Ajusta a posição para ficar perfeitamente centralizado */
}

.container h1 {
    margin: 2rem 0 2rem 3.2rem;

}

.container-input {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn, .remove-btn {
    padding: 0.5rem;
    background-color: rgb(100, 198, 100);
    border-radius: 1rem;
    border: none;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}    

.btn:hover, .remove-btn:hover {
    border-radius: 1.5rem;
    background-color: rgb(80, 180, 80); /* Efeito de hover mais suave */
}

.input {
    padding: 1rem;
    border-radius: 1.3rem;
    border: 1px solid #ccc; /* Melhor feedback visual */
    outline: none;
}

.ul {
    margin-top: 1rem;
    list-style-type: none;
    width: 100%;
    max-width: 400px;
    
}

.ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    color: white;
}

.ul button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background-color: rgb(198, 100, 100);
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.ul button:hover {
    background-color: rgb(255, 80, 80); /* Melhor contraste no hover */
}

.sucesso {
    border: 2px solid green;
}

.error {
    border: 2px solid rgb(255, 121, 121);
}