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

.avatar {
  width: 150px;
}

.card {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  background: #4361ee;
  color: #2b2839;
  border-bottom: 6px solid #3a0ca3;

  text-shadow: 0.25px 0.2px 1px #ff0000;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.card:hover {
  background-color: bisque;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

/*
Stretch goals:
Find other ways you can personalize 
the design of your business card, e.g.:
- change the border(s)
- add border radius
- shuffle the layout
- shadows        🤯
- hover effects  🤯🤯
- animations     🤯🤯🤯
*/