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);
    }
    .wrapper > * {
      background-color: #a7a7fc;
      font-family: "houschka-rounded", sans-serif;
      color: #e3e3ff;
      border-radius: 10px;
      padding: 5px;
      font-size: 95%;
      margin-bottom: 10px;
      margin: 0;
      width:95%;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 1;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
      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: 100%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      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: 100%;
      font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
      align:center;
      grid-column: columns 1;
      grid-row: rows 5;
    }
    .donations {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 6;
    }


    .navBar{
      height: 65px;
      grid-column: columns 1 ;
      grid-row: rows 8;
      position: relative;
      width:99%;
      transform:translateY(-25px);
    }
    .moreGames{
      width:105px;
      height:88px;
      background-color: #ffffff;
      grid-column: columns 1 ;
      grid-row: rows 7;
      transform:translate(-50%,0%) rotateY(180deg)  ;
      background: url(gridMenu/piglet.png);
      animation: walk 0.75s steps(11)  infinite, moveFwd 12s ease-in-out  infinite reverse;
      scale: .45;
    }
    .moreGamesText{
      height:15px;
      grid-column: columns 1/4 ;
      grid-row: rows 7;
      font-size: 125%;
      background-color: rgba(255,255,255,0);
      color: #8080ed;
      transform:translateY(55px);
    }
    @keyframes walk{
      0% {
        background-position:0px 0px ;
      }
      100%{
        background-position:-1330px 0px;
      }
    }
    @keyframes moveFwd{
      0% {
        transform:translateX(0px) translateY(25px) rotateY(0deg);
      }
      49.9%{
        transform:translateX(634px) translateY(25px) rotateY(0deg);
      }
      50%{
        transform:translateX(635px) translateY(25px) rotateY(180deg);
      }
      100%{
        transform:translateX(0) translateY(25px) rotateY(180deg);
      }
    }
    .navlist li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 0;
    }
    .navlist li, .navlist a {
      height: 90px;
      display: block;
    }
    .eyfs {
      left: -20px;
      width: 80px;
      background: url('gridMenu/navSprite.png') -5px -5px;
      scale:50%;
    }
    .pv {
      left: 15px;
      width: 90px;
      background: url('gridMenu/navSprite.png') -95px -5px;
      scale:50%;
    }
    .counting {
      left: 70px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -205px 0;
      scale:50%;
    }
    .addition {
      left: 112px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -300px 0;
      scale:50%;
    }
    .multiDiv {
      left: 145px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -390px 0;
      scale:50%;
    }
    .measure {
      left: 180px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -480px 0;
      scale:50%;
    }
    .money {
      left: 220px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -575px 0;
      scale:50%;
    }
    .fractions {
      left: 265px;
      width: 50px;
      background: url('gridMenu/navSprite.png') -680px 0;
      scale:50%;
    }
    .shape {
      left: 295px;
      width: 70px;
      background: url('gridMenu/navSprite.png') -765px 0;
      scale:50%;
    }
    .statistics {
      left: 345px;
      width: 60px;
      background: url('gridMenu/navSprite.png') -870px 0;
      scale:50%;
    }
    .heading {
      background-color: #ffffff;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-size: 245%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 9;
    }
    .constellation{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 10;
    }
    .dinoSorts{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 11;
    }
    .countingCars{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
    .saucerSorter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 13;
    }
    .flipcounter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 14;
    }
    .hunt1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 15;
    }
    .duckShoot1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 16;
    }
    .nileNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 17;
    }
    .numberSquare{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 18;
    }
    .whackAMole{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 19;
    }
    .nuttyNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 20;
    }
    .playYourCardsRight{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 21;
    }
    .forestFlyer{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 22;
    }
    .rubberBand{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 23;
    }
    .draggableNum{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 24;
    }
    .decimalDemonstrator{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 25;
    }
    .caterpillar{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 26;
    }
    .chimney{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 27;
    }
    .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: 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: #a7a7fc;
      color: #e3e3ff;
      border-radius: 10px;
      padding: 5px;
      font-size: 60%;
      margin-bottom: 10px;
      margin: 0;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 1;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 1;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 1;
    }

    .classTools {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 100%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }

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

    .navBar{
      height: 65px;
      grid-column: columns 1/4 ;
      grid-row: rows 4;
      position: relative;
      width:99%;
      transform:translateY(-25px);
    }
    .moreGames{
      width:125px;
      height:95px;
      background-color: #ffffff;
      grid-column: columns 1 ;
      grid-row: rows 3;
      transform:translate(-50%,0%) rotateY(180deg) translateX(0px);
      background: url(gridMenu/piglet.png);
      animation: walk 0.75s steps(11)  infinite, moveFwd 12s ease-in-out  infinite reverse;
      scale: .6;
      padding:0;
    }
    .moreGamesText{
      height:15px;
      grid-column: columns 1/4 ;
      grid-row: rows 3;
      font-size: 185%;
      background-color: rgba(255,255,255,0);
      color: #8080ed;
      transform:translateY(45px);
    }
    @keyframes walk{
      0% {
        background-position:0px 0px ;
      }
      100%{
        background-position:-1330px 0px;
      }
    }
    @keyframes moveFwd{
      0% {
        transform:translateX(0px) translateY(10px) rotateY(0deg);
      }
      49.9%{
        transform:translateX(634px) translateY(10px) rotateY(0deg);
      }
      50%{
        transform:translateX(635px) translateY(10px) rotateY(180deg);
      }
      100%{
        transform:translateX(0) translateY(10px) rotateY(180deg);
      }
    }
    .navlist li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 0;
    }
    .navlist li, .navlist a {
      height: 90px;
      display: block;
    }
    .eyfs {
      left: -10px;
      width: 80px;
      background: url('gridMenu/navSprite.png') -5px -5px;
      scale:60%;
    }
    .pv {
      left: 35px;
      width: 90px;
      background: url('gridMenu/navSprite.png') -95px -5px;
      scale:60%;
    }
    .counting {
      left: 100px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -205px 0;
      scale:60%;
    }
    .addition {
      left: 150px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -300px 0;
      scale:60%;
    }
    .multiDiv {
      left: 190px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -390px 0;
      scale:60%;
    }
    .measure {
      left: 235px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -480px 0;
      scale:60%;
    }
    .money {
      left: 280px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -575px 0;
      scale:60%;
    }
    .fractions {
      left: 335px;
      width: 50px;
      background: url('gridMenu/navSprite.png') -680px 0;
      scale:60%;
    }
    .shape {
      left: 365px;
      width: 70px;
      background: url('gridMenu/navSprite.png') -765px 0;
      scale:60%;
    }
    .statistics {
      left: 410px;
      width: 60px;
      background: url('gridMenu/navSprite.png') -870px 0;
      scale:60%;
    }
    .heading {
      background-color: #ffffff;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-size: 245%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      align:center;
      grid-column: columns 1/4 ;
      grid-row: rows 5;
    }
    .constellation{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 7;
    }
    .dinoSorts{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 7;
    }
    .countingCars{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 7;
    }
    .saucerSorter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 8;
    }
    .flipcounter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 8;
    }
    .hunt1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 8;
    }
    .duckShoot1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 9;
    }
    .nileNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 9;
    }
    .numberSquare{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 9;
    }
    .whackAMole{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 10;
    }
    .nuttyNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 10;
    }
    .playYourCardsRight{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 10;
    }
    .forestFlyer{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
    .rubberBand{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 12;
    }
    .draggableNum{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 12;
    }
    .decimalDemonstrator{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 13;
    }
    .caterpillar{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 13;
    }
    .chimney{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 13;
    }
    .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: 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: #a7a7fc;
      color: #e3e3ff;
      border-radius: 10px;
      padding: 5px;
      font-size: 90%;
      margin-bottom: 10px;
      margin: 0;
    }
    .mathLink {
      background-color: #a7a7fc;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 1;
    }
    .literacylink {
      background-color: #fd9732;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 2 ;
      grid-row: rows 1;
    }
    .topic {
      background-color: #f4b942;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      height:65px;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 1;
    }

    .classTools {
      background-color: #8080ed;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 1 ;
      grid-row: rows 2;
    }

    .printables {
      background-color: #bb7dd8;
      color: #83a070;
      margin-left: auto;
      margin-right: auto;
      width:95%;
      font-size: 150%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 2;
      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;
      font-weight: 700;
      font-style: normal;
      align:center;
      grid-column: columns 3 ;
      grid-row: rows 2;
    }

    .navBar{
      height: 80px;
      grid-column: columns 1/4 ;
      grid-row: rows 4;
      position: relative;
      width:99%;
      transform:translateY(-20px);
    }
    .moreGames{
      width:105px;
      height:88px;
      background-color: #ffffff;
      grid-column: columns 1 ;
      grid-row: rows 3;
      transform:translate(-50%,0%) rotateY(180deg)  ;
      background: url(gridMenu/piglet.png);
      animation: walk 0.75s steps(11)  infinite, moveFwd 12s ease-in-out  infinite reverse;
      scale: .85;
    }
    .moreGamesText{
      height:15px;
      grid-column: columns 1/4 ;
      grid-row: rows 3;
      font-size: 245%;
      background-color: rgba(255,255,255,0);
      color: #8080ed;
      transform:translateY(35px);
    }
    @keyframes walk{
      0% {
        background-position:0px 0px ;
      }
      100%{
        background-position:-1330px 0px;
      }
    }
    @keyframes moveFwd{
      0% {
        transform:translateX(0px) translateY(0px) rotateY(0deg);
      }
      49.9%{
        transform:translateX(950px) translateY(0px) rotateY(0deg);
      }
      50%{
        transform:translateX(951px) translateY(0px) rotateY(180deg);
      }
      100%{
        transform:translateX(0) translateY(0px) rotateY(180deg);
      }
    }
    .navlist li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 0;
    }
    .navlist li, .navlist a {
      height: 90px;
      display: block;
    }
    .eyfs {
      left: 5px;
      width: 80px;
      background: url('gridMenu/navSprite.png') -5px -5px;
      scale:85%;
    }
    .pv {
      left: 95px;
      width: 90px;
      background: url('gridMenu/navSprite.png') -95px -5px;
      scale:85%;
    }
    .counting {
      left: 203px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -205px 0;
      scale:85%;
    }
    .addition {
      left: 302px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -300px 0;
      scale:85%;
    }
    .multiDiv {
      left: 389px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -390px 0;
      scale:85%;
    }
    .measure {
      left: 480px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -480px 0;
      scale:85%;
    }
    .money {
      left: 574px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -575px 0;
      scale:85%;
    }
    .fractions {
      left: 678px;
      width: 50px;
      background: url('gridMenu/navSprite.png') -680px 0;
      scale:85%;
    }
    .shape {
      left: 756px;
      width: 70px;
      background: url('gridMenu/navSprite.png') -765px 0;
      scale:85%;
    }
    .statistics {
      left: 860px;
      width: 60px;
      background: url('gridMenu/navSprite.png') -870px 0;
      scale:85%;
    }
    .heading {
      background-color: #ffffff;
      color: #525252;
      margin-left: auto;
      margin-right: auto;
      font-size: 245%;
      font-family: "houschka-rounded", sans-serif;
      font-weight: 700;
      align:center;
      grid-column: columns 1/4 ;
      grid-row: rows 5;
    }
    .constellation{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 7;
    }
    .dinoSorts{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 7;
    }
    .countingCars{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 7;
    }
    .saucerSorter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 8;
    }
    .flipcounter{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 8;
    }
    .hunt1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 8;
    }
    .duckShoot1{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 9;
    }
    .nileNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 9;
    }
    .numberSquare{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 9;
    }
    .whackAMole{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 10;
    }
    .nuttyNumbers{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 10;
    }
    .playYourCardsRight{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 10;
    }
    .forestFlyer{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 11;
    }
    .rubberBand{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 11;
    }
    .draggableNum{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 11;
    }
    .decimalDemonstrator{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
    .caterpillar{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 12;
    }
    .chimney{
      margin-left: auto;
      margin-right: auto;

      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 12;
    }
    .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;
      width:95%;
    }
}
@media  screen and (min-width: 1200px) {
    .wrapper {
      max-width: 1100px;
    }
    .pv { left: 110px; }
    .counting { left: 235px; }
    .addition { left: 350px; }
    .multiDiv { left: 450px; }
    .measure { left: 555px; }
    .money { left: 665px; }
    .fractions { left: 785px; }
    .shape { left: 875px; }
    .statistics { left: 995px; }
    @keyframes moveFwd{
      0% {
        transform:translateX(0px) translateY(0px) rotateY(0deg);
      }
      49.9%{
        transform:translateX(1120px) translateY(0px) rotateY(0deg);
      }
      50%{
        transform:translateX(1121px) translateY(0px) rotateY(180deg);
      }
      100%{
        transform:translateX(0) translateY(0px) rotateY(180deg);
      }
    }
}
.header{
  margin-left: 5px;
  background-color: #fff;
  margin-right: 5px;
  grid-column: 1 / -1;

}
.footer {
  margin-left: 5px;

  margin-right: 5px;

  grid-column: 1 / -1;

}
.header{
margin-left: 5px;
background-color: #fff;
margin-right: 5px;
grid-column: 1 / -1;

}
.footer {
margin-left: 5px;
margin-right: 5px;
font-family: 'Verdana';
grid-column: 1 / -1;

}

