body {
  color: white; /* Define a cor do texto como branca */
  background: black; /* Define a cor de fundo da página como preta */
  margin: 0px; /* Remove margens padrão do navegador */
  font-family: "Chakra Petch", sans-serif; /* Fonte usada na página */
  margin-bottom: 100px; /* Adiciona espaço na parte inferior da página */
}

header {
  border-bottom: solid 2px rgb(42, 122, 228); /* Cria uma linha azul abaixo do cabeçalho */
  padding: 20px; /* Espaçamento interno */
  font-size: 32px; /* Tamanho do texto do cabeçalho */
  color: rgb(42,122, 228); /* Cor azul para o texto do cabeçalho */
}

.chamada {
  background: rgb(184, 156, 213); /* Cor de fundo lilás da seção de chamada */
  padding-bottom: 80px; /* Espaço inferior interno */
  padding-top: 80px; /* Espaço superior interno */
  display: flex; /* Usa layout flexível para os filhos */
  justify-content: center; /* Centraliza horizontalmente os elementos filhos */
}

.chamada-texto {
  margin-right: 5%; /* Espaço à direita para separar do vídeo */
}

h1 {
  font-size: 40px; /* Tamanho da fonte do título principal */
}

p {
  font-size: 20px; /* Tamanho da fonte dos parágrafos */
}

.categoria-videos {
  display: flex; /* Layout flexível em linha */
  overflow-x: auto; /* Permite rolagem horizontal se necessário */
  gap: 10px; /* Espaço entre os vídeos */
}

.categoria {
  padding-left: 20px; /* Espaço interno à esquerda */
  padding-right: 20px; /* Espaço interno à direita */
  margin-top: 50px; /* Espaço superior da seção */
}

.categoria-videos img {
  opacity: 0.5; /* Imagens levemente transparentes */
  height: 200px; /* Altura fixa das miniaturas */
}

.categoria-videos img:hover {
  opacity: 1.0; /* Ao passar o mouse, imagem fica visível totalmente */
  border: 3px solid green; /* Adiciona borda verde ao passar o mouse */
}

.categoria h2 {
  color: rgb(42,122,228); /* Cor azul para o título da seção */
}