:root {
  --color-primary: #4f46e5;
  --color-primary-light: rgba(79, 70, 229, 0.08);
  --color-bg: #313244;
  --text-base: #cdd6f4;
  --text-secondary: #374151;
}

body {
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace, serif;

  color: var(--text-base);
  background-color: var(--color-bg);
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.badge {
  font-size: 0.9rem;
  color: var(--text-secondary);
  background-color: var(--color-primary-light);
  padding: 0 0.25rem;
  border-radius: 4px;
}

ul.tasklist {
  padding-left: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;

  & > input:checked {
    & ~ div {
      opacity: 0.5;
    }
    & ~ .content {
      text-decoration: line-through;
    }
  }
}

.priority {
  padding: 0 0.25rem;
  border-radius: 4px;
  color: #1e1e2e;
  background-color: #b4befe;

  &.priority-A {
    background-color: #f38ba8;
  }
  &.priority-B {
    background-color: #fab387;
  }
  &.priority-C {
    background-color: #a6e3a1;
  }
}

.completedDate {
  color: #a6adc8;
}

.newTaskForm {
  display: flex;
  margin-top: 2rem;

  & input {
    flex-grow: 1;
    padding: 0.5rem;
    border-radius: 4px;
    background-color: #585b70;
    color: var(--text-base);
  }
}