body {
    background-image: url('https://i.pinimg.com/736x/22/16/78/22167837b4c02fc45c1e15a3d3014d15.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 300vh;
}

h1 {
    text-align: center;
    padding-top: 100px;
    font-size: 4em;
    font-family: 'Silkscreen', sans-serif;
}

h2 {
    text-align: center;
    font-size: 2.25em;
    font-family: 'Silkscreen', sans-serif;

}
/* below is some test code for a div objet in homepage.html*/

/* .polygon1AnimationObject {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2;
    animation: fallObject;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes fallObject {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:100px;}
  50%  {background-color:blue; left:400px; top:200px;}
  75%  {background-color:green; left:600px; top:500px;}
  100% {background-color:red; left:800px; top:800px;}
} */

.shimmer-text {
  font-family: 'Tourney', sans-serif;
  font-size: 3rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.1); /* Fallback */
  
  /* Background gradient overlay */
  background: linear-gradient(to right, #86004e 0%, #fffb00 20%, #00ff0d 40%, rgba(72, 255, 0, 0.867) 60%, rgba(255, 0, 0, 0.979) 80%, rgb(4, 0, 255) 100%);
  background-size: 200% auto;
  
  /* Clips background pattern directly inside text shape */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: shine 12s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center; /* Moves the gradient pattern */
  }
}

.homePageGameSectionContainer {
    display:inline-flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 250px;
}

.allGameElementsOnHomePage {
    width: 100px;
    margin-right: 20px;
    margin-left: 20px;
    padding: 25px;
    border-radius: 18%;
}

.allGameElementsOnHomePage img {
    width: 100px;
    margin: 0px;
    padding: 0px;
    border-radius: 20%;
}

.allGameElementsOnHomePage img:hover {
    width: 140px;
    margin-right: 10px;
    padding-right: 10px;
    border-radius: 20%;
}