/* --------------- Common attributes --------------- */

body {
    margin: 0;
    overflow: hidden;
}

form {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 5fr 1fr 1fr;
    width: 600px;
    height: 400px;
    gap: 20px;
    margin: 0 auto;
}

fieldset {
    border: none;
    display: inline;
}

fieldset label, span {
    display: block;
    letter-spacing: 1px;
}

fieldset input {
    margin-right: 10px;
    height: 24px;
    font-size: 16px;
}

/* --------------- Card Front --------------- */

.card-back, .card-front {
    background-color: lightgray;
    border-radius: 10px;
}

.card-front {
    grid-row: 1/3;
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 2fr, 1fr;
    grid-template-rows: 1fr, 1fr, 1fr;
    box-shadow: 4px 4px 4px gray;
    z-index: 2;
}

.total-field {
    grid-column: 1/3;
    display: flex;
    align-items: center;
    padding-right: 30px;
}

#total {
    margin-left: 10px;
}

.total-field img {
    margin-right: 10px;
    margin-left: auto;
}

.card-number-field {
    grid-column: 1/3;
}

#card-number {
    width: 90%;
}

.card-holder-field {
    grid-column: 1/3;
    display: flex;
}


.card-holder-field > div {
    width: 100%;
}

#expiration-month, #expiration-year {
    width: 40px;
}

/* --------------- Card Back --------------- */

.card-back {
    grid-column: 2/4;
    grid-row: 2/4;
    z-index: 1;
    padding: 20px 0;
}

.card-back > div {
    width: 100%;
    background-color: black;
    height: 40px;
}
    
.card-code {
    margin-top: 110px;
    margin-left: 340px;
}

#cvc {
    width: 60px;
}

#submit {
    grid-row: 4/5;
    grid-column: 3/4;
    width: 80px;
    height: 30px;
    border: 2px solid black;
    border-radius: 7px;
}

#submit:hover {
    background-color: lightgray;
}