/* 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) */
@media screen and (max-width: 640px) {
    .wrapper {
      grid-auto-rows: auto;
    }
    .wrapper > * {
      grid-column: auto;
      grid-row: auto;
      order: 1;
    }
    .header,
    .navBar,
    .heading,
    .moreGamesText {
      grid-column: 1 / -1;
    }

    /* navBar comes before moreGamesText/moreGames in DOM order, which (with
       its -25px translateY) made it sit over the printables/subscribe row
       above. Move it after "More games here!"/the pig instead. */
    .header,
    .mathLink,
    .literacylink,
    .topic,
    .classTools,
    .printables,
    .donations,
    .moreGamesText,
    .moreGames {
      order: 0;
    }
    .navBar {
      transform: translateY(-80px);
    }

    /* Pig walks across navBar's (now raised) top edge, in front of the
       "More games here!" text/arrows above it. */
    .moreGames {
      z-index: 1;
    }

    /* subscriber.js forces .wrapper>div img{width:100%!important}, which
       blows up the small "more games" arrow icons. Restore their size. */
    .wrapper .moreGamesText img {
      width: 3% !important;
      height: auto !important;
    }

    /* .moreGamesText's translateY was tuned to overlay it on the pig's row
       in the original layout. In this non-overlapping layout it just drags
       the text (and first arrow) up behind the pig - cancel it. */
    .moreGamesText {
      transform: none;
    }

    /* The pig's walk animation travels +-635px, far wider than the mobile
       column - that overflowed the page. Instead, walk it across the
       width of navBar (~460px wrapper at this breakpoint). */
    @keyframes moveFwd {
      0% {
        transform: translateX(0px) translateY(-55px) rotateY(0deg);
      }
      49.9% {
        transform: translateX(380px) translateY(-55px) rotateY(0deg);
      }
      50% {
        transform: translateX(380px) translateY(-55px) rotateY(180deg);
      }
      100% {
        transform: translateX(0px) translateY(-55px) rotateY(180deg);
      }
    }
}

