style.css

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
  overflow-y: scroll;
}

.app::-webkit-scrollbar {
  width: 0 !important;
}

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

#msg {
  color: red;
}

.todo-footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(25, 25, 25);
color: white;
font-family: Arial;
height: 30px;
padding-top: 30px;
padding-bottom: 45px;
  text-align: center;
}

a{
  text-decoration: none;
 color: #fff;
}

a:hover{
  text-decoration: underline;
  color: #abcea1;
}