body {
font-family: Arial, sans-serif;
background: #f8f9fa;
margin: 10px;
padding: 13px;
}

p {
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
margin-bottom: 0px;
padding: 2px;
}

h1, h2, h3, h4, h5, h6 {
text-align: center;
font-weight: 100;
font-family: Fantasy, Impact, Roboto;
text-decoration: none;
margin: 0px;
padding: 0px;
}

a, a:visited, a:hover {
color:darkorange;
font-size:13px;
text-decoration:none;
font-family: Roboto, Arial, sans-serif;
}

a:hover {
text-decoration: underline;
}

border {
color: transparent;
size: 0px;
}

.category-filters {
text-align: center;
padding: 5px 0;
}

.form-container {
align-content: center;
justify-content: center;
display: block;
padding:13px;
margin-left: 39px;
}

.form select,  .form input,  .form textarea,  .form button {
display: block;
gap: 13px;
margin: 13px 0;
padding: 10px;	
}

.controls, .controls select, .controls input, .controls textarea, .controls button,  button {
padding: 10px;	
font-size: 16px;
border-radius: 6px;
border: 1px solid #ccc;
}

.controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 13px;
margin: 13px 0;
}

.film-container {
display: flex;
flex-wrap: wrap;
margin-left:4px;
max-width:580px;
}

.film-grid {
display: flex;
flex-wrap: wrap;
gap: 13px;
justify-content: center;
}

.film-card {
max-width: 390px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 13px;
transition: transform 0.5s ease;
text-align: center;
}

.film-card h4 {
font-weight: 100;
font-size: 26px;
}

.film-card:hover {
transform: scale(1.13);
}

.film-thumb {
width: 100%;
height: 130px;
object-fit: cover;
border-radius: 6px;
}

.thumbnail-img {
width: 100%;
max-width: 390px;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.project-container {
max-width: 94%;
margin: 13px auto;
padding: 4px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#filmThumbnail {
max-width: 100%;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
}

#trailerFrame {
width: 100%;
height: 390px;
display: none;
border: none;
margin-top: 20px;
}

#pressKitLink {
display: none;
margin-top: 16px;
font-weight: bold;
text-decoration: none;
}

#backButton {
margin-top: 30px;
padding: 10px 20px;
background: #222;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}


.modal {
display: none;
position: fixed;
z-index: 999;
left: 0; top: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.9);
}

.modal-content {
position: relative;
width: 80%; height: 80%;
margin: 5% auto;
background: transparent;
}

.modal-content iframe {
width: 100%; height: 100%;
border: none;
}

.close {
position: absolute;
top: -40px;
right: -10px;
color: white;
cursor: pointer;
font-size: 14px;
}

.extra-section {
padding: 0.2rem;
background: none;
margin-top: 2rem;
}

.extra-section h2 {
color: #333;
margin-bottom: 2rem;
}

#castList, #crewList, #btsGallery, #relatedProjects, tr, td {
display: flex;
flex-wrap: wrap;
gap: 0.1rem;
}

#castList span, #crewList span {
background: none;
color: #333;
padding: 0.5rem 1rem;
border-radius: 4px;
}

#btsGallery img, #relatedProjects img {
height: 120px;
border-radius: 6px;
cursor: pointer;
}

.logline {
display: -webkit-box;
-webkit-line-clamp: 1; /* ////// Limit to 1-2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}

@media screen and (max-width: 768px) {
.controls {
flex-direction: column;
align-items: stretch;
padding: 0 10px;
}

.film-grid {
flex-direction: column;
align-items: center;
}

.film-card {
width: 90%;
}

.extra-section {
padding: 1rem;
}

#filmDetails p {
font-size: 16px;
font-stretch: wide;
padding: 1rem;
}

#trailerFrame {
height: 200px;
}

.modal-content {
width: 95%;
height: 80%;
}

.close {
top: -20px;
right: 0;
font-size: 1.5rem;
}

#btsGallery img, #relatedProjects img {
height: 90px;
}

#castList span {
font-size: 14px;
padding: 0.3rem 0.6rem;
}

.global-footer, .footer-links, .social-links {
padding: 2px 1px;
margin-top: 2px;
margin-bottom: 2px;
color: #fff;
font-size: 8px;
font-family: Roboto, Arial, sans-serif;
text-align: center;
background: #444;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.global-footer a {
color:darkorange;
font-size:10px;
margin:4px;
text-decoration:none;
}