body{
    background-color: blueviolet;
}
footer{
background-color: rgb(248, 252, 255);
color: black;
position: fixed;
bottom: 0;
width: 100%;
height: 2rem;
}
footer p {
text-align: center;
font-size: 0.6rem;
margin-top: 0.5rem;
}
#container {
display: flex;
}
.cartao{
margin: 1rem 1rem;
background-color: rgb(15, 14, 14);
height: 20 rem;
flex-grow: 1;
flex-basis:calc(33% - 6rem) ;
}
.cartao_conteudo {
text-align: center;
background-color: rgb(138, 51, 219);
height: 100%;
}
.cartao_conteudo h3 {
background-color: rgb(65, 19, 19);
text-align: left;
padding: 0.5rem;
position: absolute;
margin: 0.6rem;
border-radius: 0.6rem;
font-size: 1vw;
}
.cartao.hover.cartao_conteudo {
transform: rotate(180deg);
}
.cartao_conteudo{
background-color: rgb(138, 43, 226);
text-align: center;
height: 100%;
.cartao_conteudo{
background-color: rgb(138, 43, 226);
text-align: center;
height: 100%;
transform-style: preserve-3d;
transition: transform 300ms aese-in-out;
}
.cartao_conteudo_pergunta, .cartao_conteudo_resposta{
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
}
.cartao_conteudo_resposta{
transform: rotate(180deg);
}
.cartao_conteudo p{
margin-top: 1rem;
padding: 2rem;
margin-top: 4rem;
}