styles.css

body {
    margin: 20px;
    
    font-family: 'Times New Roman', Times, serif;
}

.avatar {
    width: 150px;
    border-radius: 30%
}

.card {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #d4a373;
    color: #540b0e;
    border-top: 6px solid #9e2a2b;
    border-bottom: 6px solid #9e2a2b; 
    animation: float 1s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.card:hover {
    animation-play-state: paused;

    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.border-blue {
    border: 1px inset #540b0e;
}


/*
Final challenge:
Download the code to your local computer and place it
in a folder called "business-card"
*/