/* Box Shadow Generator */
.card1 {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(66, 133, 244, 0.75);
  -moz-box-shadow: 5px 5px 10px 0px rgba(66, 133, 244, 0.75);
  box-shadow: 5px 5px 10px 0px rgba(66, 133, 244, 0.75);
}
.card2 {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(219, 68, 55, 0.75);
  -moz-box-shadow: 5px 5px 10px 0px rgba(219, 68, 55, 0.75);
  box-shadow: 5px 5px 10px 0px rgba(219, 68, 55, 0.75);
}
.card3 {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(244, 160, 0, 0.75);
  -moz-box-shadow: 5px 5px 10px 0px rgba(244, 160, 0, 0.75);
  box-shadow: 5px 5px 10px 0px rgba(244, 160, 0, 0.75);
}
.card4 {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(15, 157, 88, 0.75);
  -moz-box-shadow: 5px 5px 10px 0px rgba(15, 157, 88, 0.75);
  box-shadow: 5px 5px 10px 0px rgba(15, 157, 88, 0.75);
}
.card5 {
  -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2) ;
  -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card5:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card1,
.card2,
.card3,
.card4,
.card5 {
  margin: 10px;
}