html {
//    background:#FFFFF8;
    background: #DDB;
    border-collapse:collapse;
    font-family: "Manrope", sans-serif;
}
body {
    margin: 0;
}
.head {
    background:#282800;
}
.head-content {
    margin:0 auto;
    width:65%;
}
.body {
    margin:0 auto;
    width:65%;
}
.content {
    background: #FFE;
    position:relative;
}
.p-0 {
    padding:0;
}
.foot {
    background: #553;
}
.foot-container {
    margin:0 auto;
    width:65%;
    color: #fff;
    font-size:80%;
}
.card {
    background:#fff;
    margin:0.25em;
    border:1px solid #CCA;
    padding: 0.5em;
    width:300px;
    display:inline-block;
    border-radius:8px;
}
.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}
h1,h2 {
    margin: 0;
    margin-bottom:0.5em;
}
h3 {
    margin: 0;
    margin-bottom:0.5em;
}
hr { margin: 1.5em 0; }
button {
    background: #664;
    padding: 0.5em;
    font-size:100%;
    color:#FFE;
    font-weight:750;
}
.separator {
  font-size:200%;
  margin:0.25em;
}
.content.hero {
  height:512px;
  position:relative;
}
.hero-bg {
  height:512px;
  width:100%;
  position:absolute;
  top:0;
  background-image: url("puzzles.jpg");
  background-size:cover;
  background-position-y: 25%;
  filter: brightness(40%) contrast(70%);  /* ← Adjust only the background! */
  z-index:0;
}
.hero-content {
  z-index:100;
  position:absolute;
  color:#fff;
  text-align:center;
  top:50%;
  transform: translateY(-50%);
  margin:0 5em;
  width:80%;
}
.hero-content p {
  font-size:120%;
  font-weight: 1000;
}
.hero-content h1 {
  font-size:350%;
}
.content-section {
  padding:1em;
}

@media (max-width: 1280px) {
 .head-content { width: 100%; }
 .body { width: 100%; }
 .foot-container { width: 100%;}
 h1, h2 { font-size: 100%; }
 .hero-content h1 { font-size: 200%; }
 .hero-content p { font-size: 100%; }
 .table, .table-row, .table-cell {
   display:inline-block;
 }
 .card {
  width: 384px;
 }
}

.foot-content { padding: 0.5em; }

.pill {
  background:#EED;
  display:inline-block;
  padding:0.5em;
  margin:0.25em;
  border-radius:15px;
  font-size:85%;
  font-weight:750;
  color:#444;
}

input[type="text"], select, input[type="submit"], textarea {
  margin:0.5em 0;
  padding:0.5em;
  font-size:120%;
  width:100%;
}

@media (min-width: 768px) {
    input[type="text"], select, input[type="submit"], textarea {
	width:50%;
    }
}

a {
  font-weight:750;
  color:#440;
}