@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f1f1f1;
  }

  /* input boxes */
  input, select, textarea {
    background-color: #232323 !important;
    color: #f1f1f1 !important;
    border: #121212 !important;
  }

  /* unstriped "table" list */
  li.list-group-item {
    background-color: #121212 !important;
    color: #f1f1f1 !important;
    border-color: #454545 !important;
  }

  /* event image */
  img#eventImage {
    background-color: #232323 !important;
    border-color: #454545 !important;
  }

  /* Update the table heading background color and text color */
  .table-striped thead th {
    background-color: #121212;
    color: #f1f1f1;
    border-bottom-color: #f1f1f1 !important;
    border-bottom-width: 2px;
  }

  /* Change the table background color and text color for dark mode */
  .table-striped {
    background-color: #121212;
  }

  .table-striped tr {
    border-color: #454545 !important;
  }

  .table-striped td {
    color: #f1f1f1 !important;
  }

  /* Change the striped row background color for dark mode */
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Optionally, change the hover row background color for dark mode */
  .table-striped tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  #leaderboardMarker {
    filter: drop-shadow(0px 4px 4px rgba(47, 47, 47, 1))
  }

  .modal-content {
    background-color: #121212;
  }

  .modal-content div {
    border-color: #454545 !important;
  }

  .trophy-delta {
    background-image: linear-gradient(315deg, #333 25%, transparent 25%, transparent 50%, #333 50%, #333 75%, transparent 75%, rgba(0, 0, 0, 0));
    background-size: 50px 50px;
  }
  
  .label, .player-dot {
    background-color: #111 !important;
  }

  .line-border {
    border-top-color: white !important;
  }

  #boxPlotContent {
    border-left-color: white !important;
  }

  .home-item {
    background-color: #222 !important;
  }
}

@media (prefers-color-scheme: light) {
  .trophy-delta {
    background-image: linear-gradient(315deg, #eee 25%, transparent 25%, transparent 50%, #eee 50%, #eee 75%, transparent 75%, rgba(0, 0, 0, 0));
    background-size: 50px 50px;
  }
}