body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Alterado de 'justify-content: flex;' */
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #fcfcfc;
}


.card {
  perspective: 1000px;
  width: 350px;
  height: 700px;
  display: flex; /* Alterado para inline-block para permitir borda e sombra */
  border: 8px solid transparent; /* Inicialmente, a borda é transparente */
  border-image: linear-gradient(45deg, #FF5733, #ff43d0, #4CAF50)10;
  border-image-slice: 1;
  box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5); /* Sombra colorida ao redor do card */
  margin: auto;
}

.card::before, .card::after {
  content: '';
  position: absolute;
  z-index: -1;
  perspective: 1000px;
  width: calc(95% + 21px);
  height: calc(98% + 21px);
  background: linear-gradient(50deg, #ffff00, #00ff00, #0099ff, #001aff, #a200ff, #ff0055, #ff0000, #ffff00, #00ff00, #0099ff, #001aff, #a200ff);
  background-size: 300%;
  border-radius: 8px;
  animation: AnimarBorda 8s linear infinite;
}

@keyframes AnimarBorda {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 300%;
  }
}

.card::after{
  filter: blur(50px);
}

.card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s;
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 24px;
}

.card-front {
  background-color: #3498db;
  transform: rotateY(0deg);
  background-image: url('/img/mulher.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-size: 100% 100%;
}

#front-text {
  text-shadow: 2px 2px 5px rgb(255, 255, 255);
  position: absolute;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: translateZ(20px);
}
h2 {
  position: relative;
  font-weight: normal;
  transform: translateZ(100px);
  height: 100px;
}

.card-back {
  background-color: #e74c3c;
  transform: rotateY(180deg);
  background-image: url('/img/card.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  background-size: 100% 100%;
}
#back-text {
  text-shadow: 2px 2px 5px rgb(255, 255, 255);
  position: absolute;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: translate3d(20px);
}

.borda-anima{
  left: 50%;
  transform: translate(-50%, 50%);
  position: fixed;
}
#rotateButton {
  z-index: 1;
  position: fixed;
  left: 50%;
  bottom: -7%; /* Ajuste a margem inferior conforme necessário */
  transform: translateX(-50%); /* Centraliza horizontalmente */
  background-color: #fd0d0d;
  color: white;
  border: none;
  padding: 15px 45px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s, transform 0.3s;
  border-radius: 50px;
  box-shadow: 0 0 10px 5px #ff0101;
}

#rotateButton:hover {
  background-color: #FF8243;
  transform: scale(1.1);
  box-shadow: none;
  position: fixed;
  left: 50%;
  bottom: -7%; /* Mantenha a mesma margem inferior no hover */
  transform: translateX(-50%); /* Centraliza horizontalmente */
}
/* Consulta de mídia para telas menores (entre 430px e 900px) */
@media screen and (max-width: 900px) and (min-width: 390px) {
  html {
    width: 100%; /* Reduz a largura do conteúdo em telas menores */
  }
  .card {
    width: 50%; /* Faça com que o card ocupe a largura total da tela */
    height: 50%; /* Permita que a altura se ajuste automaticamente ao conteúdo */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card-inner {
    width: 99%; /* Faça com que o card interno ocupe a largura total */
  }
  .card-front,
  .card-back {
    font-size: 16px; /* Reduza o tamanho da fonte para telas menores */
  }
}

/* Consulta de mídia para telas maiores (maior que 1100px) */
@media screen and (min-width: 1000px) and (min-width: 1260px) {
 
  .card {
    width: 450px; /* Restaure a largura do card para telas maiores */
    height: 800px; /* Restaure a altura do card para telas maiores */
  }
  .card-inner {
    width: 100%; /* Faça com que o card interno ocupe a largura total */
  }
  .card-front,#rotateButton,
  .card-back {
    font-size: 24px; /* Restaure o tamanho da fonte para telas maiores */
  }
}