/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: azure;
  align-items: center;
}

body::before {
  min-height: 100%;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: rgb(20, 22, 35);
  background-image:
    linear-gradient(0deg, rgb(60, 62, 150) 1px, transparent 5px),
    linear-gradient(90deg, rgb(60, 62, 150) 1px, transparent 5px),
    linear-gradient(-90deg, rgb(60, 62, 150) 1px, transparent 5px),
    linear-gradient(-180deg, rgb(60, 62, 150) 1px, transparent 5px),
    radial-gradient(circle, rgb(20, 22, 35) 10px, rgb(10, 11, 17) 100px);
  background-size: 100px 100px;
  background-position: 0 0, 0 0;
  /* background-attachment: scroll; */


  animation: moveGrid 4s linear infinite;


  /* transform: rotateX(20deg) rotateZ(0deg); */
  /* transform-origin: center top; */
  z-index: -1;

}


@keyframes moveGrid {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 100px 100px, 100px 100px;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.9861;
  }

  5% {
    opacity: 0.94769;
  }

  10% {
    opacity: 0.93604;
  }

  15% {
    opacity: 0.90626;
  }

  20% {
    opacity: 0.9128;
  }

  25% {
    opacity: 0.93891;
  }

  30% {
    opacity: 0.95583;
  }

  35% {
    opacity: 0.97807;
  }

  40% {
    opacity: 0.96559;
  }

  45% {
    opacity: 0.94693;
  }

  50% {
    opacity: 0.96019;
  }

  55% {
    opacity: 1;
  }

  60% {
    opacity: 0.90313;
  }

  65% {
    opacity: 0.9988;
  }

  70% {
    opacity: 0.93455;
  }

  75% {
    opacity: 0.87288;
  }

  80% {
    opacity: 0.91428;
  }

  85% {
    opacity: 0.90419;
  }

  90% {
    opacity: 0.8803;
  }

  95% {
    opacity: 0.96108;
  }

  100% {
    opacity: 0.94387;
  }
}


.title1 {
  margin: 50px auto;
  max-width: 340px;
  border-radius: 200px;
  background-color: black;
  text-align: center;
  box-shadow: 0 0px 20px black;
}

.box1 {
  max-width: 1200px;
  margin: 50px auto;
  padding: 25px;
  background-color: rgba(10, 10, 10, 0.8);
  color: white;
  border-radius: 20px;
  box-shadow: 0 0px 20px rgba(59, 65, 255, 0.5);
  animation: flicker 0.5s normal infinite;
}



.gameboxes {
  display: flex;
  text-align: center;
  gap: 30px;
  justify-content: center;

}

.gamebox {
  text-align: center;
  align-items: center;
  justify-content: center;
}