/* Definição de variáveis globais de cores */
:root {
  --rosa: #a35d7e;               /* rosa usado em sombras */
  --marsala: #612629;         /* marsala principal */
  --azul: #40608a;  /* azul para efeito */
  --branca: #130c0c;              /* Branco */
  --luz: #478098;              /* Cor de luz (rosa claro) */
}

/* Estilos gerais do body */
body {
  align-items: center; /* Centraliza os elementos verticalmente */
  background: url(img/bom\ gosto.jpg) no-repeat center center fixed; 
  background-size: cover;   /* Ajusta a imagem para cobrir toda a tela sem distorcer */
  display: flex;            /* Layout flexível */
  justify-content: center;  /* Centraliza horizontalmente */
  flex-direction: column;   /* Alinha os itens em coluna */
  font-family: 'Montserrat', sans-serif; /* Define a fonte */
  min-height: 100vh;        /* Altura mínima igual à tela */
}


/* Estilo do título principal */
h1 {
  color: var(--preta);   /* Cor branca */
  margin-bottom: 20px;    /* Espaço inferior */
  font-size: 2rem;        /* Tamanho da fonte */
}

/* Estilo do subtítulo */
h2 {
  color: var(--branca);   /* Cor branca */
  margin-bottom: 20px;    /* Espaço inferior */
  font-size: 1.5rem;      /* Tamanho da fonte */
}

/* Container do teclado */
.teclado {
  background: linear-gradient(to bottom, #49141d 0%,#da4c5a 100%); /* Fundo em degradê cinza */
  box-shadow: 6px 8px 0 6px #4e1c1c, 10px 10px 10px #f5eff6;             /* Sombra externa */
  border-radius: 30px;                                             /* Bordas arredondadas */
  display: grid;                                                   /* Layout em grid */
  gap: 10px;                                                       /* Espaçamento entre botões */
  grid-template-columns: repeat(3, 1fr);                           /* 3 colunas iguais */
  padding: 10px;                                                   /* Espaçamento interno */
}

/* Estilo dos botões (teclas) */
.tecla {
  background-color: var(--branca);   /* Fundo branco */
  border-radius: 30px;               /* Bordas arredondadas */
  box-shadow: 3px 3px 0 var(--rosa);/* Sombra leve */
  color: var(--marsala);            /* Texto em marsala */
  cursor: pointer;                   /* Cursor tipo "mãozinha" */
  height: 160px;                     /* Altura fixa */
  font-size: 1.75em;                  /* Tamanho do texto */
  font-weight: bold;                  /* Negrito */
  line-height: 120px;                 /* Centraliza verticalmente o texto */
  text-align: center;                 /* Centraliza horizontalmente o texto */
  width: 160px;                       /* Largura fixa */
}

/* Padroniza as imagens dentro dos botões */
.tecla img {
  width: 100%;            /* Faz a imagem ocupar toda a largura do botão */
  height: 100%;           /* Faz a imagem ocupar toda a altura do botão */
  object-fit: cover;      /* Recorta proporcionalmente sem distorcer */
  border-radius: 30px;    /* Mantém o mesmo arredondamento do botão */
}


/* Estilo quando a tecla é clicada/ativa */
.tecla.ativa,
.tecla:active {
  background-color: var(--marsala);         /* Fundo marsala */
  border: 4px solid  var(--marsala);        /* Borda marsala */
  box-shadow: 3px 3px 0 var(--azul) inset; /* Sombra interna */
  color: var(--branca);                      /* Texto branco */
  outline: none;                             /* Remove borda padrão */
}

/* Estilo quando a tecla recebe foco */
.tecla.focus,
.tecla:focus {
  outline: none;                        /* Remove contorno */
  box-shadow: 1px 1px 10px var(--luz);  /* Adiciona brilho */
}

/* Estilo quando ativa + foco ao mesmo tempo */
.tecla.ativa:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--azul) inset, 1px 1px 10px var(--luz); /* Sombra interna + brilho */
}