@media (min-width: 544px) {  
  h5 {font-size:1.5rem;} /*1rem = 16px*/
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h5 {font-size:2rem;} /*1rem = 16px*/
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h5 {font-size:2.5rem;} /*1rem = 16px*/
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h5 {font-size:3rem;} /*1rem = 16px*/    
}








.card-title task-name {
    font-size: smaller;
    margin: 0;
}

.push-right{
    float:right;
}

.btn-task{
    font-size:x-small;
    visibility: visible; 
    opacity: 0.2;
    transition: visibility 0s, opacity 0.2s linear;
    padding:2px;
}

.alert.task{
  padding:2px;
  margin:2px;
}


.btn-task:hover  { 
  visibility:visible;
  opacity: 1;
}

.task-current{
    background-color: khaki;
}

.task-urgent{
    background-color:lightsalmon;
}

.task-complete{
    background-color:whitesmoke;
}

ul.task,li.task{
    list-style:none;
  }
  ul.task{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }
  ul.task li {
    text-decoration:none;
    border: 1px solid #d0d060;
    color:#000;
    background:#ffc;
    display:block;
    width:18em;
    padding:0.2em;
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    transition: transform .15s linear;
  }

  ul.task.complete li {
    background: #e0e0e0;
    color: #c0c0c0;
  }

  ul.task li{
    margin:1em;
  }

  ul.task li.complete {
    background: #e0e0e0;
    color: #c0c0c0;
  }


  ul.task li:hover,ul li:focus{
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
    transform: scale(1.25);
    position:relative;
    z-index:5;
  }

  li.task .h4{
    font-size: small;
    font-weight: bold;
  }

  li.task p{
    font-size: smaller;
  }

  li.task .project{
    font-size: smaller;
    font-style: italic;
  }

  .accordion-button.task{
    padding: 3px;
  }