body {
    font-family: "Roboto", Arial, sans-serif;
    padding-top: 80px !important;
    background: #a5d5d9;
    background: linear-gradient(90deg, rgba(165, 213, 217, 1) 0%, rgba(211, 230, 217, 1) 54%, rgba(230, 214, 193, 1) 98%);

}

img {
    border-radius: 10%;
}

.card {
    text-align: center;
    background-color: teal;
    border: 0;
    border-radius: 4em 0;
    background: linear-gradient(to left, teal 50%, cyan 50%);
    background-size: 200%;
    background-position: right;
    transition: 0.5s;
}

.card:hover {
    background-position: left;
}