@font-face {
    font-family: tomatoe;
    src: url(tomatoes-font/Tomatoes-O8L8.ttf);
}

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-color: rgb(240, 181, 181);
    font-family: 'tomatoe', sans-serif;
}

.input-container {
    display: flex;
    gap: 10px;
}

li {
    font-family: sans-serif;
    font-variant-caps: small-caps;
}

.list-object {
    text-wrap: pretty;
    max-width: 150px;
}

.completed {
    text-decoration: line-through;
    opacity: 0.6;
}

p {
    font-family: sans-serif;
}


button {
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #ddd;
}

li {
    animation: fadeIn 0.3s ease;
}

ul {
    border: red solid 2px;
}

h3 {
    text-decoration: underline;
}

p {
    display: flex;
}

#delDone {
    display: flex;
    justify-self: center;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    #app {
        padding: 10px;
        width: 95%;
    }
}