html {
  scroll-behavior: smooth;
}



.steam {
  --animate-duration: 41s;
}

.playstore {
  --animate-duration: 38s;
  --animate-delay: 0.5s;
}

.appstore {
  --animate-duration: 43s;
  --animate-delay: 0.5s;
}

.mobile {
  --animate-duration: 50s;
}

.gamepad {
  --animate-duration: 45s;
}

@keyframes shakeVertically {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translate(var(--translate-x, 0px), var(--translate-y, 0px));
  }
}

@keyframes expandOnHover {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(var(--scale-factor, 1.2));
  }
}

.animate {
  cursor: pointer;
  animation: shakeVertically var(--animation-duration, 5s) ease-in-out var(--animation-delay, 0s) infinite;
  transition: filter 0.3s ease, transform 1s;
  /* Apply transition to both filter and transform */
}

.animate:hover {
  /* animation-play-state: paused; */
  filter: drop-shadow(0 0 1px rgb(0, 0, 0)) drop-shadow(0 0 1px rgb(0, 0, 0));
  animation: expandOnHover 300ms 1 forwards;
}

@keyframes shakeVerticallyExpand {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translate(var(--translate-x, 0px), var(--translate-y, 0px)) scale(var(--scale-factor, 1.2));
  }
}

.animatewithexpand {
  cursor: pointer;
  animation: shakeVerticallyExpand var(--animation-duration, 5s) ease-in-out var(--animation-delay, 0s) infinite;
  transition: filter 0.3s ease;
}

.animatewithexpand:hover {
  /* animation-play-state: paused; */
  filter: drop-shadow(0 0 1px rgb(0, 0, 0)) drop-shadow(0 0 1px rgb(0, 0, 0));
  animation: expandOnHover 300ms 1 forwards;
}

.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  background: #f1f1f1;
  cursor: pointer;
  padding: 15px;
  text-align: left;
  position: relative;
  transition: background 0.3s ease;
}

.accordion-header:hover {
  background: #e0e0e0;
}

.accordion-content {
  display: none;
  padding: 15px;
  background: white;
}

.accordion-header:target+.accordion-content {
  display: block;
}

/* Targeting the content based on the header */
.accordion-header:target~.accordion-content {
  display: block;
}

.nav-link {
  font-family: 'Helvetica';
  text-decoration: none;
  color: white;
  position: relative;
  font-size: 18px;
  transition: color 0.3s ease;
  padding: 3px 24px 4px 24px;
}

/* .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 24px;
  background: linear-gradient(to right,
  #b721ff 0%,
  #21d4fd 100%);
  transition: width 0.3s ease;
} */



.nav-link:hover,
.active {
  color: #465059; /* metallic silver-ish */
}


  /* background: linear-gradient(to right,
      rgba(183, 33, 255, 0.5),
      rgba(183, 33, 255, 0.5) 20%,
      rgba(33, 212, 253, 0.5) 80%,
      rgba(33, 212, 253, 0.5)); */


.nav-link:hover::after,
.active::after {
  width: 100%;
}

.MuiTablePagination-menuItem {
  color: black !important
}

.MuiTablePagination-selectIcon {
  color: black !important
}

.MuiTablePagination-root {
  border-radius: 25px;
  box-shadow: 0px 5px 15px -3px rgba(0, 0, 0, 0.2);
}

.swiper-button-next-1 .MuiButton-endIcon {
  color: #29a9a9;
  /* Change color as needed */
}

.swiper {
  width: 100%;
  height: 100%;
}

.image-container {
  position: relative;
}

.image-container::before,
.image-container::after {
  content: '';
  position: absolute;
  top: 45%;
  height: 1px;
  background-color: #717173;
  width: 100px;
  /* Adjust width as needed */
}

.image-container::before {
  left: -105px;
  /* Adjust left position to move the line before the image */
}

.image-container::after {
  right: -105px;
  /* Adjust right position to move the line after the image */
}

.mySwiper {
  padding-bottom: 15px;
}

/* .swiper-wrapper {
    transition-timing-function: linear;
} */

@import url("https://fonts.googleapis.com/css?family=Raleway");

:root {
  --glow-color: hsl(186 100% 69%);
  --animate-duration: 10s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
} */

body {
  /* min-height: 100vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: black; */
  font-family: 'Helvetica';
  background-color: #000000;
}


.glowing-btn {
  position: relative;
  /* color: var(--glow-color); */
  color: #1f1f2f;
  cursor: pointer;
  padding: 0.35em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: white;
  perspective: 2em;
  font-family: "Helvetica";
  font-size: inherit;
  font-weight: 600;
  /* letter-spacing: 8px; */

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 0.1;
  }

  4% {
    opacity: 0.5;
  }

  19% {
    opacity: 0.5;
  }

  21% {
    opacity: 0.1;
  }

  23% {
    opacity: 1;
  }

  80% {
    opacity: 0.5;
  }

  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }

  20% {
    opacity: 1;
  }

  25% {
    opacity: 0.3;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }

  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: inherit;
  }
}