/* Dark mode CSS styles */
body {
    background-image: url(image/cinema.jpg);
}

h2 {
    margin-bottom: 50px;
    color: #FFFFFF; /* White text color */
}

.container {
    text-align: center;
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    background-color: #1e1e1e; /* Dark background color */
    color: #FFFFFF; /* White text color */
}

.container table {
    width: 100%;
    border-collapse: collapse; /* Collapse border spacing */
}

.container td, .container th {
    padding: 10px;
    border-bottom: 1px solid #333; /* Darker border color */
}

.container td:first-child, .container th:first-child {
    padding-left: 20px;
}

.container td:last-child, .container th:last-child {
    padding-right: 20px;
}

.container th {
    border-bottom: 1px solid #ddd; /* Lighter border color */
    position: relative;
}

/* Styling for thumbnail column */
.container th:first-child,
.container td:first-child {
    width: 10%; /* Adjust the width as needed */
}

.container th:first-child img {
    width: 100%; /* Ensure thumbnail fills the column */
}

/* Hover effect for poster images */
.poster-img:hover {
    transform: scale(1.1); /* Scale the image to 110% on hover */
    transition: transform 0.3s ease; /* Smooth transition */
}