h1{
    font-size: 10vm;
}

a{
    color: black;
}

#container >div{
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width:500px){
    body{
        background-color: antiquewhite;
	}
    #container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(31,minmax(65px,auto));
    }
    #pageHdr{
        grid-column: 1/span 2;
        grid-row: 1/span 1;    
    }
	#allTimeHdr{
		grid-column: 1/span 2;
		grid-row: 3/span 1;
	}
	#allTimeLowHdr{
		grid-column: 1/span 1;
		grid-row: 4/span 1;
	}
	#allTimeLowTemp{
		grid-column: 1/span 1;
		grid-row: 5/span 1;
	}
	#allTimeHiHdr{
		grid-column: 2/span 1;
		grid-row: 4/span 1;
	}
	#allTimeHiTemp{
		grid-column: 2/span 1;
		grid-row: 5/span 1;
	}
	#yearRecTempHdr{
		grid-column: 1/span 2;
		grid-row: 6/span 1;
	}
	#yearLowTempHdr{
		grid-column: 1/span 1;
		grid-row: 7/span 1;
	}
	#yearLowTemp{
		grid-column: 1/span 1;
		grid-row: 8/span 1;
	}
   #yearDays32Hdr{
	   grid-column: 2/span 1;
	   grid-row: 7/span 1;
   }
   #yearDays32{
	   grid-column: 2/span 1;
	   grid-row: 8/span 1;
   }
   #yearConsecDays32Hdr{
	   grid-column: 1/span 2;
	   grid-row: 9/span 1;
   }
   #yearConsecDays32{
	   grid-column: 1/span 2;
	   grid-row: 10/span 1;
   }
   #yearHighTempHdr{
	   grid-column: 1/span 1;
	   grid-row: 11/span 1;
   }
   #yearHighTemp{
	   grid-column: 1/span 1;
	   grid-row: 12/span 1;
   }
   #yearDays100Hdr{
	   grid-column: 2/span 1;
	   grid-row: 11/span 1;
   }
   #yearDays100{
	   gird-column: 2/span 1;
	   grid-row: 12/span 1;
   }
   #yearConsecDays100Hdr{
	   grid-column: 1/span 2;
	   grid-row: 13/span 1;
   }
   #yearConsecDays100{
		grid-column: 1/span 2;
		grid-row: 14/span 1;
   }
   #monthRecTempHdr{
	   grid-column: 1/span 2;
	   grid-row: 15/span 1;
   }
   #monthLowTempHdr{
	   grid-column: 1/span 1;
	   grid-row: 16/span 1;
   }
   #monthLowTemp{
	   grid-column: 1/span 1;
	   grid-row: 17/span 1;
   }
   #monthDays32Hdr{
	   grid-column: 2/span 1;
	   grid-row: 16/span 1;
   }
   #monthDays32{
	   grid-column: 2/span 1;
	   grid-row: 17/span 1;
   }
   #monthConsecDays32Hdr{
	   grid-column: 1/span 2;
	   grid-row: 18/span 1;
   }
   #monthConsec32{
	   grid-column: 1/span 2;
	   grid-row: 19/span 1;
   }
   #monthHighTempHdr{
	   grid-column: 1/span 1;
	   grid-row: 20/span 1;
   }
   #monthHighTemp{
	   grid-column: 1/span 1;
	   grid-row: 21/span 1;
   }
   #monthDays100Hdr{
	   grid-column: 2/span 1;
	   grid-row: 20/span 1;
   }
   #monthDays100{
	   grid-column: 2/span 1;
	   grid-row: 21/span 1;
   }
   #monthConsecDays100Hdr{
	   grid-column: 1/span 2;
	   grid-row: 22/span 1;
   }
   #monthConsecDays100{
	   grid-column: 1/span 2;
	   grid-row: 23/span 1;
   }
}

