style.css

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

body {
    background: url(https://images.pexels.com/photos/257092/pexels-photo-257092.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    background-size: 100vw 100vh;
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
}

.app {
    background-color: rgba(255, 255, 255, 0.3);
    border: whitesmoke solid 0.1rem;
    position: relative;
    top: 20vh;
    margin: auto;
    padding: 0 5rem 2rem 5rem;
    border-radius: 0.5rem;
    width: 50vw;
}

h1 {
    text-align: center;
    font-weight: bolder;
    font-family: 'Abril Fatface', cursive;
    text-decoration: underline;
    color:rgba(128, 0, 0, 0.7);
}

<<<<<<< HEAD
=======
#todo-container, input {
    font-family: 'Satisfy', cursive;
}

>>>>>>> master
#add-todo {
    display: flex;
    flex-direction: row;
}

@media (min-width: 768px) {
    #add-todo {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

#itemToAdd {
    width: 15rem;
    margin-right: 1rem;
    border-radius: 0.5rem;
    border: rgba(0, 0, 0, 0.7) solid 0.1rem;
}

#addButton {
    text-transform: lowercase;
    font-family: 'Satisfy', cursive;
    border-radius: 5rem;
    border-style: none;
    background-color: rgba(128, 0, 0, 0.3);
}

#todo-container {
    font-family: 'Satisfy', cursive;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

li {
    display: flex;
    flex-direction: row;
    margin-left: -2rem;
}
 
button {
    height: 1.4rem;
    width: 1.4rem;
    margin: 0.5em;
<<<<<<< HEAD
    background-color: red;
=======
    float: right;
    background-color: #CD5C5C;
>>>>>>> master
}