@font-face {
    font-family: 'SubwayTicker';
    src: url('/fonts/SubwayTickerGrid.ttf');
    src: url('/fonts/SubwayTickerGrid.ttf?#iefix') format('embedded-opentype'),
        url('/fonts/SubwayTickerGrid.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
  height: 100%;
  overflow-x: hidden;
}

.donation-ticker {
  color: red;
  font-family: 'SubwayTicker';
  font-weight: bold;
  overflow: hidden;
  vertical-align: text-top;
  white-space: nowrap;
}

.donation-ticker-item {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: tickerContent;
  animation-timing-function: linear;
  display: inline-block;
  padding-top: 3px;
  text-decoration: none;
}

@keyframes tickerContent {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

::-webkit-scrollbar {
  width: 2vmin;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.3);
  border-radius: 5vmin;
}

::-webkit-scrollbar-track {
  border: solid 3px transparent;
  box-shadow: inset 0 0 10px 10px #212529;
  background-clip: padding-box;
  background-color: #212529;
}

::-webkit-scrollbar-thumb {
  border: solid 1px red;
}

::-webkit-scrollbar-button:single-button {
  background-color: #212529;
  color: red;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent red transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #dd0000 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: red transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #dd0000 transparent transparent transparent;
}

@keyframes flyin {
  from {
    transform: translateY(-250px);
  }
  to {
    transform: rotateX(12deg);
  }
}
.pagy {
  /* PagyWand Generated Variables */
  /* Copy from the PagyWand "CSS Override" field, and paste in YOUR own CSS to override the style */
  --B: 1;
  --H: 0;
  --S: 100;
  --L: 50;
  --A: 1;
  --spacing: 0.125rem;
  --padding: 0.75rem;
  --rounding: 1.75rem;
  --border-width: 0rem;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  /* Calculated Color Variables */
  --text:               #dee2e6;
  --text-hover:         #dee2e6;
  --text-current:       #dee2e6;
  --background:         #343a40;
  --background-hover:   hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
  --background-current: red;
  --background-input:   #343a40;

  /* Base Properties */
  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  justify-content: center;
}

/* Element Rules */

.pagy > :not([hidden]) ~ :not([hidden]) {
  margin-inline-start: var(--spacing);
}

.pagy a:not([role="separator"]) { /* all but gaps */
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 3) var(--padding);
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  color: inherit;
}

.pagy a[href]:hover { /* all links on hover */
  background-color: var(--background-hover);
  color: var(--text-hover)
}

.pagy a:not([href]) { /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) { /* disabled links */
  opacity: .6;
}

.pagy a[aria-current] {  /* current page */
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--text);
}

.pagy label {
  white-space: nowrap;
  display: inline-block;
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  background-color: var(--background);
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
}

.pagy label input {
  all: unset;
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
  background-color: var(--background-input);
}