button{
  cursor: pointer;
  border: 1px solid rgb(0, 0, 0);
  font-size: 16px;
  color: rgb(0, 0, 0);
  border-radius: 5px;
  font-weight: bold;
  padding: 2px 8px;
}
body{
  font-family: Arial;
  background-color: rgb(53, 53, 53);
}

h1 {
  color: white;
}

.js-div {
  width: 600px;
}

.js-par {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  width: 600px;
  font-weight: bold;
}

.due-date {
  color: rgb(201, 255, 8);
  cursor: default;
}

.remove-but {
  background-color: red;
  border: 1px solid rgb(0, 0, 0);
  font-size: 16px;
  color: white;
  border-radius: 5px;
}
.remove-but:hover, .js-add-button:hover {
  opacity : 0.7;
}

.todo-name {
  width: 255px;
  overflow-wrap: break-word;
  color: rgb(3, 226, 255);
  cursor: default;
}

.js-add-button {
  background-color: rgb(46, 128, 221);
  border: 1px solid rgb(0, 0, 0);
  font-size: 16px;
  color: rgb(248, 248, 248);
  border-radius: 5px;
}
.js-add-button:active, .remove-but:active {
  opacity: 0.5;
}