header {
  padding-top: 50px;
  margin-bottom: 10px;
  background: #00203F;
  background: linear-gradient(to bottom, rgba(0,10,20,1) 0%, rgba(0,32,63,1) 93%,  rgba(255,255,255,1) 100%);
  }
body {
  margin: 0;
  padding: 0;
  font-family: "Beleren Bold";
}
h1 {
  font-family: "Beleren Small Caps";
  font-size: 48px;
  text-align: center;
  margin: 20px 0;
  color: #fafafa;
}
input {
  width: 500px;
  margin: 10px auto 50px auto;
  padding: 12px 20px;
  background: #93ACC5;
  border: none;
}
@media only screen and (max-width: 500px) {
    input {width: 300px;   overflow: hidden;}
}
.center, #cards {
  text-align: center;
}
#cards ul {  padding: 0;  margin: 0;}
#cards li {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}
#cards img {
  width: 260px;
  height: auto;
}
#cards img:active {
  position:fixed;
  left:10px;
  top:100px;
  width: 375px;
  height: auto;
}
#cards span {display: none;}
footer {
  margin-top: 15px;
  padding: 20px 0;
  background: #00203F;
  background: linear-gradient(to top, rgba(0,10,20,1) 0%, rgba(0,32,63,1) 93%,  rgba(255,255,255,1) 100%);
  color: #fafafa;
  font-family: "Beleren Bold";
  text-align: center;
  }