[data-bs-theme=dark] {
  --bs-link-color-rgb: #adb5bd;
}

html {
  scroll-padding-top: 60px;
}

form table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

form label {
  margin-right: 30px;
}

.diff-beginner {
  background-color: #a355b8;
}

.diff-easy {
  background-color: #1ec51d;
}

.diff-medium {
  background-color: #d6db41;
}

.diff-hard {
  background-color: #ba3049;
}

.diff-challenge {
  background-color: #2691c5;
}

.diff-edit {
  background-color: #ffffff;
}

.diff-box {
  color: white;
  text-shadow: 0 0 3px black;
}

.display-table {
  display: table;
}

.display-table-cell {
  display: table-cell;
}

.convert-timestamp {
  display: none;
}

.gs-ranked {
  background-color: #38abb5;
  color: white;
  border-left-width: 0 !important;
}

.common-box {
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-weight: bold;
  border: 1px solid black;
  display: flex;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.fantastic {
  background-color: #21cce8;
}

.fantastic_white {
  background-color: #e0e0e0;
}

.excellent {
  background-color: #e29c18;
}

.great {
  background-color: #66c955;
}

.decent {
  background-color: #b45cff;
}

.wayoff {
  background-color: #c9855e;
}

.miss {
  background-color: #ff3030;
}

.score-box {
  width: 100px;
  border: 1px solid black;
  height: 0.5em;
  display: grid;
}

.big-score-box {
  width: 85%;
  border: 1px solid black;
  height: 2em;
  display: grid;
  margin: 0 auto;
}

.calendar-graph {
  display: grid;
  grid-area: graph;
  grid-gap: 5px;
  grid-template-rows: repeat(7, 15px);
  grid-auto-flow: column;
  grid-auto-columns: 15px;
}

.calendar-days {
  grid-area: days;
  display: grid;
  grid-template-rows: repeat(7, 15px);
  grid-gap: 5px;
  line-height: 1em;
}

.calendar-days div:nth-child(even) {
  visibility: hidden;
}

.calendar-months {
  grid-area: months;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.calendar-legend {
  display: inline-grid;
  grid-gap: 5px;
  grid-template-rows: repeat(1, 15px);
  grid-auto-flow: column;
  grid-auto-columns: 15px;
}

.calendar-grid {
  display: inline-grid;
  grid-template-areas: "empty months"
                       "days graph";
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  margin-bottom: 5px;
}

.calendar-graph-box {
  border: 1px solid black;
}

.min-plays-0 {
  background-color: #f0f0f0;
}

.min-plays-1 {
  background-color: #b6f8ff;
}

.min-plays-10 {
  background-color: #4fe0f7;
}

.min-plays-15 {
  background-color: #06b6d4;
}

.min-plays-20 {
  background-color: #0284c7;
}

.min-plays-25 {
  background-color: #2354da;
}

.min-plays-30 {
  background-color: #4338ca;
}

.min-plays-35 {
  background-color: #642be9;
}

.min-plays-40 {
  background-color: #6d1db3;
}

.min-plays-50 {
  background-color: #4e008d;
}

.min-plays-60 {
  background-color: #3b043d;
}

.min-plays-100 {
  border: none;
  text-decoration: none;
  background-image: url("skull.5c9f140b44b1.svg");
}

[data-bs-theme=dark] .min-plays-100 {
  filter: invert(100%);
}

[data-bs-theme=dark] .min-plays-0 {
  background-color: #202020;
}

[data-bs-theme=dark] .min-plays-1 {
  background-color: #3f2005;
}

[data-bs-theme=dark] .min-plays-10 {
  background-color: #5f2222;
}

[data-bs-theme=dark] .min-plays-15 {
  background-color: #7f3f0a;
}

[data-bs-theme=dark] .min-plays-20 {
  background-color: #be5f0f;
}

[data-bs-theme=dark] .min-plays-25 {
  background-color: #fd7e14;
}

[data-bs-theme=dark] .min-plays-30 {
  background-color: #fe9e12;
}

[data-bs-theme=dark] .min-plays-35 {
  background-color: #febf3f;
}

[data-bs-theme=dark] .min-plays-40 {
  background-color: #fecd69;
}

[data-bs-theme=dark] .min-plays-50 {
  background-color: #feda90;
}

[data-bs-theme=dark] .min-plays-60 {
  background-color: #feeac2;
}

.tooltip-inner {
  text-align: left;
}

pre {
  color: var(--bs-code-color);
}

.grayscale {
  filter: grayscale(1);
}

.btn-compare {
  --bs-btn-padding-y: 0.1rem;
  --bs-btn-padding-x: .25rem;
  shape-rendering: crispEdges;
}

.horizontal-spacer::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-bottom: 10px;
}

.social-button {
  width: 33px;
  height: 33px;
  fill: currentColor;
}