@import url("css/layout.css");
@import url("css/nav.css");
@import url("css/movies.css");
@import url("css/genre.css");
@import url("css/modal.css");
@import url("css/header.css");
@import url("css/list.css");
@import url("css/search-list.css");
@import url("css/watchlist.css");
@import url("css/favorites.css");
@import url("css/mobile.css");

body {
	background: linear-gradient(135deg, #F00 0%, #FF7F00 16%, #FF0 33%, #0F0 50%, #00F 66%, #4B0082 83%, #8F00FF 100%);
	margin: 0;
}

/* Mobile-friendly responsive styles */
@media (width <= 600px) {
	html {
		font-size: 15px;
	}

	body {
		font-size: 1em;
		padding: 0;
		margin: 0;
	}

	.header-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.logo {
		width: 60px;
		height: auto;
		margin-bottom: 8px;
	}

	.main-nav, .genre-select {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 0 8px;
	}

	.nav-link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		font-size: 1.1em;
	}

	.all-movies-section h2 {
		font-size: 1.2em;
	}

	#all-movies-grid {
		grid-template-columns: 1fr !important;
		gap: 12px;
		padding: 0 8px;
	}

	.modal-content {
		min-width: unset;
		width: 95vw;
		padding: 18px 8px 14px;
	}
}