@media screen and (min-width:501px) and (max-width:770px){
    body{
        background-color: antiquewhite;
    }
    #container{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(24,minmax(65px,auto));
    }
    #pageHdr{
        grid-column: 1/span 4;
        grid-row: 1/span 1;
    }
	#allTimeHdr{
		grid-column: 1/span 4;
		grid-row: 3/span 1;
	}
	#allTimeLowHdr{
		grid-column: 1/span 1;
		grid-row: 4/span 1;
	}
	#allTimeLowTemp{
		grid-column: 1/span 1;
		grid-row: 5/span 1;
	}
	#allTimeHiHdr{
		grid-column: 4/span 1;
		grid-row: 4/span 1;
	}
	#allTimeHiTemp{
		grid-column: 4/span 1;
		grid-row: 5/span 1;
	}
	#yearRecTempHdr{
		grid-column: 1/span 4;
		grid-row: 6/span 1;
	}
	#yearLowTempHdr{
		grid-column: 1/span 1;
		grid-row: 7/span 1;
	}
	#yearLowTemp{
		grid-column: 1/span 1;
		grid-row: 8/span 1;
	}
	#yearDays32Hdr{
		grid-column: 2/span 1;
		grid-row: 7/span 1;
	}
	#yearDays32{
		grid-column: 2/span 1;
		grid-row: 8/span 1;
	}
	#yearConsecDays32Hdr{
		grid-column: 3/span 1;
		grid-row: 7/span 1;
	}
	#yearConsecDays32{
		grid-column: 3/span 1;
		grid-row: 8/span 1;
	}
	#yearHighTempHdr{
		grid-column: 1/span 1;
		grid-row: 9/span 1;
	}
	#yearHighTemp{
		grid-column: 1/span 1;
		grid-row: 10/span 1;
	}
	#yearDays100Hdr {
		grid-column: 2/span 1;
		grid-row: 9/span 1;
	}
	#yearDays100{
		grid-column: 2/span 1;
		grid-row: 10/span 1;
	}
	#yearConsecDays100Hdr{
		grid-column: 3/span 1;
		grid-row: 9/span 1;
	}
	#yearConsecDays100{
		grid-column: 3/span 1;
		grid-row: 10/span 1;
	}
	#monthRecTempHdr{
		grid-column: 1/span 4;
		grid-row: 11/span 1;
	}
	#monthRecTempHdr{
		grid-column: 1/span 4;
		grid-row: 12/span 1;
	}
	#monthLowTempHdr{
		grid-column: 1/span 1;
		grid-row: 13/span 1;
	}
	#monthLowTemp{
		grid-column:1/span 1;
		grid-row: 14/span 1;
	}
	#monthDays32Hdr{
		grid-column: 2/span 1;
		grid-row: 13/span 1;
	}
	#monthDays32{
		grid-column: 2/span 1;
		grid-row:14/span 1;
	}
	#monthConsecDays32Hdr{
		grid-column: 3/span 1;
		grid-row: 13/span 1;
	}
	#monthConsec32{
		grid-column: 3/span 1;
		grid-row: 14/span 1;
	}
	#monthHighTempHdr{
		grid-column: 1/span 1;
		grid-row: 15/span 1;
	}
	#monthHighTemp{
		grid-column: 1/span 1;
		grid-row: 16/span 1;
	}
	#monthDays100Hdr{
		grid-column: 2/span 1;
		grid-row: 15/span 1;
	}
	#monthDays100{
		grid-column: 2/span 1;
		grid-row: 16/span 1;
	}
	#monthConsecDays100Hdr{
		grid-column: 3/span 1;
		grid-row: 15/span 1;
	}
	#monthConsecDays100{
		grid-column: 3/span 1;
		grid-row: 16/span 1;
	}
	
}

@media screen and (min-width:771px){
    body{
        background-image: url("images/clouds.jpeg");
        background-size: cover;
    }
    #container{
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-template-rows: repeat(11,minmax(65px,auto));
    }
    #pageHdr{
		grid-column: 2/span 5;
		grid-row: 1/span 1;
	}
	#allTimeHdr{
		grid-column: 2/span 5;
		grid-row: 3/span 1;
	}
	#allTimeLowHdr{
		grid-column: 3/span 1;
		grid-row: 4/span 1;
	}
	#allTimeLowTemp{
		grid-column: 3/span 1;
		grid-row: 5/span 1;
	}
	#allTimeHiHdr{
		grid-column: 5/span 1;
		grid-row: 4/span 1;
	}
	#allTimeHiTemp{
		grid-column: 5/span 1;
		grid-row: 5/span 1;
	}
	#yearRecTempHdr{
		grid-column: 2/span 5;
		grid-row: 6/span 1;
	}
	#yearLowTempHdr{
		grid-column: 1/span 1;
		grid-row: 7/span 1;
	}
	#yearLowTemp{
		grid-column: 1/span 1;
		grid-row: 8/span 1;
	}
	#yearDays32Hdr{
		grid-column: 2/span 1;
		grid-row: 7/span 1;
	}
	#yearDays32{
		grid-column: 2/span 1;
		grid-row: 8/span 1;
	}
	#yearConsecDays32Hdr{
		grid-column: 3/span 1;
		grid-row: 7/span 1;
	}
	#yearConsecDays32{
		grid-column: 3/span 1;
		grid-row: 8/span 1;
	}
	#yearHighTempHdr{
		grid-column: 5/span 1;
		grid-row: 7/span 1;
	}
	#yearHighTemp{
		grid-column: 5/span 1;
		grid-row: 8/span 1;
	}
	#yearDays100Hdr{
		grid-column: 6/span 1;
		grid-row: 7/span 1;
	}
	#yearDays100{
		grid-column: 6/span 1;
		grid-row: 8/span 1;
	}
	#yearConsecDays100Hdr{
		grid-column: 7/span 1;
		grid-row: 7/span 1;
	}
	#yearConsecDays100{
		grid-column: 7/span 1;
		grid-row: 8/span 1;
	}
	#monthRecTempHdr{
		grid-column: 2/span 5;
		grid-row:9/span 1;
	}
	#monthLowTempHdr{
		grid-column:1/ span 1;
		grid-row: 10/span 1;
	}
	#monthLowTemp{
		grid-column: 1/span 1;
		grid-row: 11/span 1;
	}
	#monthDays32Hdr{
		grid-column: 2/span 1;
		grid-row: 10/span 1;
	}
	#monthDays32{
		grid-column: 2/span 1;
		grid-row: 11/span 1;
	}
	#monthConsecDays32Hdr{
		grid-column: 3/span 1;
		grid-row: 10/span 1;
	}
	#monthConsec32{
		grid-column: 3/span 1;
		grid-row: 11/span 1;
	}
	#monthHighTempHdr{
		grid-column: 5/span 1;
		grid-row: 10/span 1;
	}
	#monthHighTemp{
		grid-column: 5/span 1;
		grid-row: 11/span 1;
	}
	#monthDays100Hdr{
		grid-column: 6/span 1;
		grid-row: 10/span 1;
	}
	#monthDays100{
		grid-column: 6/span 1;
		grid-row: 11/span 1;
	}
	#monthConsecDays100Hdr{
		grid-column: 7/span 1;
		grid-row: 10/span 1;
	}
	#monthConsecDays100{
		grid-column: 7/span 1;
		grid-row: 11/span 1;
	}
}