body{
  background-image: linear-gradient(35deg, #4B0082,#00BFFF);
}

.container {
  max-width: 400px;
}

input[type=text],
input[type=text]:focus {
  color: #fff;
  border: 2px solid #fff;
  outline: none;
  background: transparent;
  max-width: 400px;
}

input[type=text]::placeholder{
  color: #fff;
}

h1{
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #fff;
}

.todos-container{
  max-height: 320px;
}

.todos-container li {
  background: #fff;
  color: #363636;
  font-weight: 500;
}

.delete {
  cursor: pointer;
}

.hidden{
  display: none;
}

.scrolling{
  overflow: scroll;
}


.scrolling::-webkit-scrollbar{
  width: 12px;
  height: 0px;
}

.scrolling::-webkit-scrollbar-track{
  background-color: transparent;
}

.scrolling::-webkit-scrollbar-thumb{
  border-radius: 20px;
  background-color: rgba(0, 0, 0,0.4);
  border:2px solid #c6c7c8;
}