body {
  font-size: 1.2em;
}

h1, h2 {
  text-align: center;
}
label {
    display: block;
    margin-bottom: 8px;
}
  button {
    background-color: #c4c9c4;
    color: rgb(27, 25, 25);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .errors {
    white-space: pre-line; 
    color: red;
  }

/* Form Grid*/
form {
  width: 50%;

  /* Grid Layout */
  justify-self: center;
  display: grid;
  grid-template-columns: 110px 250px 135px;
  grid-template-rows: 50px 195px 50px 45px;
  gap:5px;
}


/*Card front grid */
#card_front{
  justify-content: center;
  width: 345px;
  height:205px;
  background-color: rgb(216, 220, 216);
  box-shadow: 5px 5px 8px #636363;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 180px 120px;
  grid-template-rows: auto auto auto;
  gap: 10px;

  /*Form grid info*/
  grid-column: 1/3;
  grid-row:1/3;
  z-index: 1;
}

#totalLabel{
  grid-column: 1/2;
  grid-row:1/2;
  margin-top:15px;
  padding:0px;
}
#card-icon{
  grid-column: 2/3;
  grid-row:1/2;
  justify-self: right;
  font-size: 42px;
  margin: 0px;
}
#creditCardLabel{
  grid-column: 1/2;
  grid-row:2/3;
  margin:0;
}
#creditCardNumber{
  margin-bottom: 5px;
  border-radius: 2px;
}
#cardHolder{
  border-radius: 2px;
}
#cardHolderContainer{
  grid-column: 1/2;
  grid-row:3/4;
}
#cardExpiration{
  grid-column: 2/3;
  grid-row:3/4;
}
#month, #year{
  width:30px;
  padding: 5px;
   border-radius: 2px;
}
#creditCardNumberContainer{
  margin:0px;
}

/*Card Back Grid  */
#card_back{
  width: 390px;
  height:195px;
  background-color: rgb(196, 201, 196);
  box-shadow: 5px 5px 8px #636363;
  border-radius: 10px;
  padding-bottom:20px;

  display: grid;
  grid-template-columns: 1fr 120px;
  grid-template-rows: 60px 1fr 60px;

  /*Form grid info*/
  grid-column:2/4;
  grid-row: 2/4;
  z-index: 0;
}
#cvcContainer{
  grid-column:2/3;
  grid-row:3/4;
  margin: auto;
  padding:10px;
}
#cvcLabel{
  margin: 0;
  text-align: right;
}
#cvc{
  width:30px;
  padding:5px;
  border-radius: 2px;
}
#stripe{
  background-color: black;
  height: 38px;
  width: 100%;
  margin-top: 15px;
  grid-column: 1 / 3;
  grid-row: 1;
}
button{
  justify-self: right;
  width: 75px;
  grid-column: 3/4;
  grid-row:4/5;

  background-color: rgb(238, 241, 238);
  box-shadow: 5px 5px 8px #636363;
  border-radius: 5px;
  border: 2px solid black;
}