@import url('https://fonts.googleapis.com/css2?family=K2D&display=swap');

:root {
  --color-progress: green;
}

/* Regras de Estilo Gerais */
body {
  background: linear-gradient(135.96deg, #0D131C 39.51%, #3E3F41 96.4%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

header {
  display: flex;
  justify-content: space-around;
}

h1 {
  font: 600 32px 'K2D';
  color: #FFF;
}

h3 {
  margin: 10px 0 30px 0;
  font: 400 24px 'Helvetica';
  color: #FFF;
  text-align: center;
}

h3 span {
  color: #00aa44;
}

h4 {
  margin: 40px 0 40px 10px;
  font: 600 28px 'Helvetica';
  color: #00aa44;
}

p {
  margin: 2px 10px;
  font: 400 20px 'Helvetica';
  color: #FFF;
}

#listaJogos,
#listaPopulares {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.content {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.content:hover .background {
  transform: scale(1.1);
}

.content:hover button {
  opacity: 1;
}

.content .background {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;

  font: 500 20px 'Helvetica';
  color: #FFF;
  cursor: pointer;

  background-color: #00aa44;
  border: none;
  border-radius: 4px;
}

.bg-loading-bar {
  position: relative;
  top: -22px;
  left: 0px;
  width: 100%;
  text-align: center;
}

progress {
  width: 100%;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: #eee;
}

progress::-webkit-progress-bar {
  background-color: #FFF;
}

progress::-webkit-progress-value {
  background-color: var(--color-progress);
}

.num-loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 600 2vh 'Arial';
}

/* Regras de Mídia para Desktop (min-width: 951px) */
@media (min-width: 951px) {
  .content {
    width: 14vw;
    height: 14vw;
  }

  button {
    width: 12vw;
    height: 10vh;
  }

  h1 {
    padding-top: 40px;
  }

  h2 {
    display: none;
    margin: 0;
  }

  .img-right {
    padding-top: 24px;
    width: 13vw;
    height: 13vw;
  }

  main {
    display: grid;
    grid-template-columns: 20% 80%;
  }

  .instructions {
    grid-row-start: 1;
    position: absolute;
    width: 20%;
  }

  #listaJogos,
  #listaPopulares {
    grid-column-start: 2;
  }

  #listaPopulares {
    padding-bottom: 20px;
  }
}

/* Regras de Mídia para Tablet (max-width: 950px) */
@media (max-width: 950px) {
  header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .img-left {
    width: 40vw;
    height: 40vw;
  }

  .img-right {
    padding: 10px;
    width: 34vw;
    height: 34vw;
  }

  h1 {
    margin: 0 0 10px 0;
    text-align: center;
  }

  h2 {
    margin: 10px 0 20px 0;
    font: 500 30px 'K2D';
    color: #FFF616;
    text-align: center;
  }

  main {
    display: flex;
    flex-direction: column;
  }

  .content {
    width: 44vw;
    height: 28vh;
  }

  button {
    width: 32vw;
    height: 10vh;
  }

  .instructions {
    text-align: center;
    margin-bottom: 20px;
    order: 2; /* Adicionado para ajustar a ordem no mobile */
  }
}

/* Regras de Mídia para Mobile (max-width: 767px ou 600px) */
@media only screen and (max-width: 767px) {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main .loading-bar {
    margin-top: 20px;
  }

  .main .instructions {
    position: relative;
    top: 50px;
    margin-bottom: 20px;
    order: 2; /* Adicionado para ajustar a ordem no mobile */
  }

  .main main {
    margin-top: 20px;
  }
}

/* Ajustes Adicionais para Mobile */
@media only screen and (max-width: 600px) {
  .instructions {
    order: 2;
  }

  .content:nth-child(n+11) {
    order: 1;
  }
}