* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*Inclui bordas e preencimento no tamanho total do elemento */
}

body {
    font-family: 'Arial', sans-serif; /* Define a fonte padrão do corpo */
    background-color: #f4f4f4;      /* Define a cor de fundo para branca */
    color: #333;                    /* Define a cor do texto */
}

.site-header {
    display: flex; /* Define um layout flexivel para o cabeçaho */
    justify-content: space-between;
    align-items: center; /* Alinha  verticalmente todos os elementos ao centro */
    padding: 20px 40px;
    background-color: #000; /* Fundo preto */
    color: #fff;            /* Texto branco */
    border-bottom: 2px solid #555; /* Cor para a borda inferior */
}

.logo h1 {
    font-size: 28px; /*Tamanho do logo */
    font-weight: bold; /* Texto em negrito*/
    text-transform: uppercase; /* Texto em maisculas */
    margin-bottom: 5px; /* Espaçamento */
}

.logo .tagline {
    font-size: 14px;
    font-style: italic;
    color: #ccc;
}

.nav-menu ul {
    list-style: none; 
    display: flex; /* Exibe itens na horizontal*/
    gap: 20px; /* Espaçamento entre itens */
}

.nav-menu a {
    text-decoration: none; /* Remove o sublinhado dos links*/
    color: #fff;    /* links brancos */
    font-size: 16px;  /* Tamanho do texto dos links*/
    font-weight: 500;
    transition: color 0.3s ease; /* Transição suave para a cor do link */
}

.nav-menu a:hover {
    color: #f39c12; /*Cor laranja ao passar o mouse*/
}

main {
    max-width: 1200px; /*Largura maxima do conteudo principal*/
    margin: 20px auto; /* Centraliza o conteudo na horizontal*/
    padding: 0 20px;
}

.welcome-message {
    text-align: center; /* Centraliza o Texto de Boas Vindas*/
    margin-bottom: 40px; /* Espaço abaixo da mensagem */
}

.welcome-message h2 {
    font-size: 28px; /*Tamanho do titulo da mensaguem*/
    color: #444; /*Cor cinza escuro */
}

.welcome-message p {
    font-size: 20px; /*Tamanho do texto do paragrafo*/
    color: #666;
    margin-top: 10px; /* Espaço acima do paragrafo*/
}

.category-section {
    margin-bottom: 40px; /*Espaçamento abaixo da seção de categorias*/
}

.category-title {
    font-size: 24px; /* Tamanho do titulo da Categoria*/
    font-weight: bold; /* Fonte Negrito*/
    margin-bottom: 20px;/* Espaço embaixo do texto*/
    color: #444; /* Cor do texto*/
}

.movie-grid {
    display: grid; /* Layout para a grade de filmes*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Faz com que as colunas fiquem flexiveis conforme o espaço disponivel */
    gap: 20px; /*Espaçamento entre os itens da grade*/
}

.movie-card {
    background-color: #fff; /*Fundo branco para os cartazes*/
    border-radius: 8px;       /* Bordas arredondadas*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /*Sombra suave*/
    overflow: hidden;                             /* Garante que o conteudo não passe os limites dos carazes */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
}

.movie-card:hover {
    transform: scale(1.05); /* Aumenta o tamanho do poster quando passar o mouse */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra mais pronunciada */
}

.movie-card img {
    width: 100%;  /* A imagem ocupa toda a largura do cartaz*/
    height: auto; /* Mantém a proporção da imagem */
}

.movie-card h3 {
    font-size: 18px; /* Tamanho do titulo do filme */
    font-weight: bold; /* Titulo em Negrito */
    padding: 10px;  /* Espaçamento interno */
    color: #222; /* Define a cor para o titulo (preto) */
}

.movie-card p {
    font-size: 14px; /* Tamanho do texto da descrição*/
    padding: 0 10px 10px; /*Espaçamento interno */
    color: #555; /*Cor do texto*/
}