/* A IA foi utilizada como ferramenta de pesquisa e para esclarecer dúvidas sobre o código, 
   especialmente na parte das imagens e detalhes para deixar a estética mais "limpa". Ela 
   auxiliou na organização do espaço da exposição de fotos e das miniaturas dos vídeos, 
  sem o uso de flexbox ou grid layout. 
   
   Por isso, alguns recursos que não foram ensinados em aula podem aparecer no código, 
   porém todos foram pesquisados para garantir que pudessem ser utilizados, sem violar 
   as orientações do professor. */

html{
  width: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f6f6f6;
  margin: 0;
  padding: 0;
}

/* MENU */
.menu {
  text-align: center;
  padding: 15px 0;
  background-color: #1f1f1fd3;
  width: 100%;
}

.menu a {
  margin: 0 50px;
  color: #f6f6f6;
}

/* RODAPÉ */
footer {
  text-align: center;
  font-size: 12px;
  background-color: #1f1f1f;
  color: #5e5e5e;
  padding: 15px;
}

/* SEÇÃO PRINCIPAL */
.intro {
  width: 90%;
  margin: 40px auto;
  overflow: auto;    /* Garante que o "quadrado" cinza ocupe todo o espaço do conteúdo, mantendo o rodapé no final da página */
}

.texto {
  float: left;
  width: 55%;
}

.foto {
  float: right;
  width: 40%;
  text-align: center;
}

.foto img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  border: 3px solid #3d3d3d;
}

/* TÍTULO + TEXTO */
.titulo {
  font-size: 60px;
  color: #3d3d3d;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.1;
}

.parag-custm-bio {
  color: #3d3d3d;
  line-height: 1.6;
  text-align: justify;
}

/* CURRÍCULO */
.curriculo {
  background-color: #1f1f1f;
  color: #ffffff;
  text-align: center;
  font-size: 17px;
  padding: 40px;
  border-radius: 20px 20px 0 0;
}

.curriculo p {
  margin-bottom: 30px;
}

.curriculo a {
  background-color: #ffffff;
  color: #1f1f1f;
  padding: 10px 20px;
  border-radius: 20px;
}

/* SOBRE */
.h2-custm-sobre {
  font-size: 30px;
  color: #3d3d3d;
  margin-top: 0;
  margin-bottom: 20px;
}

.parag-custm-sobre {
  color: #3d3d3d;
  line-height: 1.4;
  text-align: justify;
}

.intro-sobre {
  width: 90%;
  margin: 40px auto;
  overflow: auto;
}

.texto-sobre {
  float: right;
  width: 55%;
}

.foto-sobre {
  float: left;
  width: 40%;
  text-align: center;
}

.foto-sobre img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  border: 3px solid #3d3d3d;
}

/* EXPOSIÇÃO */
.exposicao {
  text-align: center;
  background-color: #1f1f1f;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  color: #f6f6f6;
}

.exposicao-fotos {
  max-width: 750px;  /* Limita a largura máxima do elemento para ficar ajustado na tela */
  margin: 0 auto;
}

.fotografia {
  display: inline-block;  /* Permite definir a largura e a altura, mas mantém o elemento na mesma linha */
  width: 220px;
  margin: 10px;
  border-radius: 8px;
}

/* FORMAÇÃO */
.h2-custm-formacao {
  font-size: 30px;
  color: #3d3d3d;
  margin-top: 0;
  margin-bottom: 20px;
}

.parag-custm-formacao {
  color: #3d3d3d;
  line-height: 1.4;
  text-align: justify;
}

.intro-formacao {
  width: 90%;
  margin: 40px auto;
  overflow: auto;
}

.texto-formacao {
  float: left;
  width: 55%;
}

.foto-formacao {
  float: right;
  width: 40%;
  text-align: center;
}

.foto-formacao img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  border: 3px solid #3d3d3d;
}

/* VÍDEOS */
.h3-custm-thumb {
  font-size: 20px;
  color: #f6f6f6;
  margin-bottom: 20px;
}

.parag-custm-thumb {
  color: #f6f6f6;
  line-height: 1.4;
  text-align: center;
}

.videos {
  text-align: center;
  background-color: #1f1f1f;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  color: #f6f6f6;
}

.video-card {
  display: inline-block;
  width: 220px;
  margin: 10px;
  background-color: #f6f6f6;
  border: 6px solid #f6f6f6;
  border-radius: 8px;
  vertical-align: top;
}

.video-card:hover {
  background-color: #f0f0f0;
}

.thumbnail {
  width: 100%;
  height: 130px;
  object-fit: cover;  /* Faz a imagem preencher o espaço sem ficar distorcida */
  display: block;
}

.caption {
  padding: 8px;
  font-size: 14px;
  text-align: center;
}

/* DISCIPLINAS */
.h2-custm-disciplinas {
  font-size: 30px;
  color: #3d3d3d;
  margin-top: 0;
  margin-bottom: 20px;
}

.h3-custm-disciplinas {
  font-size: 20px;
  color: #3d3d3d;
  margin-bottom: 20px;
}

.parag-custm-disciplinas {
  color: #3d3d3d;
  line-height: 1.4;
  text-align: justify;
}

.intro-disciplinas {
  width: 90%;
  margin: 40px auto;
  overflow: auto;
}

.texto-disciplinas {
  float: right;
  width: 55%;
}

.foto-disciplinas {
  float: left;
  width: 40%;
  text-align: center;
}

.foto-disciplinas img {
  width: 90%;
  height: auto;
  border-radius: 10px;
  border: 3px solid #3d3d3d;
}

/* HORÁRIOS */
.horario {
  background-color: #1f1f1f;
  color: #ffffff;
  text-align: center;
  font-size: 17px;
  padding: 40px;
  border-radius: 20px 20px 0 0;
}

/* TABELA */
.intro-tab {
  text-align: center;
  padding: 20px;
}

.texto-tab {
  max-width: 800px;
  margin: 0 auto;
}

.h3-custm-tab {
  font-size: 20px;
  margin-bottom: 15px;
  color: #ffffff;
}

.parag-custm-tab {
  font-size: 16px;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 25px;
}

.tabela {
  text-align: center;
  color: #ffffff;
  margin: 20px auto;
  border-collapse: collapse;
}

.tabela th,
.tabela td {
  padding: 10px;
  border: 1px solid #ffffff;
}

/* CONTATO */
.contato {
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  background-color: #1f1f1f;
  color: #ffffff;
  font-size: 17px;
  padding: 30px;
  border-radius: 20px;
}

.h2-custm-contato {
  font-size: 28px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  background-color: #ffffff;
  color: #1f1f1f;
  padding: 10px;
  border-radius: 20px;
}

.parag-custm-contato {
  color: #f6f6f6;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 25px;
}