@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:400,700");
@import url("https://fonts.googleapis.com/css?family=Oswald");

@font-face {
  font-family: 'Squaremaze';
  src: url('../Squaremaze.ttf');
}

@font-face {
  font-family: 'Dark_Future';
  src: url('../Dark_Future.ttf')
}

@font-face {
  font-family: 'Electromagnetic';
  src: url('Electromagnetic.otf');
}

@font-face {
  font-family: 'radiospace';
  src: url('radiospace.ttf');
}

@font-face {
  font-family: 'zerofen';
  src: url('zerofen.ttf');
}

@keyframes colorInvert {
  0% {
    filter: invert(0%);
    opacity: 1;
  }

  20% {
    filter: invert(11%);
    opacity: 0.9;
  }

  30% {
    filter: invert(33%);
    opacity: 1;
  }

  60% {
    filter: invert(66%);
    opacity: 0.8;
  }

  90% {
    filter: invert(77%);
    opacity: 0.9;
  }

  100% {
    filter: invert(100%);
    opacity: 1;
  }
}

@keyframes roll {
  0% {
    background-position: 0%;
    filter: invert(1);
  }

  100% {
    background-position: 100%;
    filter: invert(0);
  }
}

@keyframes shift {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 0% 100%;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0;
  }
  33% {
    opacity: 0.3; 
  }
  100% {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    text-shadow: 0 2 10px yellow;
  }
  50% {
    text-shadow: 0 6 20px orange;
  }
  100% {
    text-shadow: 8 8 30px red;
  }
  50% {
    text-shadow: 0 6 20px orange;
  }
  0% {
    text-shadow: 0 2 10px yellow;
  }
}

@keyframes lightUp {
  0% {
    box-shadow: 0 0 10px 0px rgba(0, 0, 255, 0.7);
  }
  100% {
    text-shadow: 0 0 40px 20px rgba(0, 0, 255, 0);
  }
}

@keyframes pulse {
  0% {
    box-sizing: 1px 1px 5px white;
  }
  50% {
    box-shadow: 3px 3px 10px burlywood;
  }
  100% {
    box-shadow: 5px 5px 20px yellowgreen;
  }
}
@keyframes animateBg {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  11% {
    transform: scale(1);
    opacity: 0.7;
  }
  33% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.rolling-gradient {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb, #84fab0, #8fd3f4, #a6c0fe, #f9f7e8, #fbc2eb, #ff9a9e);
  background-size: 400% 400%;
  /*animation: roll 10s ease infinite;*/
  z-index: 9999;
}
.inverting-image {
  width: 100%;
  /* Adjust the width as needed */
  height: 100;
  /* Adjust the height as needed */
  animation: colorInvert 5s infinite alternate;
}
.fade-in {
  animation: fadeIn 12s ease-in;
  animation: ripple 3s ease-in-out;
}
.glowing-text {
  animation: glow 6s linear infinite;
}
.light-up {
  animation: lightUp 1s;
}
.rippleFxFast {
  animation: ripple 1s linear;
}
.rippleFxSlow {
  animation: ripple 3.3s linear;
}
.rippleFxRev {
  animation: ripple 11s alternate-reverse;
}