/* Phone tier: one item per row, regardless of subscriber.js's column count */
@media screen and (max-width: 459px) {
    .wrapper > * {
      grid-column: 1 / -1;
      /* base is 95% here (vs 60% at 460-640px), making the game tile
         descriptions look oversized - match the 460-640px tier. */
      font-size: 60%;
    }
    /* Restore the elements that need to stay larger than the new
       60% base, matching their sizes at the 460-640px tier. */
    .mathLink,
    .literacylink,
    .topic,
    .classTools,
    .printables,
    .donations {
      font-size: 100%;
    }
    .moreGamesText {
      font-size: 125%;
    }
    .heading {
      font-size: 245%;
    }

    /* The navBar icons use fixed left offsets spanning ~425px, wider than
       a phone screen. Contain the overflow to a scrollable strip instead
       of letting it blow out the whole page's width. */
    .navBar {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-left: 20px;
    }

    /* .wrapper is narrower than 460px here, so the 380px walk from the
       640px tier would overflow the page - shorten it to match. */
    @keyframes moveFwd {
      0% {
        transform: translateX(0px) translateY(-55px) rotateY(0deg);
      }
      49.9% {
        transform: translateX(660px) translateY(-55px) rotateY(0deg);
      }
      50% {
        transform: translateX(660px) translateY(-55px) rotateY(180deg);
      }
      100% {
        transform: translateX(0px) translateY(-55px) rotateY(180deg);
      }
    }
}