@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/roboto/roboto-variable.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}



.latest_games_wrapper {
  background-color: var(--bg-color-light);
  padding-top: 2rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  margin-bottom: 2rem;
}
.latest_games_wrapper h2 {
  text-align: center;
  color: var(--text-color-dark);
  padding-bottom: 3rem;
  font-size: 2rem;
  font-weight: 600;
}


.latest_games_wrapper ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.latest_games_wrapper li {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--bg-color-light);
  
  border: solid var(--bg-color-dark) 3px;
}
.latest_games_wrapper li:hover {
  background-color: var(--bg-color-dark);
}
.latest_games_wrapper li:hover > a {
  color: var(--text-color-light);
}

.latest_games_wrapper a {
  color: var(--text-color-dark);
  padding: 0.6rem 1rem;
  font-weight: 600;
}


@media (max-width: 800px) {
  .latest_games_wrapper ul {
    grid-template-columns: 1fr;
  }
}


footer {
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  background-color: var(--bg-color-dark);
}
footer .footer_wrapper {
  display: flex;
  justify-content: space-evenly;
  height: 20rem;
}
footer p,
a {
  color: var(--text-color-light);
  font-size: 1.2rem;
  font-weight: 400;
}

footer nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
footer .footer_image {
  display: flex;
  justify-content: end;
}
footer .footer_image img {
  height: 100%;
}
footer .copyright {
  text-align: center;
  color: var(--bg-color-light);
  font-size: 0.8rem;
  font-weight: 400;
}
@media screen and (max-width: 550px) {
  footer .footer_image img {
    display: none;
  }
  footer .footer_wrapper {
    justify-content: start;
  }
}