@import url('https://fonts.google.com/share?selection.family=Bitcount+Grid+Double:wght@100..900');
:root {
  --font-family: "Bitcount Grid Double", sans-serif;
  --brand-logo: url("https://thumbs.paysite.com/assets/logo_1776784073656.png");
  --color-base-100: #14111D;
  --color-base-200: #09070F;
  --color-base-300: #2A1F38;
  --color-base-content: #F5F2FF;
  --color-primary: #FF2FB3;
  --color-primary-content: #FFFFFF;
  --color-secondary: #7CFF6B;
  --color-secondary-content: #08110A;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.8rem;
  --size-selector: 4px;
  --size-field: 4px;
  --size-grid-item-margin: 10px;
  --border-border: 1px;
  --depth-depth: 1;
  --noise-noise: 0;
}


/* Theme CSS Overrides */
/* [2026-04-21 15:14] rounded shiny or sparkly pink and green buttons, pink borders around videos, CTA and membership values green, coming soon screen pink and green */
.ps-body {
  --color-primary: #ff4fc3;
  --color-primary-content: #ffffff;
  --color-secondary: #7cff6b;
  --color-secondary-content: #08110a;
  --color-base-200: #1a0b18;
  --color-base-100: #170915;
  --color-base-300: #2a1230;
  --color-base-content: #fff4fc;
  --radius-field: 999px;
  --border: 2px;
}

.ypp-btn,
.ypp-btn-primary,
.ypp-btn-secondary,
section#hero .hero-slider-wrapper .hero-slider-item-info .slider-buttons .info-buttons .play-button {
  border-radius: var(--radius-field);
  border: var(--border) solid color-mix(in srgb, var(--color-primary) 70%, #ffffff 30%);
  color: var(--color-primary-content);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.55) 0 6%, transparent 7% 100%),
    radial-gradient(circle at 78% 28%, rgba(124,255,107,.4) 0 5%, transparent 6% 100%),
    radial-gradient(circle at 62% 72%, rgba(255,255,255,.24) 0 4%, transparent 5% 100%),
    linear-gradient(135deg, #ff4fc3 0%, #ff2fb3 48%, #7cff6b 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 2px 0 rgba(255,255,255,.18) inset,
    0 10px 24px rgba(255,79,195,.28),
    0 0 18px rgba(124,255,107,.18);
}

.ypp-btn-primary,
section#hero .hero-slider-wrapper .hero-slider-item-info .slider-buttons .info-buttons .play-button {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.52) 0 6%, transparent 7% 100%),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.2) 0 5%, transparent 6% 100%),
    radial-gradient(circle at 70% 72%, rgba(255,79,195,.22) 0 4%, transparent 5% 100%),
    linear-gradient(135deg, #8cff7e 0%, #43d85f 58%, #2fcf7a 100%);
  color: var(--color-secondary-content);
  border-color: color-mix(in srgb, var(--color-secondary) 75%, #ffffff 25%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 2px 0 rgba(255,255,255,.18) inset,
    0 10px 24px rgba(124,255,107,.3),
    0 0 18px rgba(124,255,107,.24);
}

.ypp-btn-secondary {
  color: var(--color-primary-content);
}

.content-item,
section#videos .content__section .content__wrapper .content-default.content-item,
section#player .video__player__wrapper {
  border: var(--border) solid var(--color-primary);
  box-shadow: 0 0 0 1px rgba(255,79,195,.22), 0 0 22px rgba(255,47,179,.16);
}

.join-page {
  --color-primary: #7cff6b;
  --color-primary-content: #08110a;
  --color-secondary: #ff4fc3;
  --color-secondary-content: #ffffff;
  --color-base-200: #2a0f24;
  --color-base-100: #240d1f;
  --color-base-300: #3a1633;
  --color-base-content: #fff4fc;
}