* {
    margin: 0 auto;
    padding: 0;
}
body {
    font-family: "Roboto", sans-serif;
    /*background-image: url(assets/fondo.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    background-color: #080808;
}
/* HEADER */
header {
    display: flex;
    align-items: center; /* alinea los el titulo y el subtitulo en el centro verticalente */
    background-color: #161616;
    border-bottom: solid 6px #9146FF;
    padding: 1em;
}
header img {
    width: 12%; /* tamaño del logo */
    margin: 0; /* margen del logo */
    margin-top: 2em; /* margen superior del logo */
    margin-bottom: 1.5em; /* margen inferior del logo */
}
.perfil {
    display: flex;
    width: 3%; /* tamaño de la imagen de perfil */
    padding: 0;
    margin: 1.5em; /* margen fuera del perfil */

}
.titulo {
    display: flex;
    align-items: center; /* Alinea los items en el centro verticalmente */
    margin-top: 1.5em; /* margen superior */
    color: #00F5D4; /*color de la letra del titulo*/
}
.container.titulo {
    display: flex;
    flex-direction: column; /*hace que haya una caja por columna, no deja que se acomoden 1 al lado de otra*/
    text-align: center; /*alinea el texto en el centro de la caja*/
    align-items: center; /*alinea los items en el centro verticalmente*/
}
.subtitulo {
    padding: 15px; /*espacion entre el contenido y el borde de la caja*/
    color: #ffffff2c; /*color*/
}

/* NAV */
nav {
    background-color: rgb(10, 10, 10); /*color de fonodo de la caja nav*/
}
nav ul {
    display: flex;
    list-style: none; /*quita los punto o la numeracion de la lista*/
    justify-content: center; /*alinea horizontalmente en el centro*/
    gap: 6em;/*espacion entre los hermanos*/
}
nav ul li:hover {
    background-color: #ffffff34; /*al poner el cursos encima de uno de los items de la lista el fondo de toda la caja se cambia a ese color*/
    border-radius: 5px; /*curva de los bordes*/
}
nav a {
    text-decoration: none; /*le quita el subrrayado añ texto de la etiqueta a*/
}
 nav ul li a {
    color: #00F5D4; /*color de la letra de a*/
    line-height: 1em; /*espacio vertical entre los renglones*/
    font-weight: 500; /*grozor de la letra*/
    font-size: 1.1em /*tamaño de la letra*/
 }
.li {
    text-align: center; /*alinea el texto en el centro de la caja*/
    padding: 10px; /*espacion entre el contenido y el bord de la caja*/
    margin: 10px; /*espacion fuera de la caja*/
}

/*MAIN*/
main {
    width: 52%; /*espacio que va a ocupar el main*/
    margin-top: 3em; /*espacio fuera del main*/
    border-radius: 10px; /*borde redondeado*/
    background-color: #161616f8; /*color de fondo*/
    gap: 15px; /*espacio entre los hermanos*/
}
.subtitulos-main { 
    color: #03e0c3; /*color de la letra del titulo del main*/
    margin: 1em;/*margen fuera de la caja del del tiutlo*/
    padding-bottom: 15px; /*espacio de abajo entre el contenido y la caja*/
    padding-top: 18px; /*espacio de arriba entre el contenido y la caja*/
    border-bottom: solid 3px #9146FF; /* borde inferior de la caja*/
    font-size: 1.1em; /*tamaño de la letra*/
    border-radius: 2px; /*esquinas redondeadas*/
}
section {
    display: flex;
    justify-content: center; /*alinea horizontalmente en el centro*/
    padding-bottom: 20px; /*espacio de abajo entre el contenido y la caja*/
    gap: 1em; /*espacio entre los hermanos*/
    border-bottom: solid 3px #9146FF; /* borde inferior de la caja*/
    border-radius: 5px; /*esquinas redondeadas*/
}
article {
    width: 300px; /*epacio que va a ocupar el articulo*/
    margin-top: 1em; /*margen superior del articulo*/
    padding: 1em; /*espacio entre el contenido y la caja*/
    border: solid 0.5px #1f1f1fa2; /*borde del articulo*/
    box-sizing: border-box; 
    margin: 0; /*margen del articulo*/
    padding-bottom: 1em; /*espacio inferior entre el contenido y la caja*/
    border-radius: 3px; /*esquinas redondeadas*/
}
article div p {
    display: flex; 
    font-size: 14px; /*tamaño de la letra*/
    color: #ffffff2b; /*color de la letra*/
    padding-top: 10px; /*espacio superior entre el contenido y la caja*/
}
.caja-boton {
    display: flex;
    margin-top: 10px; /*margen superior del boton comprar*/
    margin-bottom: 10px; /*margen inferior del boton comprar*/
    margin-left: 10px; /*margen izquierdo del boton comprar*/
}
.btn {
    display: flex;
    text-decoration: none; /*quita el subrrayado del boton*/
    margin: 0;/*margen del boton*/
    padding: 10px; /*espacio entre el contenido y la caja*/
    color: rgb(255, 255, 255); /*color de la letra*/
    font-size: 1em; /*tamaño de la letra*/
    background-color: #793dd3; /*color del fondo del boton*/
    border-radius: 5px; /*esquinas redondeadas de la caja del boton*/
}
.juegos {
    display: flex;
    flex-wrap: wrap; /*hace que los elementos pasen abajo cuando ya no entran en el main*/
}
article img {
    /*border: solid 2px #353535;*/
    display: flex;
    width: 100%; /*cubre el 100% de la caja*/
    height: 180px; /*alto de la imagen*/
    object-fit: cover; /*que la imagen no se deforme o no se estire*/
    object-position: top; /*posicion de la imagen*/
}

/*FOOTER*/
footer {
    display: flex;
    justify-content: center; /*alinea en el centro horizontalmente*/
    margin-top: 2em; /*margen superior*/
    background-color: #161616f8; /*color del fondo del footer*/
    padding-top: 10px; /*espacio entre el contenido y el borde superiopr de la caja*/
    padding-bottom: 10px; /*espacio entre el contenido y el borde inferior de la caja*/
    border-top: solid 3px #9146FF; /*borde superior del footer*/
}
footer div {
    margin: 0; /*margen de las cajas*/
    margin-left: 8em; /*margen izquierdo de las cajas*/
    margin-right: 8em; /*margen derecho de las cajas*/
    gap: 1em;/*espacio entre los hijos de la caja*/
}
footer div h2 {
    padding-bottom: 5px; /*espacio entre el contenido y el borde inferior de la caja*/
    padding-top: 5px; /*espacio entre el contenido y el borde superiopr de la caja*/
    margin-top: 15px; /*margen superior*/
    margin-bottom: 10px; /*margen inferior*/
    font-size: 15px; /*tamaño de la letra*/
    padding-left: 45px;/*espacio izquierdo entre el contenido y el borde*/
    padding-right: 45px; /*espacio derecho entre el contenido y el borde*/
    color: rgba(255, 255, 255, 0.219); /*color de los subtitulos del footer*/
}
.redes {
    display: flex;
    flex-direction: column; /*hace que haya una caja o item por columna*/
}
.sociales {
    width: 35px; /*tamaño vertical de la imagen*/
    height: 35px;/*tamaño horizontal de la imagen*/
    display: flex;
}
.creditos {
    color: rgba(255, 255, 255, 0.11); /*color de la letra*/
    font-size: 16px;/*tamaño de latra*/
}
.extra {
    color: rgba(255, 255, 255, 0.11);/*color de la letra*/
}
footer div a {
    text-decoration: none; /*quita el subrraydao de a*/
    color: rgba(255, 255, 255, 0.11);/*color de a*/
}