body{
    font-family: 'Raleway', sans-serif;
    color: #fff;
    background-color: #272822
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Caveat', cursive;
}

.navbar{
    background-color: #272822 !important;
}
.navbar-brand span{
    font-weight: bolder;
    color: #da2d2d !important;
    white-space: pre-wrap;
}

.card{
    background-color: #272822;
    border: 0;
 
    /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 1); */
    box-shadow: 
       inset 0 0em 1em rgba(0,0,0,0.1), 
             0 0  0 2px rgb(255,255,255,.4),
             0.3em 0.3em 1em rgba(0,0,0,0.3)
   
  
}
.card-header{
    background-color: #272822 !important;
    border-bottom: 1px solid rgb(103 101 101 / 28%) !important;
}
.card-footer{
    background-color: #272822 !important;
    border-top: 1px solid rgb(103 101 101 / 28%) !important; 
}

.mark-heading{
    background-image: linear-gradient(120deg, #da2d2d, #da2d2d );
  background-repeat: no-repeat;
  background-size: 100% .4em;
  background-position: 0px 88%;
}

.task-input{
    background: transparent;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid rgb(255,255,255,.4);
    border-radius: 0;
    color: #fff;

}

.task-input:focus{
    background: transparent;
    box-shadow: none;
    border-bottom-color: #da2d2d ;
    color: #fff;
}

.btn-submit {
    background: #da2d2d;
    color: #fff;
    font-weight: bold;
    transition: all .4s;
}
.btn-submit:hover {

    box-shadow: 0px 0px 2px #000;
    border: 1px solid #da2d2d;
    color: #fff;
    font-weight: bold;
}
.btn-submit:focus {

    box-shadow: none;
}
.list-group{
    background: transparent;
}
.item-link{
    color: #da2d2d;
    cursor: pointer;
}
.item-link :hover{
    color: #da2d2d !important;
}
.list-group-item {
     color: #fff;
     background: transparent;
     border: 1px solid rgb(82 82 82 / 32%)
    }