body {
    margin: 20px;
    font-family: 'Courier New', Courier, monospace;
}

.avatar {
    width: 150px;
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #e5dcc5;
    color: #251605;
    border: 1px solid #a79057;
    border-bottom: 3px solid #a79057;
    border-right: 3px solid #a79057;
}

.card:hover {
    animation-name: cardAnimation;
    animation-duration: .4s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

.card:not(:hover) {
    animation-name: cardAnimationReverse;
    animation-timing-function: ease;
    animation-duration: .5s;
}

@keyframes cardAnimationReverse {
    0% {border-color: black;}
    100% {border-color: #a79057;}
}

@keyframes cardAnimation {
    100% {border-color: black;}
}