style.css

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

/* Establece los estilos generales para todos los elementos */
* {
	margin: 0; /* elimina el margen */
	padding: 0; /* elimina el relleno */
	box-sizing: border-box; /* establece el tamaño de caja de borde */
	font-family: 'Poppins', sans-serif; /* establece la fuente de la familia Poppins */
}

/* Establece el estilo del elemento body */
body {
	display: flex; /* establece la disposición en línea */
	justify-content: center; /* centra los elementos hijos horizontalmente */
	align-items: center; /* centra los elementos hijos verticalmente */
	height: 100vh; /* establece la altura del elemento al 100% de la ventana del navegador */
	background-image: url('img/bg.jpg'); /* establece una imagen de fondo */
	background-size: cover; /* ajusta el tamaño de la imagen de fondo para cubrir toda la ventana del navegador */
}

/* Establece el estilo del elemento con la clase "container" */
.container {
	width: 85%; /* establece el ancho del elemento al 85% de la ventana del navegador */
	height: 85%; /* establece la altura del elemento al 85% de la ventana del navegador */
	background-color: rgba(
		16 18 27 / 40%
	); /* establece el color de fondo semi-transparente */
	border-radius: 10px; /* establece un borde redondeado */
	backdrop-filter: blur(20px); /* aplica un filtro de desenfoque al fondo */
	position: relative; /* establece la posición del elemento como relativa */
}

/* nav */
/* Establece el estilo del elemento con la clase "nav" */
.nav {
	width: 100%; /* establece el ancho del elemento al 100% de la ventana del navegador */
	height: 10%; /* establece la altura del elemento al 10% de la ventana del navegador */
	display: flex; /* establece la disposición en línea */
	justify-content: center; /* centra el contenido del elemento horizontalmente */
	align-items: center; /* centra el contenido del elemento verticalmente */
	border-bottom: 1px solid rgba(255, 255, 255, 0.123); /* añade un borde inferior sólido */
}
/* Establece el estilo del elemento con la clase "menu" */
.menu {
	height: 100%; /* establece la altura del elemento al 100% de su contenedor */
	height: 60%; /* establece la altura del elemento al 60% de su contenedor */
	display: flex; /* establece la disposición en línea */
	justify-content: center; /* centra el contenido del elemento horizontalmente */
	align-items: center; /* centra el contenido del elemento verticalmente */
	background: rgba(0, 0, 0, 0.295); /* establece un fondo semi-transparente */
	border-radius: 50px; /* establece un borde redondeado */
}
@media (max-width: 600px) {
	/* Estilos para dispositivos móviles */
	.menu {
		display: none; /* Oculta el menú de navegación */
		/* Otros estilos para dispositivos móviles */
	}
}
@media (max-width: 800px) {
	/* Estilos para dispositivos móviles */
	.menu a {
		font-size: 0.8em; /* Establece el tamaño de la fuente al 80% del tamaño original */
	}
	.main {
		margin: 0; /* Elimina el margen en la sección principal */
	}
	/* Otros estilos para dispositivos móviles */
}
/* Establece el estilo para los elementos de enlace */
a {
	color: rgb(204, 204, 204); /* establece el color de texto */
	border-radius: 50px; /* establece un borde redondeado */
	padding: 0.6em 2em; /* establece el relleno */
	background: none; /* elimina el fondo */
	text-decoration: none; /* elimina la decoración de texto */
	transition: all 0.2s; /* establece una transición para todos los cambios de estilo */
}

/* Establece el estilo para los elementos de enlace con la clase "active" */
a.active {
	color: rgb(22, 22, 22); /* establece el color de texto */
	background: white; /* establece un fondo blanco */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.178); /* añade una sombra de caja */
}

/* Establece el estilo del elemento con la clase "searchBox" */
.searchBox {
	padding: 1em 1.8em; /* establece el relleno */
	color: white; /* establece el color de texto */
}
/* Establece el estilo del elemento con la clase "main" */
.main {
	position: absolute; /* establece la posición del elemento como absoluta */
	width: 100%; /* establece el ancho del elemento al 100% de su contenedor */
	height: 90%; /* establece la altura del elemento al 90% de su contenedor */
	overflow-x: auto; /* habilita el desplazamiento en el eje x */
}

/* Oculta la barra de desplazamiento del elemento con la clase "main" */
.main::-webkit-scrollbar {
	display: none;
}

