:root {
    --primary-100: #140033ff;
    --primary-200: #250359ff;
    --primary-300: #37067fff;
    --primary-400: #4a119eff;
    --primary-500: #591ab8ff;
    --primary-600: #6d2ad1ff;
    --primary-700: #8e51e8ff;
    --primary-800: #aa79f2ff;
    --primary-900: #d1b3ffff; 


    --warning: #FFFFFF;
    --danger: #FFFFFF;
    --success: #FFFFFF;
    --info: #FFFFFF;
    
    --neutral-100: #1a1a1aff;
    --neutral-200: #333333ff;
    --neutral-300: #4d4d4dff;
    --neutral-400: #666666ff;
    --neutral-500: #808080ff;
    --neutral-600: #999999ff;
    --neutral-700: #b3b3b3ff;
    --neutral-800: #ccccccff;
    --neutral-900: #e6e6e6ff;
}

#navbar{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Asegura que la barra de navegación esté siempre encima */
}

body {
    display: flex;
    flex-direction: column;
    background-color: black;
    color: var(--neutral-900);
    margin: 0;
    padding: 0;
	scroll-snap-type: y mandatory;
    text-align: center;
    align-content: center;
    align-items: center;  

   
    justify-content: center;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden; /* oculta desbordes laterales */
    overflow-y: auto;   /* permite scroll vertical */
    
}

#gilia_logo {
    
    
    width: 50vh;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

#gilia_logo img {
    width: 100%;
    height: auto;
}

.games-page {
    margin-top:10vh;
    width: 60%;
    height: 85%;
    
    color: white;
    flex-direction: column;
    display:flex;
    justify-content: center;
    align-items: center;    

}



.game-card {
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
  height: 45%;
  background-color: transparent;
  padding: 1em;
  border-style: solid;
  border-width: 4px;    
  border-color: var(--primary-500);
  border-radius: 16px;
  margin: 1em;
  
}

.game-card:hover{
    /*border-width: 8px;*/ 
}

.game-cover {
  width: 300px;
  max-width: 100%;
  border-radius: 10px;
}

.game-info {
  flex: 1;
  text-align: left;
}

@media (max-width: 768px) {
  .game-card {
    flex-direction: column;
    align-items: center;
  }
  .game-info {
    text-align: center;
  }
}