*{
    margin: 0;
    box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    background: linear-gradient(320deg, #eb92be, #ffef78, #63c9b4);
    font-family: "segoe UI", sans-serif;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    margin: 0 auto;
    max-width: 34rem;
    width: 90%;
}
input{
    background-color: transparent;
    border: none;
    color: #fff;
    font: inherit;
    width: auto;
}
input::placeholder{
color: #fff;
}
label{
    display: block;
}
.card  {
    background-color: #171a1c;
    border-radius: 14px;
    color: #bebebe;
    padding: 32px;
}
.header{
    margin-bottom: 7rem;
}

.title{
    color: #fff;
    float: left;
    font-size: 1.5rem;

}

.logo{
    float: right;
}
.row{
    margin-bottom: 1.5rem;
}
.content{
    margin-bottom: 5rem;
}
.content input{
    outline: none;
}
.card-number{
    font-size: 32px;
}
.card-expire{
    float: left;
}
.card-expire input{
    font-size: 0.9rem;
}
.card-expire-month{
    width: 22%;
}
.card-expire-month, .card-expire-year{
    float: left;
}
.card-cvv{
    float: right;
}
.card-cvv input{
    width: 2rem;
    text-align: center;
    font-size: 0.9rem;
}