/* as seen on Basspistol TV (AKA https://v.basspistol.org) */
/* shout out tv.kreuder.me for the background styleee! */

body {
  /* */
  /* Set the colors of them primary and hovers */
  /* */
  --primary: #ff6600 !important;
  --border-primary: #ff6600 !important;
  --mainHoverColor: #8b49fd;
  /* */
  /* Sexy background anyone? Sets a centered, fixed background image covering the space, and a gradient over it. Gradient is made for dark theme */
  /* You're going to want to add something spacious in the custom homapage so it can really shine. Or have your visistors land on a channel, that looks good too*/
  /* We could probably derive the gradient colors from existing variables, but hey: they were color-picked from the default dark-theme background variable, so it's a match, right? */
  /* */
  background: linear-gradient(to bottom, hsla(0, 14.3%, 6.9%, 1), hsla(0, 14.3%, 6.9%, .5)), url(https://www.basspistol.com/images/bpist-wireframe-background-outline.svg);
  background-size: cover;
  background-color: var(--mainHoverColor) !important;
  background-attachment: fixed;
  background-position: center center !important;
}

  /* */
  /* Set the colors of the buttons. We should probably look up the new variable instead but feeling lazy, might do it later */
  /* */
.primary-button:hover {
  color: var(--on-primary);
  background-color: var(--mainHoverColor);
  border-color: var(--mainHoverColor);
}

  /* */
  /* Make sure the sexy background is shining through */
  /* */
.sub-header-container{
  background-color: transparent !important;
}

  /* */
  /* Add blured backdrop effect to the header and make it transparent so we can see the effect, so demure */
  /* */
header.root-header {
  background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
  backdrop-filter: blur(10px);
}

header > my-header > div.root {
  background-color: hsla(0, 14.3%, 6.9%, 0.25) !important;
}

  /* */
  /* Align the menu and the header of channels and make it even with the vertical gap */
  /* */
.menu-container,
.main-row {
  padding-top: 2rem;
}

  /* */
  /* Let the hover on buttons and links be smooth AF, based */
  /* */
a, a:hover, button {
  transition: 0.5s;
}
  /* */
  /* Let the logo breath out of that little container thingie that looks like it is part of the logo (When not) */
  /* */
.icon-logo {
  background-color: transparent;
  padding: 0;
}

  /* */
  /* Kill the gamification. We sane, we good, we bigger than that! Life is not a competition. Enjoy the journey, Namaste! */
  /* */
my-video-views-counter {
  display: none;
}
  /* */
  /* For users of peertube-plugin label-pur. If you CAN, you SHOULD enable redundancy. It's the right thing to do! PeerTube operators unite! (https://framagit.org/rigelk/peertube-plugin-label-pur) */
  /* */

#label-pur {
  z-index: 1000000;
}

  /* */
  /* Match the PUR card outfit to the rest of the jazzband */
  /* */
.flip-card-back {
  background: var(--mainHoverColor);
}

  /* */
  /* What do we want? Rounded corners on channel containers!! When do we want them? NOW! */
  /* */
.channel {
border-radius: 5px;
}

  /* */
  /* We got channels banners with top-right rounded corener, bottom-right rounded corners, bottom-left rounded corners, top-left rounded corners, Channel banners for everyone! */
  /* */
.banner img {
  border-radius: 15px 15px 5px 5px;
}

  /* */
  /* We like colors and we pick them for text selection too! */
  /* */

::selection {
  color: white;
  background: var(--mainHoverColor);
}