:root {
  --bg-colour: #eee;
  --tick-opacity: 0.2;
  --question-bg-colour: white;
  --correct-colour: hsl(120,50%,50%);
  --partial-colour: hsl(60,20%,50%);
}

body {
  background: var(--bg-colour);
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    --bg-colour: black;
    color: white;
    --tick-opacity: 0.8;
    --question-bg-colour: black;
    --correct-colour: hsl(120,50%,40%);
    --partial-colour: hsl(60,20%,40%);
  }
}

#doughnut {
  margin: 1em;

  & .question {
    &[data-correctness="correct"] {
      
      & .wedge {
        fill: var(--correct-colour);
      }
    }
    &[data-correctness="partially correct"] {
    
     & .wedge {
      fill: var(--partial-colour);
      }
    }

    &:not(.answered) {
      opacity: 0.2;
    }
    
    & .outline {
      fill: var(--question-bg-colour);
      paint-order: stroke fill;
      stroke: currentColor;
    }

    & .ticks {
      stroke: currentColor;
      opacity: var(--tick-opacity);
    }

  }
}