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

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


@media  screen and (min-width: 240px) {
    .adslot_1 { width: 240px; height: 150px; }
    .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: 150%;
      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%;
    }
    .description {
      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;
    }
    .shutTheBox{
      margin-left: auto;
      margin-right: auto;    
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 11;
    }

    .cafe {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
    .partPartWhole {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 13 ;
    }
    .cricket {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 14;
    }
    
    .tenLessShootOut {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 15;
    }
    .cosyCat {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 16;
    }
    .handyCounters {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 17;
    }
  
    .bondsOf10 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 18;
    }
    .tenFrame {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 19;
    }
    .colourful {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 20;
    }
    .whale {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 21;
    }
    .bottleTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 22;
    }
    .hunt2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 23;
    }
    .monsterTruck {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 24;
    }
    .sumScales {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 25;
    }
   
    .catapult {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 26;
    }
  
    .depthcharger {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 27;
    }
    .spaceJumps {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 28;
    }
    .smoothieMaths {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 29;
    }
    .dinosaurDentist {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 30;
    }
    .birdBalanceAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 31;
    }
    .mummy1 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 32;
    }
    .twilightTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 33;
    }
    .differenceShop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 34;
    }
    .archeryDoubles {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 35;
    }
    
    .patreonLink2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 36;
    }
    .barModeller {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 37;
    }
    .funnyFingers {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 38;
    }
    .popNDrop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 39;
    }
    .numberFactBingo {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 40;
    }
    .numFactF {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 41;
    }
    .tugofwarAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 42;
    }
    .portal {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 43;
    } 
    .aztecTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 44;
    }
    .race2Zero {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 45;
    }
    .complement {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 46;
    }
    .cuisenaire {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 47;
    }
  
    .darts {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 48;
    }
    .rekenrek {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 49;
    }
    .balloonFlight {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 50;
    }
    .difference {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 51;
    }
    .egyptian {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 52;
    }
    .verticalAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 53;
    }
    .verticalSub {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 54;
    }
    .tenFrameNumline {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 55;
    }
    .partitionAddition {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 56;
    }
    .partitionTree {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 57;
    } 
    .meerkat{
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 58;
    }
    
    .advertisements {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1 ;
      grid-row: rows 59;
    }
    .advertisements2 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1 ;
      grid-row: rows 60;
    }
    .advertisements3 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1 ;
      grid-row: rows 61;
    }
    .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) {
    .adslot_1 { width: 460px; height: 100px; }
    .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;
      font-family: "houschka-rounded", sans-serif;
      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%;
    }
    .description {
      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;
    }
    .shutTheBox{
    margin-left: auto;
    margin-right: auto;    
    width:98%;
    align:left;
    grid-column: columns 1/4 ;
    grid-row: rows 6;
  }
 


    .cafe {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 7;
    }
    .partPartWhole {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 7;
    }
    .cricket {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 7;
    }
    
    .tenLessShootOut {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1/3 ;
      grid-row: rows 8;
    }
    .cosyCat {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 8;
    }
    .handyCounters {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 9;
    }
  
    .bondsOf10 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 9;
    }
    .tenFrame {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 9;
    }
    .colourful {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 10;
    }
    .whale {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 10;
    }
    .bottleTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 10;
    }


    .hunt2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
    .monsterTruck {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 12;
    }
    .sumScales {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 12;
    }
   
    .catapult {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 13;
    }
  
    .depthcharger {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 13;
    }
    .spaceJumps {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 13;
    }
    .smoothieMaths {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 14;
    }
    .dinosaurDentist {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 14;
    }
    .birdBalanceAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 14;
    }
    .mummy1 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 15;
    }
    .twilightTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 15;
    }
    .differenceShop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 15;
    }
    .archeryDoubles {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 16;
    }
    
    .patreonLink2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2/4 ;
      grid-row: rows 16;
    }
    .barModeller {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 18;
    }
    .funnyFingers {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 18;
    }
    .popNDrop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 18;
    }
    .numberFactBingo {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 19;
    }
    .numFactF {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 19;
    }
    .tugofwarAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 19;
    }
    .portal {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 20;
    } 
    .aztecTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 20;
    }
    .race2Zero {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 21;
    }
    .complement {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 21;
    }
    .cuisenaire {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 21;
    }
  
    .darts {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 22;
    }
    .rekenrek {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 22;
    }
    .balloonFlight {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 22;
    }
    .difference {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 23;
    }
    .egyptian {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 23;
    }
    .verticalAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 23;
    }
    .verticalSub {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 24;
    }
    .tenFrameNumline {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 24;
    }
    .partitionAddition {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 24;
    }
    .partitionTree {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 25;
    } 
    .meerkat{
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 25;
    }
    
    .advertisements {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1/span 3 ;
      grid-row: rows 11;
    }
    .advertisements2 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1/span 3 ;
      grid-row: rows 17;
    }
    .advertisements3 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:98%;
      grid-column: columns 1/span 3 ;
      grid-row: rows 25;
    }
    .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) {
    .adslot_1 { width: 190px; height: 600px; }
    .wrapper {
      max-width: 1000px;
      display: grid;
      grid-gap: 10px;
      margin: 0 auto;
      grid-template-columns: repeat(4, [columns] 1fr);
      grid-auto-rows: repeat(4, [rows] 1fr);
    }
    .wrapper > * {
      background-color: #a7a7fc;
      font-family: "houschka-rounded", sans-serif;
      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(734px) translateY(0px) rotateY(0deg); 
      }
      50%{
        transform:translateX(735px) 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: 3px;
      width: 80px;
      background: url('gridMenu/navSprite.png') -5px -5px;
      scale:85%;
    }
    .pv {
      left: 75px;
      width: 90px;
      background: url('gridMenu/navSprite.png') -95px -5px;
      scale:85%;
    }  
    .counting {
      left: 160px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -205px 0;
      scale:85%;
    }
    .addition {
      left: 235px;
      width: 65px;
      background: url('gridMenu/navSprite.png') -300px 0;
      scale:85%;
    }
    .multiDiv {
      left: 305px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -390px 0;
      scale:85%;
    }
    .measure {
      left: 375px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -480px 0;
      scale:85%;
    }
    .money {
      left: 450px;
      width: 75px;
      background: url('gridMenu/navSprite.png') -575px 0;
      scale:85%;
    }
    .fractions {
      left: 530px;
      width: 50px;
      background: url('gridMenu/navSprite.png') -680px 0;
      scale:85%;
    }
    .shape {
      left: 590px;
      width: 70px;
      background: url('gridMenu/navSprite.png') -765px 0;
      scale:85%;
    }
    .statistics {
      left: 675px;
      width: 60px;
      background: url('gridMenu/navSprite.png') -870px 0;
      scale:85%;
    }
    .description {

      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;
    }
    .shutTheBox{
    margin-left: auto;
    margin-right: auto;    
    width:98%;
    align:left;
    grid-column: columns 1/4 ;
    grid-row: rows 6;
  }
   
    .cafe {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 7;
    }
    .partPartWhole {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 7;
    }
    .cricket {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 7;
    }
    
    .tenLessShootOut {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1/3 ;
      grid-row: rows 8;
    }
    .cosyCat {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 8;
    }
    .handyCounters {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 9;
    }
  
    .bondsOf10 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 9;
    }
    .tenFrame {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 9;
    }
    .colourful {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 10;
    }
    .whale {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 10;
    }
    .bottleTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 10;
    }
    .hunt2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 11;
    }
    .monsterTruck {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 11;
    }
    .sumScales {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 11;
    }
   
    .catapult {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 12;
    }
  
    .depthcharger {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 12;
    }
    .spaceJumps {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 12;
    }
    .smoothieMaths {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 13;
    }
    .dinosaurDentist {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 13;
    }
    .birdBalanceAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 13;
    }
    .mummy1 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 14;
    }
    .twilightTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 14;
    }
    .differenceShop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 14;
    }
    .archeryDoubles {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 15;
    }
    
    .patreonLink2 {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2/4 ;
      grid-row: rows 15;
    }
    .barModeller {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 16;
    }
    .funnyFingers {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 16;
    }
    .popNDrop {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 16;
    }
    .numberFactBingo {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 17;
    }
    .numFactF {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 17;
    }
    .tugofwarAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 17;
    }
    .portal {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 18;
    } 
    .aztecTakeAway {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 18;
    }
    .race2Zero {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 19;
    }
    .complement {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 19;
    }
    .cuisenaire {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 19;
    }
  
    .darts {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 20;
    }
    .rekenrek {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 20;
    }
    .balloonFlight {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 20;
    }
    .difference {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 21;
    }
    .egyptian {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 21;
    }
    .verticalAdd {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 21;
    }
    .verticalSub {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 22;
    }
    .tenFrameNumline {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 22;
    }
    .partitionAddition {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 3 ;
      grid-row: rows 22;
    }
    .partitionTree {
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 1 ;
      grid-row: rows 23;
    } 
    .meerkat{
      margin-left: auto;
      margin-right: auto;
      
      width:98%;
      align:left;
      grid-column: columns 2 ;
      grid-row: rows 23;
    }
    .advertisements {

      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:120%;
      grid-column: columns 4 ;
      grid-row: rows 1/10;
    }   
    .advertisements2 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:120%;
      grid-column: columns 4 ;
      grid-row: rows 9/15;
    }  
    .advertisements3 {
      background-color: #969595;
      margin-left: auto;
      margin-right: auto;
      
      align:center;
      width:120%;
      grid-column: columns 4 ;
      grid-row: rows 14/26;
    }    
    .wrapperForFooter {
      max-width: 1000px;
      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%;
    }
}
.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;
  
}








