body {
	background-color: #232323;
	color: white;
	font-family: "Courier";
	background-image: url("bg.gif");
	background-repeat: repeat;
	margin: 0px 20px 20px 30px;
	background-attachment: fixed;
}
#club {
 	display: flex;
	flex-direction: column;
}

#main-title {
	font-size: 3em;
	color: #32CD32;
}

.center {
	text-align: center;
}

.link {
	color: #2277FF;
}

#streamers > li {
	font-size: 2em;
	color: white;
}


#streamers > li > a {
 	color: green;
	text-decoration: none;
}

#champs > h2 {
	color: yellow;
}
#champs > p {
	margin: 0;
}

a { 
	color: inherit;
	text-decoration: none; 
} 

p {
	font-size: 1.3em;
	color: white;
} 

.melkey {
	font-size: .6em;
}
.blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } }


.done {
	text-decoration: line-through;
}

#board {
	display: flex;
	flex-wrap: wrap;
	max-height: 1300px;
	flex-direction: column;
}

#board > p {
	font-weight: bold;
	margin: 5px;
}

.red {
	color: #D0312D;
}

.blue {
	color: #4DEEEA;
}

.green {
	color: #74EE14;
}

.pink {
	color: #F000FF;
}
.yellow {
	color: #FFE700;
}
.uncommon {
	color: #1eff00;
}
.epic {
	color: #a335ee;
}

.legendary {
	color: #ff8000;
}
.rare {
	color: #0070dd;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.steven {
	font-size: 1.5em !important;
  	animation: rotation 2s infinite linear;
	border: 1px solid red;
}




.glitch {
  font-size: 8rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;

  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);

  animation: glitch 500ms infinite;
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 650ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
  /* color: green; */
  opacity: 0.8;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(0.0125em, 0.025em);
  /* color: red; */
  opacity: 0.8;
}

/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}