@import url(_reset_patterns.css);

html {
	font-size: 62.5%;
}

main {
  display: flex;
  justify-content: center;
}

.pagamento-assinante {
  display: flex;
  background-color: white;
  gap: 1rem;
  flex-direction: column;
  width: 800px;
  padding: 3rem;
}

.pagamento-assinante label {
  font-size: 2rem;
  display: block;
}

.pagamento-assinante input {
  width: 30%;
  height: 3rem;
  font-size: 2rem;
  padding: .3rem;
  background: #dbdbdb;
}

.pagamento-assinante input::placeholder{
  color: gray;
}

.pagamento-assinante input::-webkit-outer-spin-button,
.pagamento-assinante input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#flex {
  display: flex;
}

#validade {
  width: 32%;
}

#nome {
  width: 60%;
}
#cartao {
  width: 60%;
}
#cpf {
  width: 60%;
}
#data {
  width: 80%;
}

#telefone {
  width: 17%;
}

.comprarbutton {
  display: flex;
  align-self: start;
  background: #F8B74C;
  padding: 1rem 4rem;
  font-size: 1.5rem;
  color: #421A12;
}

.comprarbutton:hover{
  background: #fc9d00;
}

.mensagem-erro {
  color: red;
}

.select-planos {
  width: 20%;
  height: 2rem;
  border: 1px solid black;
}

@media (max-width: 324px) {
  .pagamento-assinante {
    width: 324px;
  }
  #flex {
    display: flex;
    flex-direction: column;
  }
  #nome,
  #cartao {
    width: 80%;
  }

  #data {
    width: 55%;
  }
  .select-planos {
    width: 55%;
  }
  #telefone {
    width: 47%;
  }
}