/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
// Tasks
//
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.tasks {
   position: fixed;
   top: 0;
   left: -80vh;
   height: 100vh;
   width: 80vh;
   background-color: var(--background-blurbox-color);
   backdrop-filter: blur(var(--blur-amount));
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
   transition: .8s;
   z-index: .9;
}
.taskShadow {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100vw;
}
.taskContent {
   overflow: scroll;
   display: grid;
   position: relative;
   grid-template-columns: 50% 50%;
   font-family: "Nunito";
   z-index: 2;
}
.task-block {
   width: 92%;
   height: 37vh;
   margin: 2vh auto;
   text-align: center;
   box-sizing: border-box;
   position: relative;
   padding: 6vh 2vh;
   font-size: 1.2rem;
   line-height: 1.5rem;
   background-image: url("../images/Tasks/sticky-note.png");
   background-size: cover;
   overflow: scroll;
   transition: 0.5s;
}
.task-block:hover {
   filter: drop-shadow(5px 5px 5px #bbb);
   transform: translateX(-.5vh) translateY(-.5vh) scale(1.02);
   font-size: 1.1em;
   line-height: 1em;
}
.task-info-a { grid-area: a; }
.task-info-a { grid-area: b; }
.task-info-a { grid-area: c; }
.task-info {
   display: grid;
   grid-template-areas:
               "a b"
               "c c";
}
.task-info-img {
   height: 10vh;
   margin: auto;
}
.task-submit-depth-button {
   position: absolute;
   bottom: 2vh;
   left: 2vh;
   margin: 0;
   padding: 1vh 2vh;
   border-radius: var(--border-radius);
   font-size: 2vh;
}

.aTaskIsReady {
   height: 10vh;
   position: absolute;
   top: 14vh;
   right: -12vh;
   z-index: 30;
   transition: .5s;
   opacity: 0;
   pointer-events: none;
}