form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    justify-self: center;
    width: 73vh;
    height: 58vh;
    margin-right: 50px;
}
#card-front {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    z-index: 1;
    background-color: #d7cdcc;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 5px 5px 8px black;
}
input {
    height: 55%;
    border: 1px solid black;
    border-radius: 3px;
}
#total {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
#cardIcon {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: right;
}
#cardNumber {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
#cardHolder {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
#cardExpiration {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 80%;
    padding: 0px 10px;
}
#cardExpiration label {
    grid-column: 1 / 3;
}
#month {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: 75%;
    height: 69%;
}
#year {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    width: 75%;
    height: 69%;
}
#card-back {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: 55% 1fr;
    grid-template-rows: 25% 25% 50%;
    background-color: #d7cdcc;
    padding-top: 12px;
    border-radius: 10px;
    box-shadow: 5px 5px 8px black;
}
#blackLine {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background-color: black;

}
#security {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding-top: 10px;
}
#securityCode {
    width: 50%;
}
#submitButton {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    width: 50%;
    height: 50%;
    justify-self: right;
    align-self: center;
    box-shadow: 5px 5px 8px black;
}
.errors {
    white-space: pre-line; /*needed for 2 errors to be on separate lines*/
    color: red;
}