:root {
  --text-color: #dbe4ef;
  --card-front-color: #144480;
  --card-back-color: #00f4bf;
}


body{
    background-image: url(img/bg-desktop.webp);
    font-family: Bai Jamjuree;
    }

    #container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 4rem;
        gap: 3rem;
      }
      
      .cartao {
        margin: 1rem 1rem;
        height: 20rem;
        flex-grow: 1;
        flex-basis: calc(33% - 6rem);
      }
      .cartao_conteudo{
        text-align: center;
        background-color: var(--card-front-color);
        height:100% ;
        transform-style: preserve-3d;
        transition: transform 300ms ease-in-out;
      }

      .cartao_conteudo p{
        margin-top: 1rem;
        padding: 2rem;
        margin-top: 4rem;
      }
      .cartao_conteudo h3 {
       color: var(--text-color);
       border: 1px solid var(--text-color);
        text-align: left;
        padding: 0.5rem;
        position: absolute;
        margin: 0.6rem;
        border-radius: 0.6rem;
        font-size: 1vw;
        backface-visibility: hidden;
      }

      .cartao_conteudo_pergunta p{
        color: var(--text-color);
        font-weight: 500;
      }

      .cartao_conteudo_resposta p{
        color: var(--card-back-color);
        font-weight: 700;
      }
      .cartao.active .cartao_conteudo{
        transform: rotateY(180deg);
      }
.cartao_conteudo_pergunta,
.cartao_conteudo_resposta{
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}
.cartao_conteudo_resposta{
    transform: rotateY(180deg);
}
      footer{
        background-color: black;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
            height: 2rem;
    }
    footer p{
        text-align: center;
    font-size: 0.6rem;
    margin-top: 0.5rem;    
    }

    @media (max-width: 560xp){
      body{
        background: url(img/bg-mobile.jpg);
      }

      .cartao{
        flex: 1 0 calc(100% - 1rem);
      }

      .cartao_conteudo h3{
        font-size: 3vw;
      }

      .cartao_conteudo p{
        font-size: 3vw;
      }
    }