@media  screen and (min-width: 1400px) {
  .adslot_1 { width:280px; height: 900px; }
  .wrapper {
    max-width: 1400px;
    display: grid;
    grid-gap: 10px;
    margin: 0 auto;
    grid-template-columns: repeat(5, [columns] 1fr);
    grid-auto-rows: repeat(5, [rows] 1fr);
  }
  .wrapper > * {
    background-color: #a7a7fc;
    font-family: "houschka-rounded", sans-serif;
    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(-10px);
  }
  .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: 1;
  }
  .moreGamesText{
    height:15px;
    grid-column: columns 1/4 ;
    grid-row: rows 3;
    font-size: 225%;
    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(0px) rotateY(0deg);
    }    
    49.9%{
      transform:translateX(734px) translateY(0px) rotateY(0deg); 
    }
    50%{
      transform:translateX(735px) 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: 8px;
    width: 80px;
    background: url('gridMenu/navSprite.png') -5px -5px;
    scale:100%;
  }
  .pv {
    left: 85px;
    width: 90px;
    background: url('gridMenu/navSprite.png') -95px -5px;
    scale:100%;
  }  
  .counting {
    left: 185px;
    width: 65px;
    background: url('gridMenu/navSprite.png') -205px 0;
    scale:100%;
  }
  .addition {
    left: 265px;
    width: 65px;
    background: url('gridMenu/navSprite.png') -300px 0;
    scale:100%;
  }
  .multiDiv {
    left: 340px;
    width: 75px;
    background: url('gridMenu/navSprite.png') -390px 0;
    scale:100%;
  }
  .measure {
    left: 425px;
    width: 75px;
    background: url('gridMenu/navSprite.png') -480px 0;
    scale:100%;
  }
  .money {
    left: 505px;
    width: 75px;
    background: url('gridMenu/navSprite.png') -575px 0;
    scale:100%;
  }
  .fractions {
    left: 595px;
    width: 50px;
    background: url('gridMenu/navSprite.png') -680px 0;
    scale:100%;
  }
  .shape {
    left: 670px;
    width: 70px;
    background: url('gridMenu/navSprite.png') -765px 0;
    scale:100%;
  }
  .statistics {
    left: 760px;
    width: 60px;
    background: url('gridMenu/navSprite.png') -870px 0;
    scale:100%;
  }
  .description {
    font-family: "houschka-rounded", sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: #ffffff;
    color: #525252;
    margin-left: auto;
    margin-right: auto;
    font-size: 245%;
    grid-column: columns 1/4 ;
    grid-row: rows 5;
  }

  .shutTheBox{
    margin-left: auto;
    margin-right: auto;    
    width:98%;
    align:left;
    grid-column: columns 1/4 ;
    grid-row: rows 6;
  }
  
  .cafe {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 7;
  }
  .partPartWhole {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 7;
  }
  .cricket {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 7;
  }
  
  .tenLessShootOut {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1/3 ;
    grid-row: rows 8;
  }
  .cosyCat {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 8;
  }
  .handyCounters {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 9;
  }

  .bondsOf10 {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 9;
  }
  .tenFrame {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 9;
  }
  .colourful {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 10;
  }
  .whale {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 10;
  }
  .bottleTakeAway {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 10;
  }
  .hunt2 {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 11;
  }
  .monsterTruck {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 11;
  }
  .sumScales {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 11;
  }
 
  .catapult {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 12;
  }

  .depthcharger {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 12;
  }
  .spaceJumps {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 12;
  }
  .smoothieMaths {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 13;
  }
  .dinosaurDentist {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 13;
  }
  .birdBalanceAdd {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 13;
  }
  .mummy1 {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 14;
  }
  .twilightTakeAway {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 14;
  }
  .differenceShop {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 14;
  }
  .archeryDoubles {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 15;
  }
  
  .patreonLink2 {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2/4 ;
    grid-row: rows 15;
  }
  .barModeller {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 16;
  }
  .funnyFingers {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 16;
  }
  .popNDrop {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 16;
  }
  .numberFactBingo {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 17;
  }
  .numFactF {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 17;
  }
  .tugofwarAdd {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 17;
  }
  .portal {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 18;
  } 
  .aztecTakeAway {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 18;
  }
  .race2Zero {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 19;
  }
  .complement {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 19;
  }
  .cuisenaire {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 19;
  }

  .darts {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 20;
  }
  .rekenrek {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 20;
  }
  .balloonFlight {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 20;
  }
  .difference {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 21;
  }
  .egyptian {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 21;
  }
  .verticalAdd {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 21;
  }
  .verticalSub {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 22;
  }
  .tenFrameNumline {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 22;
  }
  .partitionAddition {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 3 ;
    grid-row: rows 22;
  }
  .partitionTree {
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 1 ;
    grid-row: rows 23;
  } 
  .meerkat{
    margin-left: auto;
    margin-right: auto;
    
    width:98%;
    align:left;
    grid-column: columns 2 ;
    grid-row: rows 23;
  }
 


  .advertisements {
    background-color: #969595;
    margin-left: auto;
    margin-right: auto;
    
    align:center;
    width:180%;
    grid-column: columns 4/5 ;
    grid-row: rows 1/10;
  }  
  .advertisements2 {
    background-color: #969595;
    margin-left: auto;
    margin-right: auto;
    
    align:center;
    width:180%;
    grid-column: columns 4/5 ;
    grid-row: rows 9/15;
  }
  .advertisements3 {
    background-color: #969595;
    margin-left: auto;
    margin-right: auto;
    
    align:center;
    width:180%;
    grid-column: columns 4/5 ;
    grid-row: rows 14/26;
  }
  
  
  .wrapperForFooter {
    max-width: 1400px;
    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%;
  }

}
.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;

}