:root {
  --light-mode-background-color-default-brightness: calc(100% - var(--background-color-default-brightness));
  --light-mode-background-color-dark-brightness: calc(100% - var(--background-color-light-brightness));
  --light-mode-background-color-default: hsl(225 0% var(--light-mode-background-color-default-brightness) / 1);
  --light-mode-background-color-dark: hsl(225 0% var(--light-mode-background-color-dark-brightness) / 1);
  --light-mode-border-color: hsl(225 0% calc(100% - var(--border-brightness)) / 1);
}
@media (prefers-color-scheme: light) {
  background {
    background-color: #fff;
    color: #000;
  }
  table a:hover > div {
    color: #000;
  }
  #rewardAmount > a {
    color: #000;
  }
  table svg path {
    fill: #000;
  }
  #logo-icon > svg {
    fill: #000;
  }
  #logo > div#logo-text > span {
    color: #000;
  }
  table button div {
    color: #000;
  }
  table[data-make-claim-rendered] button:hover > div {
    color: #000;
  }
  table[data-make-claim-rendered] button:hover {
    background-color: #80808018;
  }
  table a:hover,
  table a:hover > div {
    color: #000;
  }
  div#build > a {
    color: #000;
  }
  #rewardAmount div,
  #rewardRecipient div,
  #rewardsCount {
    color: #000;
  }
  #nextTx,
  #previousTx {
    fill: #000;
  }
  html {
    background-color: #fff;
  }
  background #grid {
    filter: invert(1);
  }
  table tbody,
  table thead {
    box-shadow: inset 0 0 96px #00000008;
  }
  .notifications .toast {
    border: 1px solid var(--light-mode-border-color);
    background-color: var(--light-mode-background-color-default);
  }
  .grid-loaded background .gradient {
    opacity: 0;
    animation: none;
  }

  #carousel > div:hover {
    color: #000;
  }
  tbody,
  thead {
    background-color: #fff;
    border: 1px solid var(--light-mode-border-color);
  }
}