/* These are the styles for the whole Task Manager page */
*{
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* These are the style for the body in the Task Manager page */
body{
    background-color: #DBC1AC;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 288px;
}
/*This style defines objects that have the class left that are positioned in the left corner, giving them the with of 10%*/
.left{
    float: left;
    width: 10%;
}

.right{
    float: right;
    width: 30%;
}

/* These are the styles for the elements that have the todo-box class in the Task Manager page */
.todo-box{
    position: relative;
    width: 450px;
    height: 550px;
    border-radius: 30px;
    background: bisque;
    box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
    10px, 10px, 70px rgba(0, 0, 0, 0.25),
    inset 5px 5px 20px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
    color: white;
}

/* These are the styles for specificly for the list elements that have the class todo-box in the Task Manager page */
.todo-box li{
    position: relative;
    width: 22rem;
    display: flex;
    align-items: center;
    background: #af1ff1;
    margin: 15px 0;
    padding: 10px 10px 10px 45px;
    min-height: 45px;
    cursor: pointer;
    border-radius: 22.5rem;
    color: #fff;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
    inset 2px;
}

/* These are the styles for more specific lowercase Roman numeral list elements with the class todo-box in the Task Manager page */
.todo-box li i{
    position: absolute;
    right: -40px;
    width: 30px;
    height: 30px;
    background: rebeccapurple;
    border-radius: 40%;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25),
    inset 2px 2px 5px rgba(255, 255, 255, 0.25),
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

/* These are the styles for before more specific lowercase Roman numeral list elements that have class todo-box in the Task Manager page */
.todo-box li i::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 2px;
    background: #fff;
    transform: rotate(-45deg);
}

/* These are the styles for more specific lowercase Roman numeral list elements after with the class todo-box in the Task Manager page */
.todo-box li::before{
    content: '';
    position: absolute;
    left: 8px;
    width: 30px;
    background: #2f363e;
    border-radius: 40%;
}

/* This is a style for done class lists elements that are in the class todo-box in the Task Manager page */
.todo-box li.done{
    background: red;
}

/* These are styles for before list elements with class done that also have class todo-box in the Task Manager page */
.todo-box li.done::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(315deg);
}

/* These are styles for the paragraph elements in the Task Manaer page */
p{
    background-color: bisque; 
    color: #5a2e0a;
    height: 180px;
    text-align: center;
    margin: auto;
    width: 350px;
    padding: 20px;
    border-radius: 15px;
    font-size:xxx-large;
    background-color: bisque; 
    text-align: center; 
    position: absolute;
    right: 32rem; 
    top: 4rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/* These are the styles for the headings 2 elements in the Task Manager page */
h2{
    width: 100%;
    font-weight: 600;
    text-align: center;
    color: #fff;
    font-size: 1.75rem;
    margin-bottom: 10px;
}

/* These are the styles for the elements with the id that of inputBx in the Task Manager page */
#inputBx{
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    padding: 15px 20px;
    border-radius: 30px;
    font-size: 1rem;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.25), 
    inset 2px 2px 5px rgba(0, 0, 0, 0.5), 
    inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}

/* These are the styles for the nav elements in the Task Manager page */
nav{
    width: 80px;
    background-color: bisque;
    color: #38220F;
    height: 80px;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    position: absolute;
    left: 2rem;
    top: 2rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/* These are the styles for the elements that have a class tiger in the Task Manager page */
.tiger {
    margin: auto;
    padding: 10px;
    position: relative;
    top: 42rem;
    display: block;
  }

/* These are the styles for the elements that have id that of list in the Task Manager page */
#list{
    position: absolute;
    margin-top: 20px;
    height: 350px;
    overflow-y: auto;
    padding-right: 10px;
    width: 420px;
}

/* This is a style for the scrollbar track in the Task Manager page */
::-webkit-scrollbar-track{
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

/* This style is for the scrollbar in general in Task Manager page */
::-webkit-scrollbar{
    width: 8px;
}

/* This is a style for the scrollbar thumb in Task Manager page */
::-webkit-scrollbar-thumb{
    background: #fff;
}

/* This style adds padding to container class elements in Task Manager page */
.container {
    padding: 16px;
  }
  
  /* The modal (background) */
  .modal {
    /* These make it hidden by default */
    display: none; 

    position: fixed; 

    /* These make it sit on top */
    z-index: 1; 
    left: 0;
    top: 0;

    width: 100%; 
    height: 100%; 

    /* This enables scroll if needed */
    overflow: auto; 

    background-color: rgb(230, 196, 255);
    padding-top: 50px;
    
  }
  
  /* These are styles for the elements in class modal-content in Task Manager page */
  .modal-content {
    background-color: rgb(198, 148, 112);

    /* 5% from the top, 15% from the bottom and centered */
    margin: 5% auto 15% auto; 

    /* Could be more or less, depending on screen size */
    width: 60%; 
    border-radius: 3rem;
    padding: 26px;
    box-shadow: inset 2px 2px 16px rgba(255,255,255,.9), inset 8px 8px 9px rgba(0,0,0,.2), 5px 10px 5px rgba(0,0,0,.03), -5px -5px 25px rgba(255,255,255,.1), -2px -2px 9px rgba(100,100,100,.1), inset -2px -2px 9px rgba(255,255,255,1);
    outline: none;
      text-shadow: -2px -2px 3px rgba(0,0,0,.2), 2px 2px 3px rgba(255,255,255,1);
      transform: translateY(3px);
  }

  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }