* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    padding: 1rem;
}

div {
    margin: 1.5rem auto;
}

.card,
.bank,
.paypal {
    background: none;
    border: 2px solid rgb(41, 64, 159);
    padding: 1rem;
    color: rgb(41, 64, 159);
    margin: .5rem 0;
}

.card:hover,
.bank:hover,
.paypal:hover {
    background: rgb(41, 64, 159);
    color: #fff;
}

#card-number,
#cvv,
#date {
    padding: .4rem;
    width: 100%;
}

::placeholder {
    color: rgb(41, 64, 159);
}

#submit {
    background: none;
    border: 2px solid rgb(41, 64, 159);
    padding: .5rem 1.5rem;
    color: rgb(41, 64, 159);
    margin-top: .5rem;
    margin-bottom: .5rem;
}

#submit:hover {
    background: rgb(41, 64, 159);
    color: #fff;
}

.bi-paypal {
    -webkit-text-stroke: rgb(41, 64, 159) !important;
}

@media screen and (min-width: 500px) {
    

    .method h3 {
        color: #fff;
        background: rgb(41, 64, 159);
        font-family: sans-serif;
        padding: 1rem;
        text-align: center;
    }

    
}

@media screen and (min-width: 768px) {
    .wrapper {
        max-width: 50vw;
        margin: 2rem auto;
    }

    
}