body {
    margin: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.avatar {
    width: 150px;
    border-right: 6px solid #9bd2f782;
    border-bottom: 6px solid #9bd2f782;
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2839;
    background: #ffe7fdff;
    border-right: 6px solid #9bd2f782;
    border-bottom: 6px solid #9bd2f782;

}

.card:hover {
    animation: colorShift 7s ease-in-out infinite alternate;
}

@keyframes colorShift {
    0% {background-color: #ffe7fdff;}
    50% {background-color: #80ffdb;}
    95% {background-color: #ffe7fdff;}
    100% {background-color: #ffe7fdff;}
}

.p2 {
    font-weight: bold;
}

.border-blue {
    border: 1px dotted blue;
}