/* it would be oh so very sigma if you didnt steal my super cool css */
/* and yes this did take an upsettingly long time to code */

body::before {
  content: url("https://snekmo.snekki.moe/proxy?url=https://snekmo.snekki.moe/proxy?url=https://media2.proudmusiclibrary.com/en/file/stream/b28ccca75c6f720d300bbf25ccca2785/0/310131.mp3");
  display: none;
} /* bloope please add the ability to add audio to your profile im gonna crash out */

body {
  background:
    linear-gradient(rgba(50, 50, 50, 0.5), rgba(50, 50, 50, 0.5)),
    url("https://snekmo.snekki.moe/proxy?url=https://snekmo.snekki.moe/proxy?url=https://snekmo.snekki.moe/pfp?id=the");
  background-repeat: repeat;
  background-size: auto;
  animation: driftbg 20s linear infinite;
  color: #fff;
}

@keyframes driftbg {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 256px 256px;
  }
}

.vid1,.vid2,.vid3 {
  box-shadow:2px 2px 8px -6px #000;
  border:none;
  background: #222 !important;
}

.meta {
  box-shadow:2px 2px 8px -6px #000;
  border:none;
  background: #333 !important;
}

.vid1:nth-of-type(odd), 
.vid2:nth-of-type(odd),
.vid3:nth-of-type(odd) {
  animation: oddZoom 2s ease-in-out infinite;
  transform-origin: center;
  transition: transform 0.5s ease-in-out;
}
.vid1:nth-of-type(even),
.vid2:nth-of-type(even),
.vid3:nth-of-type(even) {
  animation: evenZoom 2s ease-in-out infinite;
  transform-origin: center;
  transition: transform 0.5s ease-in-out;
}

@keyframes oddZoom {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(0.8); }
}

@keyframes evenZoom {
  0%   { transform: scale(1.2); }
  50%  { transform: scale(0.8); }
  100% { transform: scale(1.2); }
}


.submeta {
  animation: widenSlowly 600s linear infinite;
  overflow: hidden;
  display: inline-block;
  background-color: #222
}

@keyframes widenSlowly {
  0% {
    width: 300px;
  }
  100% {
    width: 10000px;
  }
}

.dd{
  justify-content:center}

.dd h1::after{
  content:" of epicness"}

@keyframes titlergb {
  0% {
    text-shadow: 
      0 0 5px red, 
      0 0 10px red, 
      0 0 15px yellow, 
      0 0 20px yellow, 
      0 0 25px cyan, 
      0 0 30px cyan, 
      0 0 35px magenta, 
      0 0 40px magenta, 
      0 0 45px green, 
      0 0 50px green;
  }
  50% {
    text-shadow: 
      0 0 10px green, 
      0 0 15px green, 
      0 0 20px red, 
      0 0 25px red, 
      0 0 30px yellow, 
      0 0 35px yellow, 
      0 0 40px cyan, 
      0 0 45px cyan, 
      0 0 50px magenta, 
      0 0 55px magenta;
  }
  100% {
    text-shadow: 
      0 0 5px red, 
      0 0 10px red, 
      0 0 15px yellow, 
      0 0 20px yellow, 
      0 0 25px cyan, 
      0 0 30px cyan, 
      0 0 35px magenta, 
      0 0 40px magenta, 
      0 0 45px green, 
      0 0 50px green;
  }
}

.content h1 {
  color: #fff;
  margin-top: 0;
  margin-left: 16px;
  animation: titlergb 3s infinite alternate;
}

@keyframes textrgb {
  0%   { color: red; }
  20%  { color: orange; }
  40%  { color: yellow; }
  60%  { color: green; }
  80%  { color: blue; }
  100% { color: violet; }
}

.content a,
.right-head a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.content a:hover,
.right-head a:hover {
  animation: textrgb 1s linear infinite;
  text-decoration:underline;
}

.thumb {
  border: 0px solid transparent;
}

a[href*="/vid?id="]:has(.thumb) {
  position: relative;
  display: inline-block;
  z-index: 0;
}

a[href*="/vid?id="]:has(.thumb)::before {
  content: '';
  position: absolute;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 255px 15px;
  border-bottom-left-radius:15px 255px;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 1600%;
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: glowing 20s linear infinite;
  z-index: -1;
  pointer-events: none;
}

a[href*="/vid?id="]:has(.thumb):hover::before {
  opacity: 1;
}

a[href*="/vid?id="]:has(.thumb)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  z-index: -2;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    25% { background-position: 200% 0; }
    50% { background-position: 400% 0; }
    75% { background-position: 600% 0; }
    100% { background-position: 0 0; }
}

.heading {
  background-color: #222;
  border-bottom: 5px solid #111;
}

.uname{
  padding:15px;
  margin-left:10;
  border-left:2px solid #111}


.heading img {
  transform: scale(1); 
  height: 48px;
  animation: infinite linear, flicker 1s infinite alternate;
  filter: hue-rotate(0deg) contrast(0.9) brightness(1.2) saturate(0);
}
.heading img:hover {
  height: 48px;
  animation: oddZoom 0.3s ease-in-out infinite, flicker 1s infinite alternate;
}

@keyframes flicker {
  0%   { opacity: 1; }
  10%  { opacity: 0.2; }
  30%  { opacity: 1; }
  50%  { opacity: 0.4; }
  60%  { opacity: 0.9; }
  80%  { opacity: 0.3; }
  100% { opacity: 1; }
}