/* trendingMovies */
/* Establece el estilo del elemento con la clase "movies" */
.movies {
	width: 95%; /* establece el ancho del elemento al 95% de su contenedor */
	margin: 1em auto; /* establece un margen externo y automático */
	color: rgb(204, 204, 204); /* establece el color de texto */
}
/* Establece el estilo del elemento con la clase "cards" dentro del elemento con la clase "movies" */
.movies .cards {
	scroll-snap-type: x mandatory; /* establece que las cards deben ajustarse a una posición específica al desplazarse por el contenido, y que esta propiedad es obligatoria */
	margin-top: 0.6em; /* establece un margen superior al 0.6em del elemento */
	padding: 0.5em 0 2em 0; /* establece un relleno superior e inferior al 0.5em y 0em respectivamente del elemento */
	display: flex; /* establece la disposición en línea */
	overflow-y: auto; /* habilita el desplazamiento en el eje y */
	overflow-x: scroll; /* permite el desplazamiento horizontal */
	scroll-behavior: smooth; /* Esto hace que el scroll sea suave y se desplacen de forma fluida al utilizar el mouse. */
}

/* Oculta la barra de desplazamiento del elemento con la clase "cards" dentro del elemento con la clase "movies" */
.movies .cards::-webkit-scrollbar {
	/*display: none;*/
	width: 10px; /* establece el ancho de la barra de desplazamiento */
	/*background-color: #f5f5f5; /* establece el color de fondo de la barra */
}
/* Establece el estilo de la rueda de la barra de desplazamiento */
.movies .cards::-webkit-scrollbar-thumb {
	background-color: #000000; /* establece el color de fondo de la rueda */
	border-radius: 10px; /* establece un borde redondeado */
}
/* Establece el estilo del elemento con la clase "card" dentro del elemento con la clase "cards" dentro del elemento con la clase "movies" */
.movies .cards .card {
	flex-shrink: 0; /* establece la propiedad "flex-shrink" del elemento a 0 para evitar que se ajuste a su contenedor */
	width: 250px; /* establece el ancho del elemento a 250px */
	height: 150px; /* establece la altura del elemento a 150px */
	border-radius: 10px; /* establece un borde redondeado */
	cursor: pointer; /* Establece el cursor del mouse a mano al pasar sobre el elemento */
	position: relative; /* Establece la posición del elemento como relativa */
	transition: all 0.4s; /* establece una transición en todas las propiedades durante 0.4s */
	margin-right: 1em; /* establece un margen derecho al 1em del elemento */
}
/* Establece el estilo del pseudo-elemento "before" del elemento con la clase "card" */
.card::before {
	content: attr(
		data-text
	); /* establece el contenido del pseudo-elemento como el valor del atributo "data-text" del elemento padre */
	position: absolute; /* establece la posición del pseudo-elemento como absoluta */
	left: 45%; /* establece la posición izquierda del pseudo-elemento al 45% de su contenedor */
	bottom: -15%; /* establece la posición inferior del pseudo-elemento al -15% de su contenedor */
	transform: translate(
		-45%
	); /* desplaza el pseudo-elemento hacia la izquierda en un 45% de su tamaño */
	font-size: 0.7em; /* establece el tamaño del texto del pseudo-elemento al 0.7em */
	opacity: 0; /* establece la opacidad del pseudo-elemento a 0 */
	transition: all 0.4s; /* establece una transición en todas las propiedades durante 0.4s */
}

/* Establece el estilo del pseudo-elemento "before" del elemento con la clase "card" cuando el elemento padre está en hover */
.card:hover::before {
	opacity: 1; /* establece la opacidad del pseudo-elemento a 1 */
}

/* Estilo del elemento con la clase "card" cuando el cursor del mouse se encuentra sobre él */
.card:hover {
	transform: scale(1.05); /* aumenta el tamaño del elemento en un 5% */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.178); /* añade una sombra al elemento */
}
/* Estilo de la imagen que se encuentra dentro de un elemento con la clase "card" */
.movies .cards .card img {
	width: 100%; /* establece el ancho de la imagen al 100% del elemento padre */
	height: 100%; /* establece la altura de la imagen al 100% del elemento padre */
	border-radius: 10px; /* establece un borde redondeado con un radio de 10px alrededor de la imagen */
}