/*Importando font do google fonts: Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    justify-content: center;
    align-items: center;

    font-size: 1.2rem;
    letter-spacing: 2px;

    /*Font importada do google fonts: Space Grotesk*/
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;


    /*Imagem de fundo na lateral esquerda*/
    background-image: url(../images/bg-main-desktop.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left center;
    

}

    /*SECTION COM CARTÕES*/


/*Section com os cartões e inputs de dados (elemento pai*/
.section_imgcartoes_dados {
    display: flex;
    flex-direction: row;
    gap: 5rem;

    margin-top: 2rem;

}



    /*IMAGENS DOS CARTÕES*/

/*1º Article com as imagens dos cartões*/
.article_img_cartoes {
    margin-right: 5rem;


}

/*Frente do cartão*/

/*Div imagem da frente do cartão*/
.div_img_frente_cartao {
    margin-bottom: 1rem;
    margin-left: 6rem;


}

/*Imagem da frente do cartão*/
.img_frente_cartao {


}

/*Logo da frente do cartão*/
.logo_card {
    width: 6rem;
    height: auto;
    top: 3rem;
    left: 8rem;
    
    position: absolute;
    z-index: 2;

}

/*Número do display frente do cartão*/
.numero_display_card {
    margin-left: 1rem;
    margin-top: -7.3rem;
    margin-bottom: 1rem;

    width: 100%;

    font-size: 1.7rem;
    color: white;

    z-index: 2;


}

/*Div com o nome e vencimento do cartão (div pai)*/
.div_display_nome_vencto {
    display: flex;
    flex-direction: row;

    gap: 2rem;

    font-size: 1rem;

    margin-bottom: 3rem;
    margin-top: 2rem;

}

/*Nome do display frente do cartão*/
.nome_display_card {
    text-transform: uppercase;
    margin-left: 1rem;
    color: white;

}

/*Vencimento do cartão na frente do cartão*/
.vencto_card {
    /*letter-spacing: 2px;*/
    color: white;

    /*margin-top: 2rem;*/
    /*margin-bottom: 2rem;*/

    z-index: 1;
    /*position: absolute;*/

    margin-left: 8rem;


}



/*Verso do cartão*/

/*Div imagem de trás do cartão*/
.div_img_tras_cartao {
    margin-left: 10rem;
    margin-bottom: 0;


}

/*Imagem de trás do cartão*/
.img_tras_cartao {
     
    
}

/*div pra colocar os 3 números no verso do cartão*/
.cvc_display_card {
    font-size: 1rem;
    color: white;
    /*letter-spacing: .7rem;*/

    margin-left: 22rem;
    margin-top: -8.5rem;
    margin-right: 5rem;
    margin-bottom: 7rem;
    
    /*z-index: 2;*/
    
    /*position: absolute;*/

}

/*3 números verso do cartão*/
#id-cvc_card_display {


}




    /*INSERÇÃO DE DADOS*/

/*2º Article com os dados a serem digitados pelo usuário*/
.article_dados {
    margin-top: 4rem;


}

/*Todos label*/
label {
    text-transform: uppercase;
    font-size: .8rem;

}

/*Todos inputs*/
input {
    margin-top: .2rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: .3rem;


}


/*Todos os placeholders*/
::placeholder {
    padding-left: .3rem;
    font-size: 1rem;
}


/*Mudar a borda de todos os inputs ao clicar com o mousse*/
input:focus {
    border-color: rgb(207, 108, 207); 
    outline: none; /* Remove o contorno padrão do navegador */
}
  

/*Pra tirar as setas do input*/
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    
} 

/*Label pro Cardholder Name , Exp. Date (MM/YY) e CVC*/
.label_nome {


}

/*Input nome*/
#nome_titular {
    padding-right: 8rem;
    padding-top: .3rem;
    padding-bottom: .3rem;

}



/*Label pro Card Number*/
.label_numero {
    margin-top: .2rem;


}

/*Input número cartão*/
#numero_cartao {
    padding-right: 8rem;
    padding-top: .3rem;
    padding-bottom: .3rem;

}


/*Div com label e inputs Exp. Date e cvc (elemento pai do exp, date e cvc*/
.div_exp_date_cvc {
    display: flex;

}

/*Div só com o exp e date*/
.div_exp_date {


}
/*Label Exp. Date (MM/YY)*/
.label_exp_date {


}

/*Input pro mês*/
.input_mes {
    width: 4rem;

    margin-right: .2rem;
    padding-top: .3rem;
    padding-bottom: .3rem;

}

/*Input pro ano*/
.input_ano {
    width: 4rem;

    margin-right: .2rem;
    margin-left: .8rem;

    padding-top: .3rem;
    padding-bottom: .3rem;

}



/*Div só com CVC*/
.div_cvc {
    margin-left: .8rem;

}

/*Label CVC*/
.label_cvc {
    margin-left: .8rem;
    
   
}

/*Input CVC*/
.input_cvc {
    width: 12rem;

    margin-right: .2rem;
    margin-left: .8rem;

    padding-top: .3rem;
    padding-bottom: .3rem;

    /*padding-right: 12rem;*/
 

}


    /*BOTÃO*/

.div_botao {
    margin-top: 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;


}

/*Botão*/
.btn_tex {
    font-size: 1.2rem;
    letter-spacing: .1rem;
    padding: .4rem 10rem .4rem 8rem;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    background-color: rgb(59, 2, 59);
    color: white;
    /*width: auto;*/
    text-align: center;

    
}

.btn_tex:hover {
    background-color: rgba(59, 2, 59, 0.781);

}



/*MENSAGEM MOSTRADA COM O JS APÓS O USUÁRIO PREENCHER COM SEUS DADOS*/

/*Div com mensagem de verificação completada com sucesso*/

.div_container_msgm_completa {
    /*Pra não mostrar na tela porque vai mostrar depois que o usuário digitar os dasdos.*/
    display: none;

}




    /*FOOTER*/

.div_footer {
    justify-content: center;
    align-items: center;
    margin-top: 2rem;

    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0;



}

/*Copyright*/
.p_copyright {
    font-size: 11px; 
    text-align: center;


}

/*Autora*/
.attribution {
    font-size: 11px; 
    text-align: center;


}

.attribution_link {
    color: hsl(228, 45%, 44%);


}














































































































































































































/*Esse trabalho foi feito por Luciene Lima*/