body {
  margin: 0;
  padding: 0;
  background-image: url('./../img/./tile.jpg');
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.main-heading {
  font-family: 'Permanent Marker', cursive;
  font-size: 3rem;
}

#new-task-form {
  padding: 3rem 5rem;
  background-image: url('./../img/./formbg.jpg');
}

.note-container {
  position: relative;
  animation-duration: 2s;
  animation-name: fadeIn;
}
 
.note-container .delete-item{
  display: none;
}

.note-content {
  position: absolute;
  top: 1rem;
  left: 0px;
  height: 100%;
  width: 180px;  
}

.note-container:hover .delete-item {
  display: block;
}

.task-content {
  height: 86%;
  width: 180px;
}

.my_scroll {
  overflow-y: auto;
}

@keyframes fadeIn {
  from {opacity: 0.1;}
  to   {opacity: 1;}
}