.cards {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .cards {
     display: flex;
     flex-wrap: wrap;
     padding-bottom: 20px;
     overflow-y: auto;
     flex: 0 1 auto;
     justify-content: center;
 }

 .card .image {
     width: var(--card-width, 270px);
 }

 .card {
     border: 1px solid rgba(0, 0, 0, 0.15);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
     width: var(--card-width, 270px);
     padding-top: 0.66em;
     padding-bottom: 0.66em;
     margin: 20px 10px;
     text-align: center;
     border-radius: 1rem;
     cursor: default;
     max-height: 350px;
 }

 .card .content {
     padding-top: 8px;
     padding-left: 10px;
     padding-right: 10px;
 }

 .card input {
     margin: 3px;
 }

 .card .title {
     font-weight: bold;
     color: #A93400;
     font-size: 20px;
 }

 .a {
     text-decoration: none;
     color: #A93400;
 }

 .a:hover {
     color: #C95733;
 }

 .footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: grey;
  text-align: center;
}

.content {
    margin: auto;
    max-width: 1200px;
    
}

input[type=button] {
  background-color: #DDD;
  border: none;
  padding: 4px 4px;
  text-decoration: none;
  margin: 4px 2px;
  min-width: 30px;
  cursor: pointer;
  border-radius: 3px;
}
input[type=button]:hover {
    background-color:#EEE;
}