@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Tangerine&display=swap');

:root {
    --color_navbar: #032541;
    --fondo_color_body: #011b32;
    --blanco_border: #fbfcfe69;
    --blanco_frontal: #ffffff;
    --tipografia_principal: 'tangerine';
    --Alumni: 'Alumni Sans Pinstripe', sans-serif;
    --Big: 'Big Shoulders Display', cursive;
    --Wire: 'Wire One', sans-serif;
    /* 1280x500 -> Medida para las imagnes */
}
*{
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
}



.navbar-nav a {
    font-family:var(--Alumni) ;
    font-size: 25px;
}

.styles_container h2{
    font-family: var(--tipografia_principal);
    font-size: 50px;
}

.colored_background{
    background-color:var(--fondo_color_body);
}

.color_nav{
    background-color:var(--color_navbar);
}

.color_nav a{
    color: rgba(255, 255, 255, 0.562);

}
.color_nav a:hover{
    color: #016A70;
}

#cards_container{
    /* background-color: #001524;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 40px; */
    background-color: #001524;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Cambia el tamaño mínimo y ajusta las columnas automáticamente */
    gap: 20px;
}

 img.image{
    width: 50px;
}

.card-img-top{
    cursor: pointer;
}

footer{
    margin-top: 10px;
}
footer.color{
    background-color: black;
    height: 200px;
    margin-bottom: 0;
}

footer img{
    width: 100px;
  }

  footer p{
    color: #f2f2f276;
  }

.list-group > li{
    font-size: 13px;
}


.movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height:auto;
    margin-bottom: 10px;
    /* padding-left: 24px;
    padding-bottom: 16px; */
  }


  .movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }


  /* Estilos de la sección de moviescategories */
.moviesByCategories{
    border: 0.5px solid #014c7168;
    flex-wrap: wrap;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    display: grid;
    text-align: center;
  }

  .moviesByCategories ul{
    margin: 10px;
  }
  .moviesByCategories li{
    border-radius: 3px;
    border: 1px solid #152d3969;
    color: #ffffffc4;
    font-family:var(--Alumni) ;
    font-size: 20px;
    display:inline;
    transition:0.5s;
    padding: 0px 10px;
    text-decoration: none;
  }

  .moviesByCategories li:hover{
    border-radius: 5px;
    border: 1px solid #014b71;
    transition: 1s;
    padding: 0px 10px;
    cursor: pointer;
    background-color: #014b71;

  }

.hidden_container{
    display: none;
}