body {
  margin: 20px;
  background-color: #fff;
  color: #444;
}

a {
    color: white;
    text-decoration: none;
}

@media  screen and (min-width: 240px) {
    .wrapper {
      max-width: 240;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(1, [columns] 1fr);
      grid-auto-rows: repeat(13, [rows] 1fr);
      font-family: "houschka-rounded", sans-serif;
    }
    .wrapper > * {
      background-color: #f7d79f;
      color: #fff;
      border-radius: 10px;
      padding: 5px;
      font-size: 150%;
      margin-bottom: 10px;
      margin: 0;
    }

    .description {
      background-color: #c7f7aa !important;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      font-size: 100%;
      grid-column: columns 1;
      grid-row: rows 1;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 3;
    }
    .classTools {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 4;
    }

    .printables {
      background-color: #bb7dd8;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1;
      grid-row: rows 5;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 6;
    }
    .donations {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1;
      grid-row: rows 7;
    }

    .nocturnal{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 9;
        font-size: 90%;
    }
    .victorians{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 10;
        font-size: 90%;
    }
    .knight{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 11;
        font-size: 90%;
    }
    .chineseNewYear{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 12;
        font-size: 90%;
    }
    .hongBao{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 13;
        font-size: 90%;
    }
    .packetPrinter{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 14;
        font-size: 90%;
    }
    .beebotJacket{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 15;
        font-size: 90%;
    }
    .bunting{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 17;
        font-size: 90%;
    }

    .wrapperForFooter {
      max-width: 460px;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: minmax(150px, auto);
    }
    .wrapperForFooter > * {
      background-color: #525252;
      color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 90%;
      margin-bottom: 10px;
      margin: 0;
    }
}

@media  screen and (min-width: 460px) {
    .wrapper {
      max-width: 460px;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(3, [columns] 1fr);
      grid-auto-rows: repeat(6, [rows] 1fr);
    }
    .wrapper > * {
      background-color: #f7d79f;
      color: #fff;
      border-radius: 10px;
      padding: 5px;
      font-size: 90%;
      margin-bottom: 10px;
      margin: 0;
    }

    .description {
      background-color: #c7f7aa !important;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      font-size: 100%;
      grid-column: columns 1/span 3 ;
      grid-row: rows 1;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 2;
    }
    .classTools {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 3;
    }

    .printables {
      background-color: #bb7dd8;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2;
      grid-row: rows 3;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 2;
    }
    .donations {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3;
      grid-row: rows 3;
    }

    .nocturnal{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 6;
        font-size: 90%;
    }
    .victorians{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 6;
        font-size: 90%;
    }
    .knight{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 6;
        font-size: 90%;
    }
    .chineseNewYear{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .hongBao{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .packetPrinter{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .beebotJacket{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 8;
        font-size: 90%;
    }
    .bunting{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 8;
        font-size: 90%;
    }

    .wrapperForFooter {
      max-width: 460px;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: minmax(150px, auto);
    }
    .wrapperForFooter > * {
      background-color: #525252;
      color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 90%;
      margin-bottom: 10px;
      margin: 0;
    }
}
@media  screen and (min-width: 1000px) {
    .wrapper {
      max-width: 950px;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(3, [columns] 1fr);
      grid-auto-rows: repeat(4, [rows] 1fr);
    }
    .wrapper > * {
      background-color: #f7d79f;
      color: #fff;
      border-radius: 10px;
      padding: 5px;
      font-size: 150%;
      margin-bottom: 10px;
      margin: 0;
      width:95%;
    }
    .description {
      background-color: #c7f7aa !important;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1/4 ;
      grid-row: rows 1;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 2;
    }
    .classTools {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 3;
    }

    .printables {
      background-color: #bb7dd8;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2;
      grid-row: rows 3;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 2;
    }
    .donations {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3;
      grid-row: rows 3;
    }

    .nocturnal{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .victorians{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .knight{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 7;
        font-size: 90%;
    }
    .chineseNewYear{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 8;
        font-size: 90%;
    }
    .hongBao{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 8;
        font-size: 90%;
    }
    .packetPrinter{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 8;
        font-size: 90%;
    }
    .beebotJacket{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 9;
        font-size: 90%;
    }
    .bunting{
      margin-left: auto;
      margin-right: auto;
      font-family: "houschka-rounded", sans-serif;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 9;
        font-size: 90%;
    }

    .wrapperForFooter {
      max-width: 100%;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: minmax(150px, auto);
    }
    .wrapperForFooter > * {
      background-color: #525252;
      color: #fff;
      border-radius: 10px;
      padding: 10px;
      font-size: 90%;
      margin-bottom: 10px;
      margin: 0;
    }
}
@media screen and (min-width: 1200px) {
    .wrapper { max-width: 1100px; }
}
.header{
  margin-left: 5px;
  background-color: #fff;
  margin-right: 5px;
  grid-column: 1 / -1;
  font-family: "houschka-rounded", sans-serif;
}
.footer {
  margin-left: 5px;
  margin-right: 5px;
  grid-column: 1 / -1;
  font-family: 'Verdana';
}

/* Negate subscriber.js's injected .description{max-width:780px} so the
   intro banner spans the full grid width, matching mobilePage/index.html. */
.description {
  max-width: none !important;
}

/* Option 1 prototype: cooperate with subscriber.js's forced 2-col grid at <=640px
   instead of relying on named grid lines (which subscriber.js's !important strips).
   This page has no navBar/pig section; .header and .description stay full-width
   banner rows, everything else (nav links + topic tiles) auto-places into the
   2-col grid. */
@media screen and (max-width: 640px) {
    .wrapper {
      grid-auto-rows: auto;
    }
    .wrapper > * {
      grid-column: auto;
      grid-row: auto;
      order: 1;
    }
    .header,
    .description {
      grid-column: 1 / -1;
    }
}

/* Phone tier: bring the 240px-tier's 150% base font-size down to this page's
   own 90% "compact" size (already used at the 460px+ tiers) */
@media screen and (max-width: 459px) {
    .wrapper > * {
      font-size: 90%;
    }
}