:root {
  --color-primary: #7287fd;
  --border-radius: 4px;
  --input-border: #dce0e8;
}

body {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: normal;
  margin: 0;
}

main {
  margin: 0 auto;
  width: calc(100vw - 4rem);
  max-width: 50rem;
  padding: 2rem;
}

.tasks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

  & input {
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    padding: 0.5rem 0.25rem;
  }

  & .name {
    flex-grow: 50;
  }

  & .date {
    flex-grow: 1;
  }

  & .context {
    flex-grow: 1;
  }

  & input[checked] {
    opacity: 0.3;
    
    & ~ input {
    opacity: 0.3
  }
}

.new-task {
  margin-top: 4rem;
}

button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.25rem 1rem;
  cursor: pointer;
}