body{
    display:flex;
    height:100vh;
    min-height:35rem;
    align-items:center;
    justify-content:center;
    font-family:'Josefin Sans', sans-serif;
}

.card{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    padding-top:1rem;
    padding-bottom:1rem;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

.card-wrap{
    position:relative;
    margin:0 auto;
}

@media (min-width: 769px){

    .card-wrap{
        max-width:450px
    }
}

.card-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.card-body p{
    font-size:1.1rem;
}

.card-title{
    font-weight:bold;
    font-size:1.8rem;
}

.badge-wrap{
    display:flex;
    justify-content:center;
}

.badge-wrap a.badge{
    display:flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    margin:0 .2rem;
    padding:0;
    opacity:.7;
    border-radius:50%;
    transition:opacity .3s ease-in;
    font-size:1rem;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
}

.badge-wrap a.badge:hover{
    opacity:1;
    color:#fff;
}

.btn{
    color:#fff !important;
    width:10em;
    transition:all .4s;
    border-radius:20px;
    border:2px solid transparent;
}
.btn.btn-back{
    position:absolute;
    top:0;
    left:0;
    border-radius:0;
    width:3rem;
    height:3rem;
    font-size:1.5rem;
    border:0;
}
.btn.btn-back:hover{
    border:0 !important;
}

.form-control{
    font-family:'Handle', cursive;
}

.form-control::-webkit-input-placeholder{
    font-family:'Josefin Sans', sans-serif;
    letter-spacing:.1em;
    font-size:.9rem;
}

.form-control:-ms-input-placeholder{
    font-family:'Josefin Sans', sans-serif;
    letter-spacing:.1em;
    font-size:.9rem;
}

.form-control::-ms-input-placeholder{
    font-family:'Josefin Sans', sans-serif;
    letter-spacing:.1em;
    font-size:.9rem;
}

.form-control::placeholder{
    font-family:'Josefin Sans', sans-serif;
    letter-spacing:.1em;
    font-size:.9rem;
}
.card--welcome{
    z-index:3;
}
.card--welcome .card-title{
    color:#ee9ca7;
}
.card--welcome .btn-wrap{
    display:flex;
    flex-direction:column;
}
.card--welcome .btn{
    color:#fff;
    transition:all .3s;
}
.card--welcome .btn:hover{
    background-color:rgba(238,156,167,.25);
    font-weight:bold;
}
.card--welcome .btn-register{
    margin-bottom:.8em;
    background-color:#ee9ca7;
}
.card--welcome .btn-register:hover{
    color:#ee9ca7;
}
.card--welcome .btn-login{
    background-color:#a7bfe8;
}
.card--register .card-title{
    color:#ee9ca7;
}
.card--register .badge{
    background-color:#ee9ca7;
}
.card--register .btn{
    background-color:#ee9ca7;
}
.card--register .btn:hover{
    background-color:#fff;
    color:#ee9ca7 !important;
    font-weight:bold;
    border:2px solid rgba(238,156,167,.25);
}
.card--register .btn:focus{
    box-shadow:0 0 0 0.2rem rgba(238,156,167,.25);
}
.card--register .form-control{
    color:#ee9ca7;
    border-color:rgba(238,156,167,.25);
}
.card--register .form-control:focus{
    box-shadow:0 0 0 0.2rem rgba(238,156,167,.25);
}
.card--login .card-title{
    color:#a7bfe8;
}
.card--login .badge{
    background-color:#a7bfe8;
}
.card--login .btn{
    background-color:#a7bfe8;
}
.card--login .btn:hover{
    background-color:#fff;
    color:#a7bfe8 !important;
    font-weight:bold;
    border:2px solid rgba(167,191,232,.25);
}
.card--login .btn:focus{
    box-shadow:0 0 0 0.2rem rgba(167,191,232,.25);
}
.card--login .form-control{
    color:#a7bfe8;
    border-color:rgba(167,191,232,.25);
}
.card--login .form-control:focus{
    box-shadow:0 0 0 0.2rem rgba(167,191,232,.25);
}
body{
    background:linear-gradient(to right, #ffdde1, #ee9ca7, #a7bfe8, #6190e8);
    background-size:500% 500%;
    transition:background 3s ease;
    background-position:50% 50%;
}
body.is-register{
    background-position:0% 50%;
}
body.is-login{
    background-position:100% 50%;
}
.card{
    transition:all .3s .1s ease-out;
}
.card:not(.is-show){
    opacity:0;
    -webkit-transform:translate(-50%,-50%) rotateX(95deg);
    transform:translate(-50%,-50%) rotateX(95deg);
}
.card.is-show{
    opacity:1;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    z-index:5;
}