@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Ubuntu:wght@300&display=swap");

* {
  padding: 0;
  margin: 0;
}

a {
  color: white;
}

body {
  background-image: url(IMGs/background.png);
  font-family: Open Sans;
}

/* HEADER  */
header {
  padding: 2rem;
}
header p {
  margin-left: 1rem;
  color: whitesmoke;
}
header h1 {
  color: whitesmoke;
}
/* SECTION  */

#games {
  padding: 5rem;
  display: grid;

  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto;

  gap: 1rem;
}
.tumblr {
  background: white;

  border-radius: 10px;

  width: 95px;
  height: 95px;
}
.tumblr:hover {
  transform: scale(1.1);
}

.tumblr p {
  padding: 1rem;

  color: orange;
  opacity: 0;
  transition: 0.2s;
}
.tumblr:hover p {
  opacity: 1;
}

/* FOOTER  */

footer {
  display: flex;
  justify-content: space-around;
  background: black;
  opacity: 80%;

  min-height: 200px;
  height: 100%;

  margin-bottom: 1rem;
}
footer section {
  display: grid;
  grid-template-columns: auto auto auto;

  gap: 3rem;
}
.logo {
  display: flex;

  align-items: center;
}
.logo h1 {
  color: white;
}
footer nav {
  display: flex;

  align-items: center;
}
footer ul {
  display: flex;

  gap: 1rem;
}
footer li {
  display: inline;
}
footer a:hover {
  color: greenyellow;
}
.center {
  display: flex;
  align-items: center;
}
.language {
  width: 50px;
  height: 50px;
  border-radius: 100%;

  background: url(IMGs/br.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.language:hover {
  transform: scale(1.1);
}

@media (max-width: 1800px) {
  #games {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;

    gap: 1rem;
  }
}
@media (max-width: 1500px) {
  #games {
    grid-template-columns: auto auto auto auto auto auto auto auto auto;

    gap: 1rem;
  }
}
@media (max-width: 1200px) {
  #games {
    grid-template-columns: auto auto auto auto auto auto;

    gap: 1rem;
  }
}
@media (max-width: 900px) {
  #games {
    grid-template-columns: auto auto auto auto auto;

    gap: 1rem;
  }
}
@media (max-width: 700px) {
  #games {
    grid-template-columns: auto auto auto auto;

    gap: 1rem;
  }
  footer section {
    grid-template-columns: auto;
  }
}
@media (max-width: 600px) {
  #games {
    grid-template-columns: auto auto auto;

    gap: 1rem;
  }
  .logo {
    display: flex;
    align-items: start;
  }
  footer section {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  footer ul {
    padding: 1rem;
    display: grid;
    text-align: center;
  }
  .center {
    align-items: end;
  }
}
@media (max-width: 400px) {
  #games {
    grid-template-columns: auto auto;

    gap: 1rem;
  }
  footer section {
    display: grid;
    grid-template-columns: auto auto;
  }
  .logo {
    display: none;
  }
}

/* GAMES */
.g001 {
  background: url(/tumblr_games/T-jogo-da-velha-2.PNG);
  background-position: center;
  background-size: cover;
}
.g002 {
  background: url(/tumblr_games/T-jump-forever.PNG);
  background-position: center;
  background-size: cover;
}
.g003 {
  background: url(/tumblr_games/T-snake-game.PNG);
  background-position: center;
  background-size: cover;
}
.g004 {
  background: url(/tumblr_games/flappybird.PNG);
  background-position: center;
  background-size: cover;
}