@import url(//fonts.googleapis.com/css?family=Vibur);
@import url(//fonts.googleapis.com/css?family=Electrolize);


@keyframes spriteAnimation {
  from { background-position: 0 0; }
  to { background-position: -1500px 0; } /* 6 columns * 250px */
}

.colored-fun {
    color: #e94040; /* Red color for "Challenging" */
}

.colored-challenging {
    color: #40e94c; /* Green color for "tactical" */
}

.colored-tactical {
    color: #409fe9; /* Blue color for "Fun" */
}

.container-sprite {
  position: relative;
  width: 250px; /* 3000px / 6 columns */
  height: 250px; /* 2000px / 2 rows */
}

.background-sprite {
  position: absolute;
  top: 0;
  left: -19px;
  width: 112%;
  height: 112%;
  background-image: url('../images/background2.png'); /* Replace with your background image URL */
  background-size: cover;
  opacity: 0.5; /* Adjust the opacity as needed */
}

.sprite-container {
  width: 250px; /* 3000px / 6 columns */
  height: 250px; /* 2000px / 2 rows */
  background-image: url('../images/T2.png'); /* Replace with your spritesheet image URL */
  background-size: 1500px 500px; /* 6 columns * 250px, 2 rows * 250px */
  animation: spriteAnimation 1.5s steps(6) infinite; /* 6 columns in 1.5 seconds */
}

.logoSpark b{
  font: 180 7vh "Vibur";
  color: #fee;
  text-shadow: 0 -20px 50px, 0 0 1px, 0 0 1em #449cff, 0 0 0.2em #449cff, 0 0 0.1em #449cff, 0 5px 2px #000;
}
.logoSpark b span{
  animation: blink linear infinite 2s;
}
.logoSpark b span:nth-of-type(2){
  animation: blink linear infinite 3s;
}


@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #333;
  }
  80% {

    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #333;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #333;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}