body{
    background-color: white
}

.first{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    text-align: center;
    justify-content: center;
    font-size: 30px;
    color: white;

}

.first i{
    font-size: 40px;
}

.dropdown{
    display: flex;
    justify-content: center;
    gap: 30px;
    text-align: center;
    font-size: 30px;
    flex-direction: column;
    align-items: center;
}

.dropdown select{
    width: auto;
    min-width: 120px;
    margin-bottom: 20px;   
}

button{
    color: yellow;
    background-color: black;
    width: 120px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}

.dropdown i{
    color: white;
}

#genreContainer{
    display: flex;
    color: aliceblue;
    flex-wrap: wrap;
    gap: 20px;
}

.movie-card {
    width: 200px;
    padding:10px;
    border-radius:10px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
    background-color: #1e1e1e;
    transition: transform 0.3s ease;
}
.movie-card:hover {
    transform: translateY(-10px);
  }
.dropdown label{
    color: white;
}
.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)),url('krists-luhaers-AtPWnYNDJnM-unsplash.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 50vh;
}
.hero-tagline{
    color:white;
    margin-left: 100px;
}
/* 1. Turn the main list container into a centered, responsive grid */
#genrelist {
    display: flex;
    flex-wrap: wrap;         /* Allows movies to wrap to the next line instead of one long row */
    justify-content: center; /* Centers the list on your screen */
    gap: 30px;               /* Adds breathing room between each movie card */
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;          /* Centers the entire container layout block */
  }
  
  /* 2. Style each individual movie card wrapper */
  .movie-card {
    background-color: #1c1c1c; /* A slightly lighter dark grey to contrast with a pure black background */
    border-radius: 8px;
    padding: 20px;
    width: 250px;              /* Gives every card a uniform size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;       /* Centers the poster and text inside the card */
    text-align: center;
  }
  
  /* 3. Style the images inside the cards */
  .movie-card img {
    border-radius: 6px;
    margin-bottom: 15px;
    max-width: 100%;           /* Ensures the poster scales perfectly inside its 250px card */
    height: auto;
  }
  
  /* 4. FIX THE CONTRAST: Make the text readable against dark backgrounds */
  .movie-card h2 {
    color: #ffffff;            /* Crisp white for movie titles */
    font-size: 1.2rem;
    margin: 10px 0;
  }
  
  .movie-card p {
    color: #b3b3b3;            /* A softer light grey for the summaries so it is easy on the eyes */
    font-size: 0.9rem;
    line-height: 1.4;
  }

/* Responsiveness for displays smaller than 600px wide */
@media (max-width: 600px) {
    .hero-content h1 {
      font-size: 2rem; /* Shrinks the massive title header slightly so it fits perfectly on one line */
    }
    
    #genrelist {
      padding: 20px 10px; /* Removes wide margins on tiny screens to optimize whitespace */
      gap: 15px;
    }
  
    .movie-card {
      width: 100%; /* Allows movie cards to safely span the full width of a mobile screen if desired */
      max-width: 280px; 
      padding: 15px;
    }
  }