@charset "utf-8";

/*
  header height: 35ex
  index width: 3.5em, height: 97ex (short height: 25ex) 

  320 x  480 : no nav
  480 x  320 : no nav

  360 x  640 : only A, E, J, O, T, Z, #
  640 x  360 : no nav

  768 x 1024 : all
  800 x 1280 : all
  980 x 1280 : all
*/


.wrapper {
    width: 100%;
    max-width: 2048px;
    margin: 0 auto;
    align-content: stretch;
}

.wrapper {
   display: grid;
   grid-column-gap: 1.25em;
   grid-row-gap: 0.5em;
   grid-template-columns: repeat(12, [col] 1fr); 
}

header, footer {
  grid-column: col / span 12;
  z-index:2;
  background-color:#fff;
}

header {
  align-self: center;
  justify-self: center;
  grid-row: 1;
}   

footer {
  grid-row: 3;
}

nav {
  align-self: flex-start;
  justify-self: start;
  display:none; /* turn on later */
  z-index:0; /* lowest in this stylesheet */
}

main {
    grid-column: col / span 12; /* change later */
    grid-row: 2;
    z-index:2;
}



/* wide enough for 2 columns */
@media (min-width:39em) {
  nav {
    grid-column: 1;
    grid-row: 2;
    display:block;
  }

  main {
    grid-column-start: 2 ;
    grid-column-end:  12 ;
  }

  .navindex li:nth-child(2)  {display:none} 
  .navindex li:nth-child(3)  {display:none} 
  .navindex li:nth-child(4)  {display:none} 
  .navindex li:nth-child(6)  {display:none} 
  .navindex li:nth-child(7)  {display:none} 
  .navindex li:nth-child(8)  {display:none} 
  .navindex li:nth-child(9)  {display:none} 
  .navindex li:nth-child(11) {display:none} 
  .navindex li:nth-child(12) {display:none} 
  .navindex li:nth-child(13) {display:none} 
  .navindex li:nth-child(14) {display:none} 
  .navindex li:nth-child(16) {display:none} 
  .navindex li:nth-child(17) {display:none} 
  .navindex li:nth-child(18) {display:none} 
  .navindex li:nth-child(19) {display:none} 
  .navindex li:nth-child(21) {display:none} 
  .navindex li:nth-child(22) {display:none} 
  .navindex li:nth-child(23) {display:none} 
  .navindex li:nth-child(24) {display:none} 
  .navindex li:nth-child(25) {display:none} 
}


@media (min-width:39em) and (min-height:107.5ex) {
  nav {
    grid-column: 1;
    grid-row: 2;
    display:block;
  }

  main {
    grid-column-start: 2;
    grid-column-end:  12;
  }

  .navindex li:nth-child(2)  {display:list-item} 
  .navindex li:nth-child(4)  {display:list-item} 
  .navindex li:nth-child(6)  {display:list-item} 
  .navindex li:nth-child(8)  {display:list-item} 
  .navindex li:nth-child(10) {display:list-item} 
  .navindex li:nth-child(12) {display:list-item} 
  .navindex li:nth-child(14) {display:list-item} 
  .navindex li:nth-child(16) {display:list-item} 
  .navindex li:nth-child(18) {display:list-item} 
  .navindex li:nth-child(20) {display:list-item} 
  .navindex li:nth-child(22) {display:list-item} 
  .navindex li:nth-child(24) {display:list-item} 
  .navindex li:nth-child(26) {display:list-item} 
}

@media (min-width:39em) and (min-height:117ex) {
  .navindex li:nth-child(3)  {display:list-item} 
  .navindex li:nth-child(7)  {display:list-item} 
  .navindex li:nth-child(9)  {display:list-item} 
  .navindex li:nth-child(11) {display:list-item} 
  .navindex li:nth-child(13) {display:list-item} 
  .navindex li:nth-child(15) {display:list-item} 
  .navindex li:nth-child(17) {display:list-item} 
  .navindex li:nth-child(19) {display:list-item} 
  .navindex li:nth-child(21) {display:list-item} 
  .navindex li:nth-child(23) {display:list-item} 
  .navindex li:nth-child(25) {display:list-item} 
}