/* Hi, I (Aydoplayoh) made This Cool css. feel fre e to reference it. this is the 1st work of the Public CSS Group */

:root {
  --Primary1: #d6d45c;
  --Primary2: #eef075;
  --Accent1: #999444;
  --Secondary1: #000000ed;
  --Secondary2: #0000;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -300%; }
}

@keyframes slide-in {
  0% { right: -50%; opacity: 0;}
  75% {right: 21px; opacity: 1;}
}

@keyframes member-count {
  0% { content: "10";}
  1% { content: "999";}
  2% { content: "1,000,000 🎉";}
  3% { content: "42";}
  4% { content: "666";}
  5% { content: "All The";}
  6% { content: "1";}
  7% { content: "2";}
  8% { content: "3";}
  9% { content: "4";}
  10% { content: "5";}
  11% { content: "6";}
  12% { content: "7";}
  13% { content: "8";}
  14% { content: "9";}
  15% { content: "10";}
  16% { content: "plenty of";}
  17% { content: "1 Googl";}
  18% { content: "0.1";}
  19% { content: "just enough";}
  20% { content: "365";}
  21% { content: "7";}
  22% { content: "an unknown amount of";}
  23% { content: "999,999,999";}
  24% { content: "0";}
  25% { content: "No";}
  26% { content: "Nil";}
  27% { content: "Nunnya";}
  28% { content: "A Few";}
  29% { content: "925,600";}
  30% { content: "???";}
  31% { content: "8,675,309";}
  32% { content: "int overflow";}
  33% { content: "some";}
  34% { content: "3 whole";}
  35% { content: "~7 billion";}
  36% { content: "0";}
  37% { content: "1";}
  38% { content: "0";}
  39% { content: "1";}
  40% { content: "0";}
  41% { content: "1";}
  42% { content: "0";}
  43% { content: "an unobserved amount of";}
  44% { content: "8,377,658,372";}
  45% { content: "7,779,858,472";}
  46% { content: "100";}
  47% { content: "enough";}
  48% { content: "2,025";}
  49% { content: "so many zombie";}
  50% { content: "19,009,094,300";}
  51% { content: "3";}
  52% { content: "7";}
  53% { content: "9";}
  54% { content: "1";}
  55% { content: "555";}
  56% { content: "413";}
  57% { content: "1,138";}
  58% { content: "1,701";}
  59% { content: "3";}
  60% { content: "3";}
  61% { content: "3";}
  62% { content: "9";}
  63% { content: "10";}
  64% { content: "21";}
  65% { content: "173";}
  66% { content: "55,314";}
  67% { content: "8,672,172,482,000,000,000,000,000,000";}
  68% { content: "007";}
  69% { content: "69";}
  70% { content: "a really gay amount of";}
  71% { content: "10,000 undead";}
  72% { content: "12(? i think)";}
  73% { content: "99";}
  74% { content: "too many";}
  75% { content: "838";}
  76% { content: "38";}
  77% { content: "8";}
  78% { content: "8/2(2+2)";}
  79% { content: "an incredibly large number of";}
  80% { content: "1,973";}
  81% { content: "1,999";}
  82% { content: "12";}
  83% { content: "64";}
  84% { content: "310";}
  85% { content: "2,000";}
  86% { content: "9,973 ";}
  87% { content: "8,107";}
  88% { content: "as many as 999";}
  89% { content: "60 badass";}
  90% { content: "a few too many";}
  91% { content: "10 animal-human hybrid";}
  92% { content: "777";}
  93% { content: "7000";}
  94% { content: "6";}
  95% { content: "93 drunken";}
  96% { content: "55";}
  97% { content: "4,301,945";}
  98% { content: "507";}
  99% { content: "19";}
  100%  { content: "??";}
}

body {
  background: linear-gradient(180deg, var(--Primary1), var(--Accent1));
  background-attachment: fixed;
  background-position: center;
}

#header {
  background: var(--Secondary1);
  border: none !important;
  padding-bottom: 6px;
}

#hSub {
  background: linear-gradient(180deg, var(--Secondary1), var(--Secondary2));
  padding-top: 10px;
  padding-bottom: 20px;
}

#gContainer {
  margin-top: 41px;
  border: 2px var(--Primary2) solid;
  color: var(--Primary2);
  padding: 10px;
  border-radius: 10px;
  background: var(--Secondary1);
}

#gAvatarContainer {
  filter: hue-rotate(250deg);
}

.player.box {
  position: fixed !important;
  right: 21px;
  display: block !important;
  bottom: 0px;
  offset: unset;
  width: calc(2% + 250px);
  border-color: var(--Primary2);
  background: var(--Secondary1);
  color: var(--Primary2);
  font-weight: bold;
  overflow: hidden;
  animation: slide-in cubic-bezier(.26,.96,.37,1.3) 1 2s; 
}

.songName a {
  display: none;
}

.song__title {
  height: 10px;
  display: inline-block;
}

.songName {
  overflow: hidden;
  height: 18px;
  right: 100%;
  animation: marquee 10s linear infinite;
  position: relative;
  padding-left: 100%;
  width: 200%;
}

audio {
  filter: grayscale(1) contrast(3) sepia(1) saturate(3);
}

.player:has(._playing) {
  opacity: 1;
}

.player:has(._paused) {
  opacity: 0.4;
}

h4 {
  color: var(--Primary2);
}

.rightHead {
  background: var(--Secondary2);
  color: var(--Accent1)\);
  font-size: 18px;
}

#gContainer:after {
  content: ".";
  position: fixed;
  
  display: block;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: linear-gradient(180deg, var(--Secondary1), var(--Secondary2));
  background-repeat: repeat space;
  z-index: -1;
  background-size: 30%;
}

a[href="/?id=6"] div b, a[href="?id=6"] .fwiendFace b {
    background: url(https://i.imgur.com/mSxlsew.gif);
    background-clip: text;
    -webkit-background-clip: text;
    color: #ffffff00;
    background-size: auto;
    background-position: inherit;
    background-attachment: fixed;
    filter: brightness(1.5) drop-shadow(0px 0px 1px black);
}

a[href="?id=295"] div b:hover {
    background: #6a5acd;
}
a[href="?id=295"] div b::before {
    content: "@";
}
a[href="?id=295"] div b {
    font-size: 1rem;
    font-weight: normal;
    margin: auto;
    background: #6a5acdab;
    width: auto;
    padding: 1px;
    border-radius: 5px;
    color: white;
    line-height: 21px;
}

.fwiendCount {
  color: var(--Primary1);
  font-size: 0px;
}

.fwiendCount::after {
  font-size: 15px;
  animation: member-count 60s linear infinite;
  content:"auto";
}

a { color: var(--Accent1) !important;}

.boxHead { background-color: var(--Primary2) ;}
.boxInfo { background-color: var(--Primary1) !important;}
.boxInfo a div {color: white !important;}

.url {
  border: solid 2px var(--Primary2);
}