/* Header */
.welcomeSection h1 {
  font-size: 3rem;
  text-align: center;
}

.welcomeSection {
  margin-top: 4rem;
}

.welcomeSection p {
}

.introStyle {
  color: #e9c46a;
  font-weight: bold;
}

/* Home Information Section */
.homeInformation {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto;
  max-width: 70rem;
  margin: 0 auto;
}

.homeOneText {
  grid-column: 1/4;
  grid-row: 1/2;
}

.homeTwoText {
  grid-column: 1/4;
  grid-row: 2/3;
}

.homeFourText {
  grid-column: 6/9;
  grid-row: 1/2;
}

.homeFiveText {
  grid-column: 6/9;
  grid-row: 2/3;
}

.home-text {
  text-align: center;
  margin: 2rem;
}

.homeMiddleImage {
  grid-column: 3/7;
  grid-row: 1/3;
}

.homeMiddleImage img {
  width: 95%;
  height: auto;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.logoSpinner {
  animation: spinner 10s linear infinite;
}

.homeInformation h3 {
}

/* Games Section */
.homeGames {
  max-width: 90rem;
  margin: 0 auto;
}

.homeGamesHeader {
  text-align: center;
  margin: 1rem;
}

.homeGamesCards h3 {
  font-size: 1.5rem;
  text-align: center;
  min-height: 4rem;
}

.homeGamesCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gameOne,
.gameTwo,
.gameThree {
  background-color: #253049;
  border: 1px solid #15514a;
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 25rem;
}

.gameOne:hover,
.gameTwo:hover,
.gameThree:hover {
  background-color: rgb(121, 121, 230);
  cursor: pointer;
}

.gameOne img,
.gameTwo img,
.gameThree img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 4px solid #1a243b;
}

.homeGames a {
  text-decoration: none;
}

.homeGames p {
  color: white;
}

@media only screen and (max-width: 720px) {
  .homeInformation {
    display: flex;
    flex-direction: column;
  }

  .home-text {
    margin: 1rem;
  }

  .welcomeSection {
    margin: 0.5rem;
  }
}