*{ /*resetear los estilos del navegador*/
    margin: 0; /*margenes automáticas*/
    padding: 0; /*rellenos automáticos*/
    box-sizing: border-box;
}

body{
    font-size: 16px;/*tamaño base del texto*/
    line-height: 1.6;/*espacio entre líneas*/
    background-color: #272727;
    color: #eaeaea;

}

.container{
    width: 90%; /*el contenido ocupa el 90% de la pantalla.*/
    max-width: 1100px; /*este es el máximo que puede usar*/
    margin-left: auto;
    margin-right: auto; /*estas dos me centran el contenido horizontalmente*/
}

.site-header{
    padding: 1rem 0; /*agrega espacio arriba y abajo del header*/ /*el "1rem" es una unidad relativa al tamaño de la fuente*/
    background-color: #310a0b; 
    
}

.site-header .container{
    display: flex; /*permite organizar elementos en una fila o columna.*/
    justify-content: space-between; /*separa los elementos*/
    align-items: center; /*centra los elementos verticalmente*/
}

.logo{ /*estilo del logo*/
    font-size: 2.5rem;
    font-weight: bold;
    color: #eaeaea;
}

.main-nav ul{/*estilo del menú*/
    display: flex; /*la convierte en fila*/
    list-style: none; /*quita los puntitos de la lista*/
}

.main-nav li{/*espacio entre los enlaces*/
    margin-left: 20px;
}

.main-nav a{/*estilo de los enlaces*/
    text-decoration: none; /*quita el subrayado azul predeterminado*/
    color: #eaeaea;
    font-weight: bold; /*negrita*/
}

#hero{
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),/*crea una capa oscura encima de la imagen*/
    url("https://images6.alphacoders.com/548/thumb-1920-548302.jpg");

    background-size: cover; /*hace que la imagen llene todo el espacio sin deformarse*/
    background-position: center;

    color: #eaeaea;
    text-align: center;

    padding: 150px 0; /*crea mucho espacio arriba y abajo*/

}

#hero h1{ /*estilo del texto dentro del hero*/
    font-size: 3rem;
    margin-bottom: 1rem;
}

#hero p{
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn{ /*crea el botón principal de la página*/
    background-color: #b50c0f;
    color: #eaeaea;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
}

.menu-grid{
    display: grid; /*organizar elementos en filas y columnas*/
    grid-template-columns: repeat(3, 1fr); /*es para usar 3 columnas y que cada una use una fracción del espacio*/
    gap: 30px; /*espacio entre las columnas*/
}

.menu-item{
    background-color: #4e636c;
    border-radius: 5px;
    overflow: hidden;
}

.menu-item img{
    width: 100%;
    height: 250px;
    object-fit: cover; /*que no se deforme la imagen*/
}

a {
    transition: color 0.3s ease;
}

.main-nav a:hover { /*efectos del menu*/
    color: #b50c0f;
}

.btn:hover { /*efectos del boton*/
    background-color: #4e636c;
    transition: background-color 0.3s ease;
}


.site-footer {
    background-color: #2a2a2a;
    color: #f9f7f3;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

#story, #characters, #wild {
    padding: 80px 0;
    text-align: center;
}


h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}

#characters {
    background-color: #4e636c;
}







/*enlace de la página

https://juan-jose-la.github.io/Videojuego/ 

*/

/*enlace del repositorio

https://github.com/Juan-Jose-LA/Videojuego.git

*/