/* General body and font styles */ body { /* Dark background for the entire page */ background-color: #121212; /* Light text color for readability on dark background */ color: #f5f5f5; /* Sets a clean, sans-serif font */ font-family: Arial, sans-serif; } /* Navbar and footer background color */ .navbar, .footer { /* Slightly lighter shade for navbar and footer to distinguish from the main body */ background-color: #181818; } /* Hero banner styles */ .hero-banner { /* Sets the background image for the hero banner, centers it, covers entire div, and prevents tiling */ background: url('/static/movebanners.jpg') center/cover no-repeat; /* Light text color to contrast with the banner image */ color: #fff; /* Padding around banner content */ padding: 80px 20px; /* Centers text in the banner */ text-align: center; } .hero-banner h1 { /* Large font size for main heading */ font-size: 2.5rem; /* Margin below the heading for spacing */ margin-bottom: 10px; } .hero-banner p { /* Slightly smaller font size for the subtitle text */ font-size: 1.2rem; } /* Button styles */ .btn-watch-now, .btn-primary { /* Bright pink background color for primary and watch-now buttons */ background: #ff416c; /* Removes default border for a cleaner look */ border: none; /* White text for high contrast on the button */ color: #fff; } /* Card styles */ .card { /* Dark background color for movie cards */ background-color: #1f1f1f; /* Removes default border for a minimalist look */ border: none; /* Light gray text for readability */ color: #ddd; } .card-title { /* Standard font size for movie title within cards */ font-size: 1rem; /* Adds space above the title for visual balance */ margin-top: 10px; } /* Footer styles */ .footer { /* Padding above and below footer content */ padding: 10px 0; /* Centers footer text */ text-align: center; /* Small font size for footer text */ font-size: 0.9rem; /* Light gray color for footer text */ color: #b0b0b0; }