.nav {
  display: flex;
  flex-flow: column;
  gap: 4rem;
  margin-bottom: 4rem;

  @media (min-width: 1024px) {
    flex-flow: row;
    justify-content: space-between;
  }

  & h1 {
    margin-bottom: 0;
  }

  & button {
    height: fit-content;
    width: fit-content;
    padding: 0 4rem;
    align-self: flex-end;
    font-size: 2rem;
    font-weight: bold;
    line-height: 4rem;
    color: var(--dark-grey);
    background-color: var(--grey);
    border-radius: 1rem;
    cursor: pointer;

    &.active {
      color: var(--light-grey);
      background-color: var(--dark-grey);
    }
    
    &:hover {
      box-shadow: 0 0 .5rem var(--black25);
    }
  }

}
.card {
  list-style: none;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-color: var(--white);

  & input {
    height: 2rem;
    line-height: 2rem;
    padding: 0;
  }

  & .card__header {
    display: flex;
    flex-flow: row;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0;

    & .card__isComplete {
      flex-shrink: 0;
      height: 2rem;
      width: 2rem;
      margin: 0 0 0 -1rem;
      appearance: none;
      background-color: var(--light-grey);
      border: 2px solid var(--button-color);
      border-radius: 1rem;
      --button-color: var(--dark-grey);
      --button-color50: var(--grey);

      &:hover {
        background-color: var(--button-color50);
        box-shadow: inset 0 0 0 2px var(--white); 
        cursor: pointer;
      }

      &:checked {
        background-color: var(--button-color);
        box-shadow: inset 0 0 0 2px var(--white); 
      }

      &.red {
        --button-color: var(--red);
        --button-color50: var(--red50);
      }

      &.yellow {
        --button-color: var(--yellow); 
        --button-color50: var(--yellow50);
      }

      &.green {
        --button-color: var(--green);
        --button-color50: var(--green50);
      }
    }

    & .card__dueDate,
    & .card__priority {
      appearance: none;
      font-weight: lighter;
      font-style: italic;    
      color: var(--dark-grey);
      font-size: 1rem; 
    }

    & .card__dueDate {
      flex: 0 0 auto;
    }

    & .card__priority {
      flex: 1;
      padding: 0;
      text-align: right;
      text-align-last: right; /* For safari */
      background-color: var(--white);
    }
  }

  & .card__textarea-wrapper {
    display: grid;

    &::after {
      content: attr(data-replicated-value) " ";
      white-space: pre-wrap;
      visibility: hidden;
    }

    & textarea {
      resize: none;
      overflow: hidden;
    }

    &::after,
    & textarea {
      grid-area: 1 / 1 / 2 / 2;
      line-height: 2rem;
    }
  }

  & .card__textarea-wrapper-title::after,
  & .card__title {
    margin: 0 0 .5rem 0;
    padding: .5rem 0;
    font-size: 2rem;
    font-weight: bold; 
  }

  & .card__textarea-wrapper-description::after,
  & .card__description {
    margin-bottom: 1rem;
    padding: 0;
    font-size: 1.5rem;
    color: var(--dark-grey);
  }

  & .card__buttons {
    display: none;
    flex-flow: row;
    gap: 2rem;
    justify-content: center;
    margin-top: 1rem;

    & button {
      height: 2rem;
      padding: 0 2rem;
      line-height: 2rem;
      border-radius: .5rem;
      background-color: var(--grey);
      color: var(--dark-grey);
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 .5rem var(--black25);
      }
  
      &.card__button-save {
        background-color: var(--green80);
        color: var(--white);
  
        &:hover {
          background-color: var(--green);
        }
      }

      &.card__button-delete {
        background-color: var(--red80);
        color: var(--white);
  
        &:hover {
          background-color: var(--red);
        }
      }
    }
  }
}

.card--new {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  margin-bottom: 0;
  background-color: transparent;
  cursor: pointer;

  & .card__add-symbol {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: bold;
    text-align: center;
    color: var(--dark-grey);
    border: 3px solid var(--dark-grey);
    border-radius: 2rem;
  }

  & .card__add-cta {
    font-size: 2rem;
    line-height: 2rem;
    color: var(--dark-grey);
  }
}
.column {
  padding: 2rem 1rem;
  background-color: var(--light-grey);
  border-radius: 1rem;

  @media (min-width: 1024px) {
    flex: 1 0 260px;
  }

  & .column__title {
    margin-bottom: 2rem;
  }

  &.overdue {
    background-color: var(--grey);
  }
}
.board { 
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  gap: 2rem;
  overflow: scroll;
  
  @media (min-width: 1024px) {
    flex-flow: row;
  }
}
/*  || RESET  */
*,
*::before,
*::after {
    box-sizing: border-box;
    border: none;
    vertical-align: baseline;
}

body {
  margin: 0;
  padding: 2rem;
}

article, 
aside, 
footer, 
header, 
menu, 
nav, 
section {
	display: block;
}

ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}


/*  || SIZES  */
html {
  font-size: 8px;

  @media (min-width: 1024px) {font-size: 10px;}
}

/*  || COLOURS  */
:root {
  --black: #0A0A0A;
  --black25: #0A0A0A44; 
  --white: #FFF;
  --light-grey: #FAFAFA;
  --grey: #E5E5E5;
  --dark-grey: #525252;
  --red: #B91C1C;
  --red50:#B91C1C88; 
  --red80: #B91C1CCC;
  --yellow: #EAB308;
  --yellow50: #EAB30888;
  --green: #4D7C0F;
  --green50: #4D7C0F88;
  --green80: #4D7C0FCC;
}

html {
  background-color: var(--white);
  color: var(--black);
}


/*  || TYPOGRAPHY */
:root,
input[type="date"],
textarea {
  font-family: Helvetica, sans-serif; 
}

body {
  font-size: 2rem; 
  line-height: 2rem;
}

h1 {
  font-size: 8rem;
  line-height: 8rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
  
h2 {
  font-size: 4rem;
  line-height: 4rem;
  color: var(--dark-grey);
}

h3 {
  font-size: 2rem;
  line-height: 2rem;
}

p {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--dark-grey);
}

/*  || UTILITIES */
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  width: clamp(320px, 90%, 500px);
  margin: auto;

  @media (min-width: 1024px) {
    width: 100%;
  }
}