static/styles.css

/* 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;
}