@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] auto); 
  /*    grid-template-columns: repeat(12, [col] 1fr); */
}

.if-wide {
   display:none
}

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

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) {

  .if-wide {
    display:block
  }

  nav {
    grid-column: 1;
    grid-row: 2;
    justify-content:center;
    align-items:stretch; align-content:center;
  }

  nav, #index {
    display:flex;
    flex-direction:column;
  }

 #index, #index li {
    flex-basis:auto;
    flex-grow:1;
  }

  #index li {
   flex-basis: 1.5em;
  }

  main {
    grid-column-start: 2 ;
    grid-column-end:  12 ;
  }
  .navindex li:nth-child(1)  {display:none} 
  /* 2 (A) */ 
  .navindex li:nth-child(3)  {display:none} 
  .navindex li:nth-child(4)  {display:none} 
  .navindex li:nth-child(5)  {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} 
  /* 10 (I) */ 
  .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(15) {display:none} 
  .navindex li:nth-child(16) {display:none} 
  /* 17 (P) */ 
  .navindex li:nth-child(18) {display:none} 
  .navindex li:nth-child(19) {display:none} 
  .navindex li:nth-child(20) {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} 
  .navindex li:nth-child(26) {display:none} 
  /* 27 (Z) */ 
  /* 28 (#) */ 
  .navindex li:nth-child(29) {display:none} 
}


@media (min-width:39em) and (min-height:107.5ex) {
  nav {
    grid-column: 1;
    grid-row: 2;
    /* other properties inherited from min-width:39 */
  }

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

  /*  1 (top) */
  /*  2 (A)  on from before */
  /*  3 (B) */
  /*  4 (C) */
  /*  5 (D) */
  .navindex li:nth-child(6)  {display:list-item} 
  /*  7 (F) */
  /*  8 (G) */
  /*  9 (H) */
  /* 10 (I) on from before */
  /* 11 (J) */
  /* 12 (K) */
  /* 13 (L) */
  .navindex li:nth-child(14) {display:list-item} 
  /* 15 (N) */
  /* 16 (O) */
  /* 17 (P) on from before */
  /* 18 (Q) */
  /* 19 (R) */
  /* 20 (S) */
  .navindex li:nth-child(21) {display:list-item} 
  /* 22 (U) */ 
  /* 23 (V) */
  .navindex li:nth-child(24) {display:list-item} 
  /* 25 (X) */
  /* 26 (Y) */
  /* 27 (Z) on from before */
  /* 29 (#) on from before */
  /* 30 (i) */
}

@media (min-width:39em) and (min-height:117ex) {
   footer {grid-column: 2/ 12}

                /* top  (1) still OFF  */
                  /* A  (2) already on */
  .navindex li:nth-child(3)  {display:list-item} 
  .navindex li:nth-child(4)  {display:list-item} 
                  /* D  (5) still OFF */
                  /* E  (6) already on */
  .navindex li:nth-child(7)  {display:list-item} 
  .navindex li:nth-child(8)  {display:list-item} 
  .navindex li:nth-child(9)  {display:list-item} 
                   /* I (10) already on */
  .navindex li:nth-child(11) {display:list-item} 
  .navindex li:nth-child(12) {display:list-item} 
  .navindex li:nth-child(13) {display:list-item} 
                   /* M (14) already on */
  .navindex li:nth-child(15) {display:list-item} 
  .navindex li:nth-child(16) {display:list-item} 
                   /* P (17) already on */
                   /* Q (18) still OFF */
                   /* R (19) still OFF */
  .navindex li:nth-child(20) {display:list-item} 
                   /* T (21) already on */
  .navindex li:nth-child(22) {display:list-item}
  .navindex li:nth-child(23) {display:list-item}
                   /* W (24) already on */
  .navindex li:nth-child(25) {display:list-item} 
  .navindex li:nth-child(26) {display:list-item} 
                   /* Z (27) already on */
                   /* # (28) already on */
                /* info (29) still OFF  */
}

@media (min-width:39em) and (min-height:122ex) {
  .navindex li:nth-child(5)  {display:list-item} /* D */
  .navindex li:nth-child(18) {display:list-item} /* Q */
  .navindex li:nth-child(19) {display:list-item} /* R */
}

@media (min-width:39em) and (min-height:125ex) {
  .navindex li:nth-child(1)  {display:list-item}
  .navindex li:nth-child(29) {display:list-item} 
}