main.css

:root {
    --clr-primary: rgb(54, 112, 199);
    --clr-light: #f4f4f4;
    --clr-dark: #333;
    --clr-warning: rgb(99, 36, 36);
    --clr-danger: #ff0000; 
  }
  
  *,
  *::before,
  *::after {
    font-family: inherit;
    box-sizing: border-box;
  }
  
  body {
      /* This sets up the grid to be 4 columns wide with 2 rows, then sets equal spacing on left and right, with minimum width in middle */
    margin: 0;
    font-family: "Work Sans", sans-serif;
    font-weight: 300;
    font-size: 1.5rem;

    background: linear-gradient(to right, #0a018d, #038815);
    color: var(--clr-light);
    display: grid;
    grid: "header header header header" auto "...... lists  active ......" auto/1fr minmax(100px, 300px) minmax(250px, 500px) 1fr;
  }
  
  .title {
    grid-area: header;
    text-align: center;
    font-size: calc(7vw + 2rem);
    font-weight: 900;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 2px;
    margin: .1em 0 0.5em;
  }
  
  .all-tasks {
    grid-area: lists;
  }
  
  .task-list {
    font-size: 1.5rem;
    font-weight: 110%;
    line-height: 1.2;
    list-style: circle;
    padding-left: 1.1em;
  }

  .task-list-title {
      font-size: 1.5rem;     
  }

  .list-name {
    cursor: pointer;
}

.list-name:hover {
    opacity: 0.7;
}

  form {
      display: flex;
  }

  .btn {
      cursor: pointer;
      background: 0;
      border: 0;
      padding: 0;
      color: inherit;
      font-size: 1rem;;
  }

  .btn.create {
      font-size: 1.5rem;
      font-weight: 900;
      margin-right: 0.25em;
      transition: opacity 250ms ease-in;
  }

  .btn.create:hover {
      opacity: 0.7;
  }

  .btn.delete {
    opacity: 0.7;
    font-size: 1.2rem;
    transition: color 200ms, border 100ms;
    margin-bottom: 5px;
}

.btn.delete:hover {
    color: var(--clr-warning);
    border: 2px solid red;
}

.btn.deleteTask {
    opacity: 0.7;
    font-size: 1.5rem;
    transition: color 200ms;
    position: absolute;
    right: 10px;    
}

.btn.deleteTask:hover {
    color: var(--clr-danger);
}

  .new {
      /* the new text box area, remove border, and add a bottom-border, set display order for Flex property on Form so this comes second after button */
      background: transparent;
      border: 0; 
      color: inherit;
      border-bottom: 1px solid currentColor;
      font-size: inherit;
      outline: none;
      padding: 0.25em;

      transition: border-bottom 150ms ease-in;
      order: 2;
  }

  .new::placeholder {
      opacity: 0.4;
  }
/* the .new:focus sets a thicker bottom border to indicate which one is in use, visual effect only */
  .new:focus {
      border-bottom-width: 3px;
  }

  .new:focus::placeholder{
      /* this sets the place holder with slight opacity as another visual indicator of text box in focus */
      opacity: 0.2;
  }

  .new.list {
      font-size: 1.2rem;;
  }

  .new.task {
      margin-bottom: 0;
  }

  .active-list {
font-weight: 700;
  }

  .todo-list {
      /* declare variable named spacer to set even spacing for this div and call it in other properties */
  --spacer: 2rem;
  grid-area: active;
  background: var(--clr-light);
  color: var(--clr-dark);
  }

  .todo-header {
      /* use spacer variable, set darker background, use flex to line up items and space evenly */
      padding: var(--spacer);
      background: #e4e4e4;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .list-title {
      margin: 0 1em 0 0;

  }

  .task-count {
      margin: 0;
      font-size: 1rem;
  }

  .todo-body {
      padding: var(--spacer);
      position: relative;
  }

  .new-task-creator .create {      
      color: var(--clr-primary);
  }

[type="checkbox"] {
    /* hide checkboxes to create custom checkbox*/
    opacity: 0;
    position: absolute;
}
/* flex by default will fill entire content */
.task label {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.task {
    position: relative;
    margin-bottom: 1.25em;
}

.task::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -0.5em;
    height: 1px;
    background: currentColor;
    opacity: .1;
}

.custom-checkbox {
    --size: 0.75em;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: var(--size);
    cursor: pointer;
    border: 2px solid currentColor;
    border-radius: 50%;
    transform: scale(1);
    transition: transform 200ms ease-in-out; /* set transistion effect for grow and return to normal after hover */
}
/* set a hover function to grow the transform from 1 to 1.2. Set it to the Task div but apply affect to .custom-checkbox */
/* also apply to all checkbox functions and the label after it when it's in focus (includign for tab not just pointer)*/
.task:hover .custom-checkbox, [type="checkbox"]:focus + label .custom-checkbox{
    transform: scale(1.2);
    color: var(--clr-primary);
}
/* when checkbox is checked fill the middle but have a white ring using box-shadow to create a bullet point effect*/
[type="checkbox"]:checked + label .custom-checkbox {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    box-shadow: inset 0 0 0px 2px white; 
}

/* when the checkbox gets checked, set opacity to half */

[type="checkbox"]:checked + label {
    opacity: 0.5;
}

/* set-up strike through line, and add transform animation so the line starts from right and goes left over 150ms */

.task label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    left: 1.5em;
    top: 50%;
    height: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 150ms ease-in;
}
/* setup animation to go left */
[type="checkbox"]:checked + label::after {
    transform: scaleX(1);
    transform-origin: left;
}

.delete-stuff {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -35px;
    color: var(--clr-light);
}