body,html{
    margin:0px;
    padding: 0px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:white;
/*BG*/
background : linear-gradient(0deg, rgba(35, 31, 32, 1) 0%, rgba(60, 59, 60, 1) 27.04%, rgba(88, 89, 91, 1) 53.07%, rgba(68, 67, 68, 1) 67.41%, rgba(44, 41, 42, 1) 87.89%, rgba(35, 31, 32, 1) 100%);
background : linear-gradient(45deg, rgba(65, 64, 66, 1) 0%, rgba(40, 37, 38, 1) 44.63%, rgba(35, 31, 32, 1) 53.07%, rgba(56, 54, 56, 1) 81.6%, rgba(65, 64, 66, 1) 100%);
 
background-repeat:no-repeat;
background-attachment: fixed;


scroll-behavior: smooth;

/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey; 
    border-radius: 20px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(92, 92, 92); 
    border-radius: 20px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #2e2e2e; 
  }
  
}




 




.header{
    text-align: center;
}

.header img{margin-top:25px;margin-bottom: 25px;}


.taskContainer{
    max-width: 500px;
    margin:0 auto;
    /* border: solid 2px white; */
    border-radius: 15px;
max-height: 600px;
overflow-y: auto;
}




.btn{
    background:#231F20; color: white; 
    font-size: 20px; font-weight: bold;
    padding: .5em 3em;
    margin: 10px;
}

.taskLine{width: 90%; background-color: #231F20; color: white; margin:0 auto; margin-bottom: 10px;padding:5px;}
.taskBox{width:30px;height: 30px; vertical-align:baseline}
.taskLine {font-size: 20px;}
.task{display: inline;vertical-align: top;top:5px;position: relative;}
.trash{float: right;cursor: pointer;}

.checkbox{cursor: pointer;}

.off{display: none;}
.done{text-decoration: line-through;}


#prompt{
    margin:0 auto; 
    width: 80%;
    max-width: 500px;
} 

#prompt input{
   margin: 5px;
    width: 100%;
    min-height: 50px;
    font-size: 22px;
}