@import "./reset.css";
@import "./variables.css";
@import "./utilities.css";

@import "../component/NavBar/style.css";
@import "../component/MovieCategory/style.css";
@import "../component/Movies_List/style.css";
@import "../component/Info_Films/style.css";
@import "../component/FeaturedSection/style.css";
@import "../component/Footer/style.css";
@import "../component/Stats/style.css";


html {
	box-sizing: border-box;
	
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	min-height: 100vh;
	width: 100vw;
	color: var(--color-black);
	font-family: var(--ff-sans);
	overflow-x: hidden;
}

 .app-container {
 	 display: grid;
 	 grid-template-columns: 1fr;
 	 min-height: 100vh;
 }

 .app-main {
 	display: flex;
 	flex-direction: column;
 	max-width: 100vw;
 	min-height: 100vh;
}

#content {
	background: var(--color-white);
	min-height: calc(100vh - 6rem);
	min-width: 100%;
	
}

@media (max-width: 900px) {
	.app-container {
		grid-template-columns: 1fr;
	}

	.app-main {
		min-height: auto;
	}

	header {
		min-height: auto;
	}

	#content {
		padding: 1.25rem;
	}
}