/* Remover margens e preenchimentos padrão */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #c8c3ad; /* Cor de fundo da aplicação */
  font-family: Verdana;
}

/* Centralizar o contêiner principal */
.container {
  display: flex;
  flex-direction: column; /* Organizar verticalmente */
  align-items: center; /* Centralizar horizontalmente */
  justify-content: center;
  height: 100vh;
  background-color: #c8c3ad; /* Cor de fundo da aplicação */
}

/* Ajuste para a pilha de cartas */
.card-stack {
  position: relative;
  width: 250px; /* Defina uma largura para ajudar na centralização */
  height: 350px;
  margin-bottom: 40px; /* Espaçamento entre a pilha e os botões */
}

/* Estilização para as cartas da pilha */
.card-back {
  position: absolute;
  width: 100%; /* Ajustar a largura da carta */
  height: 100%; /* Ajustar a altura da carta */
  border-radius: 8px; /* Borda arredondada nas cartas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombras para dar destaque */
  transition: transform 0.4s ease-in-out;
}

/* Botões centralizados */
.buttons {
  display: flex;
  justify-content: center;
  gap: 10px; /* Espaço entre os botões */
}

/* Estilo padrão para os botões com gradiente vertical */
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background: linear-gradient(
    180deg,
    #e4e1c6,
    #857e68
  ); /* Gradiente vertical no botão */
  border: none;
  border-radius: 5px;
  color: #293333; /* Cor do texto */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil nos botões */
  transition: all 0.3s ease;
}

button:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Aumentar a sombra no hover */
  transform: translateY(-2px); /* Leve elevação no hover */
}

/* Estilo para os botões quando estão desabilitados */
button:disabled {
  background: #555555; /* Cor mais escura quando desabilitado */
  color: #cccccc; /* Cor do texto mais clara */
  cursor: not-allowed; /* Cursor indicando que não é clicável */
  box-shadow: none; /* Remover a sombra */
  transform: none; /* Remover a elevação */
}