body {
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode',
               'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Header */
header {
  display: block;
  background-color: goldenrod;
  padding: 8px 0;
  text-align: center;
  
}

.card {

  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px; /* 10px rounded corners of card */
    margin: 10px;
  padding: 20px;
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 5px 5px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 2px 16px 16px 2px rgba(0.75,0.75,0.75,0.75);
  cursor: pointer;
}

/* Add some padding inside the card container */
.container {
  padding: 2px 10px;
}

.main-container{
    display: flex;
    margin: 10px;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
}