* {
  margin: 0;
  padding: 0;
  transition: all 0.2s ease;
}
body {
  display: grid;
  place-items: center;
  background-color: #202020;
  width: 100%;
  height: 100dvh;
  color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
}
body .container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  width: 500px;
}
@media only screen and (max-width: 500px) {
  body .container {
    width: 300px;
  }
}
body .container form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
body .container form .new-task-title {
  color: #3f3f3f;
  flex: 1;
  border: 2px solid #3f3f3f;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: #202020;
}
body .container form .new-task-title:focus {
  outline: none;
  background: #3f3f3f;
  color: #c0c0c0;
}
body .container form button {
  color: #3f3f3f;
  background: #fc3;
  border-radius: 10px;
  border: 2px solid #fc3;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
body .container form button:hover {
  background: transparent;
  color: #fc3;
}
body .container #list {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 10px;
}
body .container #list li {
  width: 100%;
  background-color: #84d5ed;
  border-radius: 10px;
}
body .container #list li label {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 25px;
  color: #202020;
}
body .container #list li label .check-box {
  width: 30px;
  aspect-ratio: 1;
}
body .container #list li label .taskTitle {
  flex: 1;
  overflow-x: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  mask: linear-gradient(-90deg, transparent 0%, #f5f5f5 20%);
  -webkit-mask: linear-gradient(-90deg, transparent 0%, #f5f5f5 20%);
}
body .container #list li label .deleteBtn {
  border-radius: 5px;
  background: #f66;
  border: 2px solid #f66;
  color: #f5f5f5;
  cursor: pointer;
}
body .container #list li label .deleteBtn:hover {
  background: #df2525;
  border-color: #df2525;
  scale: 1.1;
}