:root {
  --dark-background: #000410;
  --dark-background-half: #00041080;
  --light-background: #f0f0f0;
  --light-background-half: #f0f0f080;
}

@media (prefers-color-scheme: dark) {
  html,
  #issues-container > div,
  .preview {
    background-color: var(--dark-background);
  }
  #toolbar.ready {
    background-color: var(--dark-background-half);
  }
  body.preview-active button#github-login-button.highlight {
    /* background-color: #008080; */
    /* border-width: 0; */
    animation: highlight-dark-mode 1s ease-in-out infinite alternate;
  }
}

@media (prefers-color-scheme: light) {
  #grid {
    opacity: 0.25;
  }
  #issues-container > div,
  .preview {
    background-color: var(--light-background);
  }
  #toolbar.ready {
    background-color: var(--light-background-half);
  }
  body.preview-active button#github-login-button.highlight {
    animation: highlight-light-mode 1s ease-in-out infinite alternate;
  }
}

@keyframes highlight-dark-mode {
  from {
    background-color: #808080;
    box-shadow: 0 0 24px 0px #808080;
  }
  to {
    background-color: #000;
  }
}
@keyframes highlight-light-mode {
  from {
    background-color: #bfbfbf;
  }
  to {
    background-color: #fff;
    box-shadow: 0 0 24px 12px #fff;
  }
}