styles.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap');

html {
     font-size: 10px; /* For ROOT ELEMENT (REM) references */
}
body {
     display: grid;
     height: 100vh;
     width: 100vw;
     background-color: #E7E8FB;
     font-family: 'Nunito', sans-serif;
     font-weight: 300;
     color: #1F4A88;
 }
/* //////////////////////////////////////////////////////////////////////////////////////////*/
/* MAIN CONTAINER - RIGHT */
.main-container {
    display: grid;
    grid-template-columns: 0.7fr 1.2fr;
    width: 1000px;
    height: 750px;
    justify-self: center;
    align-self: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 3.8px;
    background-color: #ECEDFC;
    padding: 25px 75px 25px 75px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////*/
/* IMAGE CONTAINER - LEFT */
.img-container {
    grid-column: 1;
    justify-self: center;
    padding-top: 30px;
    margin-left: -50px;
}
.gif {
    width: 315px;
    height: 250px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////*/
/* PAYMENT PROCESS CONTAINER - RIGHT */
.payment-container {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.07fr 0.05fr 0.12fr 0.12fr 0.22fr 0.19fr 0.12fr 0.15fr;
    padding: 50px 0px 0px 0px;
}
/* PAYMENT STEP */
.payment-process-step {
     grid-row: 1;
     grid-column: 1 / -1;
     font-size: 2rem;
     color: #93AAC8;
}
/* PROCESS TITLE */
.payment-title {
     grid-row: 2;
     grid-column: 1 / -1;
     font-size: 4rem;
     font-weight: 600;
}
/* PAYMENT STEP */
.payment-process-description{
     grid-row: 3;
     grid-column: 1 / -1;
     font-size: 2rem;
}
/* PAYMENT OPTION 1 - CREDIT CARD */
.payment-process-option-1{
     grid-row: 4;
     grid-column: 1;
     height: 40px;
     width: 85%;
     display: grid;
     grid-template-columns: 0.2fr 1fr 0.2fr;
     gap: 5px;
     justify-items: center;
     align-items: center;
     align-content: center;
     align-self: center;
     padding: 15px;
     background-color: white;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
     border-radius: 2.5px;
     cursor: pointer;
}
.payment-process-option-1:hover{
     border: 1.5px solid rgba(147, 170, 200, 0.5);
}
.payment-process-option-1:hover:not(.clicked) {
     border: 2px solid #A2CDF7;
}
.clicked {
     border: 2px solid #A2CDF7;
}
.payment-process-option-1 > img {
     width: 100px;
}
.payment-process-option-1 > span {
     font-size: 1.8rem;
     font-weight: 400;
     white-space: nowrap;
}
/* PAYMENT OPTION 2 - PAYPAL */
.payment-process-option-2{
     grid-row: 4;
     grid-column: 2;
     height: 40px;
     width: 85%;
     display: grid;
     align-self: center;
     grid-template-columns: 1fr 0.1fr;
     gap: 5px;
     justify-items: center;
     align-items: center;
     align-content: center;
     justify-self: end;
     padding: 15px;
     background-color: white;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
     border-radius: 2.5px;
     cursor: pointer;
}
.payment-process-option-2:hover{
     border: 1.5px solid rgba(147, 170, 200, 0.5);
}
.payment-process-option-2 > img {
     width: 100px;
     justify-self: start;
}
/* PAYMENT OPTION - RADIO BUTTON */
.radio-button {
     border-radius: 50%;
     border: 1.5px solid rgba(147, 170, 200, 0.5);
     width: 25px;
     height: 25px;
     font-size: 1.7rem;
     margin-top: 5px;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
}
.checked {
     border-radius: 50%;
     border: 1.5px solid #94C153;
     width: 25px;
     height: 25px;
     color: #94C153;
}
/* CREDIT CARD NUMBER */
.card-number{
     grid-row: 5;
     grid-column: 1 / -1;
     display: grid;
     grid-template-rows: 0.8fr 1fr;
     gap: 5px;
     height: 90%;
     align-self: center;
}
.card-number > span{
     font-size: 2rem;
     color: #93AAC8;
     align-self: end;
     color: rgba(31, 74, 136, 0.85);
}
.card-number input[type=number] {
     border-radius: 2px;
     color: #93AAC8;
     font-size: 1.7rem;
     letter-spacing: 1px;
     padding-left: 10px;
     padding-right: 10px;
     border: 2px solid rgba(147, 170, 200, 0.5);
     height: 100%;
}
.card-number input[type=number]:focus {
     outline: none; /* Delete default border outline */
}
/* EXPIRATION DATE */
.expiration-date {
     grid-row: 6;
     grid-column: 1 / -1;
     display: grid;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 0.5fr 0.5fr 1fr;
     gap: 5px;
     height: 100%;
}
.expiration-date > .exp-date{
     grid-row: 1;
     grid-column: 1 / 3;
     font-size: 2rem;
     align-self: end;
     color: rgba(31, 74, 136, 0.85);
}
.expiration-date > .cvc-text{
     grid-row: 1;
     grid-column: 3;
     justify-content: start;
     font-size: 2rem;
     color: #93AAC8;
     align-self: end;
     color: rgba(31, 74, 136, 0.85);
}
.expiration-date > .expiration-month{
     grid-row: 2;
     border-radius: 2px;
     font-size: 1.7rem;
     letter-spacing: 1px;
     padding-left: 10px;
     padding-right: 10px;
     border: 2px solid rgba(147, 170, 200, 0.3);
     color: #93AAC8;
     align-self: end;
     height: 100%;
     width: 150px;
     justify-items: start;
}
.expiration-date > .expiration-day{
     grid-row: 2;
     border-radius: 2px;
     font-size: 1.7rem;
     letter-spacing: 1px;
     padding-left: 10px;
     padding-right: 10px;
     border: 2px solid rgba(147, 170, 200, 0.3);
     color: #93AAC8;
     align-self: end;
     height: 100%;
     width: 150px;
     justify-items: start;
}
.expiration-date > .cvc-number{
     grid-row: 2;
     border-radius: 2px;
     font-size: 1.7rem;
     letter-spacing: 1.2px;
     padding-left: 10px;
     padding-right: 10px;
     border: 2px solid rgba(147, 170, 200, 0.3);
     color: #93AAC8;
     align-self: end;
     height: 100%;
     width: 150px;
     justify-items: start;
}
/* POLICY TERMS */
.policy-terms {
     grid-row: 7;
     grid-column: 1 / -1;
     justify-content: start;
     font-size: 1.5rem;
     color: #93AAC8;
     align-self: end;
     color: rgba(31, 74, 136, 0.85);
     align-self: center;
}
/* JOIN NOW BUTTON */
.join-now-button {
     grid-row: 8;
     grid-column: 1 / -1;
     width: 40%;
     height: 50%;
     background-color: #2F7A3F;
     color: white;
     border-radius: 5px;
     border: 1px solid white;
     font-family: 'Nunito', sans-serif;
     font-weight: 500;
     letter-spacing: 1px;
     font-size: 1.5rem;
}