/* Netflix-inspired CSS with theme variables */
:root {
  --bg-1: #141414;
  --bg-2: #000;
  --text: #fff;
  --card-bg: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.15);
  --card-bg-hover: rgba(255,255,255,0.2);
}
body.light {
  --bg-1: #f2f2f2;
  --bg-2: #e1e1e1;
  --text: #111;
  --card-bg: rgba(255,255,255,0.9);
  --card-border: rgba(0,0,0,0.1);
  --card-bg-hover: rgba(255,255,255,1);
}
* {
  box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura total */
  margin: 0; /* Remove margens padrão de todos os elementos */
  padding: 0; /* Remove paddings padrão de todos os elementos */
}
body {
  min-height: 100vh; /* Define altura mínima como 100% da altura da viewport */
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--text); /* Cor do texto via variável */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Família de fontes similar ao Netflix */
  display: flex; /* Usa flexbox para layout */
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  transition: background .35s ease, color .35s ease;
}
main {
  text-align: center; /* Alinha texto ao centro */
  width: min(100%, 900px); /* Largura máxima de 900px ou 100% se menor */
  padding: 2.5rem 1.5rem; /* Padding interno: 2.5rem vertical, 1.5rem horizontal */
  margin: auto; /* Centraliza horizontalmente */
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
header h1 {
  font-size: clamp(2rem, 3vw, 3rem); /* Tamanho da fonte responsivo entre 2rem e 3rem */
  letter-spacing: 1.2px; /* Espaçamento entre letras */
  font-weight: 700; /* Peso da fonte negrito */
  margin-bottom: 2.8rem; /* Margem inferior */
  text-shadow: 3px 3px 15px rgba(0,0,0,.6); /* Sombra no texto para efeito 3D */
}
.theme-toggle {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.45);
  color: var(--text);
  width: 54px;
  height: 30px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease, background .25s ease;
}
.theme-toggle.on {
  background: rgba(255,255,255,0.35);
}
.theme-toggle.on::before {
  transform: translateX(24px);
  background: #111;
}
.theme-toggle:hover {
  transform: scale(1.05);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85);
}
body.light .theme-toggle {
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.3);
}
body.light .theme-toggle::before {
  background: #111;
}
body.light .theme-toggle.on {
  background: cornflowerblue;
}
body.light .theme-toggle.on::before {
  background: yellow;
}
body.light .theme-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.6);
}

nav.profiles {
  display: grid; /* Usa CSS Grid para layout */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Colunas automáticas com mínimo 140px */
  gap: 1.2rem; /* Espaço entre itens */
  justify-items: center; /* Centraliza itens horizontalmente */
  margin-top: 3rem; /* Margem superior */
}
nav.profiles li {
  display: inline-flex; /* Coloca os itens lado a lado */
  width: auto;
  margin: 0 .3rem; /* espaçamento lateral reduzido entre perfis */
  justify-content: space-evenly;
}
nav.profiles ul,
nav.profiles ol {
  list-style: none; /* Remove marcadores e números */
  margin: 0; /* Remove margem padrão */
  padding: 0; /* Remove espaçamento interno padrão */
}

.profile {
  display: block; /* Link ocupa bloco e envolve imagem corretamente */
  background: var(--card-bg); /* Fundo semitransparente */
  border: 2px solid var(--card-border); /* Borda semitransparente */
  border-radius: 10px; /* Bordas arredondadas */
  overflow: hidden; /* Esconde conteúdo que ultrapassa */
  width: min(140px, 100%); /* Adapta largura ao espaço disponível */
  min-width: 120px; /* Mantém tamanho mínimo legível */
  max-width: 220px; /* Limite em telas maiores */
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; /* Transições suaves */
  cursor: pointer; /* Cursor de ponteiro */
  padding: .8rem; /* Padding interno */
  color: var(--text); /* Cor do texto via variável */
  text-decoration: none; /* Remove sublinhado */
}
.profile figure {
  margin: 0; /* Remove margem do figure */
}
.profile:hover,
.profile:focus-visible {
  transform: translateY(-5px); /* Move para cima no hover */
  border-color: rgba(255,255,255,0.35); /* Borda mais visível */
  box-shadow: 0 8px 20px rgba(0,0,0,.6); /* Sombra para efeito de elevação */
  background: var(--card-bg-hover); /* Fundo mais visível */
  outline: none; /* Remove outline padrão */
}
.profile img {
  width: 100%; /* Largura total do container */
  height: auto; /* Mantém proporção da imagem */
  object-fit: cover; /* Cobre o container sem distorcer */
  border-radius: 8px; /* Bordas arredondadas */
  display: block; /* Remove espaço extra abaixo da imagem */
  margin-bottom: 0.7rem; /* Margem inferior */
}
.profile span, .profile figcaption {
  display: block; /* Torna bloco para ocupar linha inteira */
  font-weight: 600; /* Peso da fonte semi-negrito */
  color: var(--text); /* Cor do texto via variável */
  letter-spacing: .6px; /* Espaçamento entre letras */
}
.profiles ul {
    display: flex;
}
@media (max-width: 700px) {
  nav.profiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } /* Melhor encaixe em telas médias */
  .profile { max-width: 220px; } /* Respeita largura sem esticar demais */
}

@media (max-width: 500px) {
  main { padding: 1.5rem .9rem; } /* Padding reduzido em telas pequenas */
  .profile {
    width: 100%; /* Largura total em telas pequenas */
    max-width: none; /* Remove limite superior para ocupar espaço disponível */
    padding: 0.9rem; /* Espaçamento interno levemente aumentado */
  }
}