body {
  background-color: rgb(32, 32, 32);
  color: #ddd;

  #home-page :is(b, h1),
  .question-title {
    color: #fff;
  }

  .page {
    footer {
      #footer {
        #github .bx {
          color: rebeccapurple;
          background-color: #ddd;
          border-radius: 50%;
        }

        .toggle:checked + .slider {
          background-color: rebeccapurple;
        }
      }
    }
  }
}

a:is(:link, :visited) {
  color: cyan !important;
}

input {
  accent-color: rebeccapurple;
}
select {
  background-color: rgb(32, 32, 32);
  color: #f0f0f0;
}

#coverage,
.unsure-label {
  color: hsl(0, 0%, 70%) !important;
}

.ongoing {
  color: hsl(0, 100%, 60%) !important;
}

table,
th,
td {
  outline: solid 1px #0f0116;
}

#home-page .app-title .username {
  color: hsl(270, 100%, 75%);
}

#home-page:has(#license-notice.visible) #main #license-notice {
  #hawaiian {
    opacity: 75%;
  }
  #license-text {
    background-color: rgb(32, 32, 32);
    color: #f0f0f0;
  }
  #license-agree-text {
    color: #0f0116;
  }
  #license-disagree-text {
    color: #c0c0c0 !important;
  }
}

#quiz .learned-tag {
  color: hsl(151, 60%, 50%);
}

.explanation-container {
  div.explanation:not(.empty) {
    color: hsl(60, 90%, 85%);

    & ~ .bx {
      color: hsl(60, 90%, 80%);
    }
  }

  textarea.explanation {
    background-color: rgb(32, 32, 32);
    color: #fff;
  }
}

.question-title {
  background-color: transparent !important;
}

#quiz.submitted {
  .question-choices {
    li.correct {
      label {
        background-color: #1ed96f24;
        color: #11ce73;
      }
    }
  }

  @media not print {
    .question.incorrect .question-title {
      color: rgb(255, 51, 51);
    }
  }
}

@media not print {
  .question.unsure .question-title {
    color: rgb(231, 231, 0);
  }
}

.panel {
  color: #ddd;
  opacity: 90%;
  background-color: rgb(48, 48, 48);
}

#review-panel {
  box-shadow: 0px 2px 8px #00000065;
}

#navbar {
  box-shadow: 0px -2px 8px #00000065;
}
#attempts-table-container {
  #attempts-table {
    td:is(.user, .timestamp) {
      color: cyan !important;
    }
  }
}
.bxs-x-circle {
  background-color: rgb(32, 32, 32);
}

@keyframes blink {
  0% {
    background-color: hsl(180, 60%, 50%);
  }
  100% {
    background-color: rgb(32, 32, 32);
  }
}

#login-form {
  background-color: rgb(32, 32, 32);
  border: 2px solid rebeccapurple;
  box-shadow: 0px 0px 0.8rem rebeccapurple;

  &.login #login-tab,
  &.register #register-tab {
    color: white;
  }

  h2 {
    color: hsl(0, 0%, 36%);
  }

  input[type="text"] {
    background-color: rgb(32, 32, 32);
    color: white;
    border: 2px solid silver;
  }

  button {
    background-color: rebeccapurple;
  }
}