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));
    }
    #header{
        grid-column: 1/span 2;
        grid-row: 1/span 1;    
    }
    #forecasthdr{
        grid-column: 1/span 2;
        grid-row: 3/span 1;
    }
    #forecast{
        grid-column: 1/span 2;
        grid-row: 4/span 1;
    }
    #temphdr{
        grid-column: 1/span 2;
        grid-row: 6/span 1;
    }
    #currtemp{
        grid-column: 1/span 1;
        grid-row: 7/span 1;
    }
    #todayhigh{
        grid-column: 2/span 1;
        grid-row: 7/span 1;
    }
    #todaylow{
        grid-column: 1/span 1;
        grid-row: 8/span 1;
    }
    #windchill{
        grid-column: 2/span 1;
        grid-row: 8/span 1;
    }
    #heatindex{
        grid-column: 1/span 1;
        grid-row: 9/span 1;
    }
    #currdp{
        grid-column: 2/span 1;
        grid-row: 9/span 1;
    }
    #currhum{
        grid-column: 1/span 2;
        grid-row: 10/span 1;
    }
    #barhdr{
        grid-column: 1/span 2;
        grid-row: 12/span 1;
    }
    #currbaro{
        grid-column: 1/span 1;
        grid-row: 13/span 1;
    }
    #barometertrend{
        grid-column: 2/span 1;
        grid-row: 13/span 1;
    }
    #hibarometer{
        grid-column: 1/span 1;
        grid-row: 14/span 1;
    }
    #lobarometer{
        grid-column: 2/span 1;
        grid-row: 14/span 1;
    }
    #cloudbase{
        grid-column: 1/span 2;
        grid-row: 15/span 1;
    }    
    #windhdr{
        grid-column: 1/span 2;
        grid-row: 17/span 1;
    }
    #windspd{
        grid-column: 1/span 1;
        grid-row: 18/span 1;
    }
    #direction{
        grid-column: 2/span 1;
        grid-row: 18/span 1;
    }
    #windavg{
        grid-column: 1/span 1;
        grid-row: 19/span 1;
    }
    #windtenavg{
        grid-column: 2/span 1;
        grid-row: 19/span 1;
    }
    #hiwindspd{
        grid-column: 1/span 2;
        grid-row: 20/span 1;
    }
    #rainhdr{
        grid-column: 1/span 2;
        grid-row: 22/span 1;
    }
    #drain{
        grid-column: 1/span 1;
        grid-row: 23/span 1;
    }
    #currate{
        grid-column: 2/span 1;
        grid-row: 23/span 1;
    }
    #srain{
        grid-column: 1/span 1;
        grid-row: 24/span 1;
    }
    #mtotal{
        grid-column: 2/span 1;
        grid-row: 24/span 1;
    }
    #ytotal{
        grid-column: 1/span 2;
        grid-row: 25/span 1;
    }
    #almanachdr{
        grid-column: 1/span 2;
        grid-row: 27/span 1;
    }
    #sunrise{
        grid-column: 1/span 1;
        grid-row: 28/span 1;
    }
    #sunset{
        grid-column: 2/span 1;
        grid-row: 28/span 1;
    }
    #totaldaylight{
        grid-column: 1/span 1;
        grid-row: 29/span 1;
    }
    #moonphase{
        grid-column: 2/span 1;
        grid-row: 29/span 1;
    }
    #disclaim{
        grid-column: 1/span 2;
        grid-row:31/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));
    }
    #header{
        grid-column: 1/span 4;
        grid-row: 1/span 1;
    }
    #forecasthdr{
        grid-column: 2/span 2;
        grid-row: 3/span 1;
    }
    #forecast{
        grid-column: 1/span 4;
        grid-row:4/span 1;
    }
    #temphdr{
        grid-column: 2/span 2;
        grid-row: 5/span 1;
    }
    #currtemp{
        grid-column: 1/span 1;
        grid-row: 6/span 1;
    }
    #todayhigh{
        grid-column: 2/span 1;
        grid-row: 6/span 1;
    }
    #todaylow{
        grid-column: 3/span 1;
        grid-row: 6/span 1;
    }
    #windchill{
        grid-column: 4/span 1;
        grid-row: 6/span 1;
    }
    #heatindex{
        grid-column: 1/span 1;
        grid-row: 7/span 1;
    }
    #currdp{
        grid-column: 2/span 1;
        grid-row: 7/span 1;
    }
    #currhum{
        grid-column: 3/span 1;
        grid-row: 7/span 1;
    }
    #barhdr{
        grid-column: 2/span 2;
        grid-row: 9/span 1;
    }
    #currbaro{
        grid-column: 1/span 1;
        grid-row: 10/span 1;
    }
    #barometertrend{
        grid-column: 2/span 1;
        grid-row: 10/span 1;
    }
    #hibarometer{
        grid-column: 3/span 1;
        grid-row: 10/span 1;
    }
    #lobarometer{
        grid-column: 4/span 1;
        grid-row: 10/span 1;
    }
    #cloudbase{
        grid-column: 2/span 2;
        grid-row: 11/span 1;
    }    
    #windhdr{
        grid-column: 2/span 2;
        grid-row: 13/span 1;
    }
    #windspd{
        grid-column: 1/span 1;
        grid-row: 14/span 1;
    }
    #direction{
        grid-column: 2/span 1;
        grid-row: 14/span 1;
    }
    #windavg{
        grid-column: 3/span 1;
        grid-row: 14/span 1;
    }
    #windtenavg{
        grid-column: 4/span 1;
        grid-row: 14/span 1;
    }
    #hiwindspd{
        grid-column: 2/span 2;
        grid-row: 15/span 1;
    }
    #rainhdr{
        grid-column: 2/span 2;
        grid-row: 17/span 1;
    }
    #drain{
        grid-column: 1/span 1;
        grid-row: 18/span 1;
    }
    #currate{
        grid-column: 2/span 1;
        grid-row: 18/span 1;
    }
    #srain{
        grid-column: 3/span 1;
        grid-row: 18/span 1;
    }
    #mtotal{
        grid-column: 4/span 1;
        grid-row: 18/span 1;
    }
    #ytotal{
        grid-column: 2/span 2;
        grid-row: 19/span 1;
    }
    #almanachdr{
        grid-column: 2/span 2;
        grid-row: 21/span 1;
    }
    #sunrise{
        grid-column: 1/span 1;
        grid-row: 22/span 1;
    }
    #sunset{
        grid-column: 2/span 1;
        grid-row: 22/span 1;
    }
    #totaldaylight{
        grid-column: 3/span 1;
        grid-row: 22/span 1;
    }
    #moonphase{
        grid-column: 4/span 1;
        grid-row: 22/span 1;
    }
    #disclaim{
        grid-column: 1/span 4;
        grid-row:24/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(18,minmax(65px,auto));
    }
    #header{
        grid-column: 2/span 5;
        grid-row: 1/span 1;
    }
    #forecasthdr{
        grid-column: 4/span 1;
        grid-row: 3/span 1;
    }
    #forecast{
        grid-column: 1/span 7;
        grid-row: 4/span 1;
    }
    #temphdr{
        grid-column: 4/span 1;
        grid-row: 6/span 1;
    }
    #currtemp{
        grid-column: 1/span 1;
        grid-row: 7/span 1;
    }
    #todayhigh{
        grid-column: 2/span 1;
        grid-row: 7/span 1;
    }
    #todaylow{
        grid-column: 3/span 1;
        grid-row: 7/span 1;
    }
    #windchill{
        grid-column: 4/span 1;
        grid-row: 7/span 1;
    }
    #heatindex{
        grid-column: 5/span 1;
        grid-row: 7/span 1;
    }
    #currdp{
        grid-column: 6/span 1;
        grid-row: 7/span 1;
    }
    #currhum{
        grid-column: 7/span 1;
        grid-row: 7/span 1;
    }
    #barhdr{
        grid-column: 4/span 1;
        grid-row: 9/span 1;
    }
    #currbaro{
        grid-column: 2/span 1;
        grid-row: 10/span 1;
    }
    #barometertrend{
        grid-column: 3/span 1;
        grid-row: 10/span 1;
    }
    #hibarometer{
        grid-column: 4/span 1;
        grid-row: 10/span 1;
    }
    #lobarometer{
        grid-column: 5/span 1;
        grid-row: 10/span 1;
    }
    #cloudbase{
        grid-column: 6/span 1;
        grid-row: 10/span 1;
    }
    #windhdr{
        grid-column: 4/span 1;
        grid-row: 12/span 1;
    }
    #windspd{
        grid-column: 2/span 1;
        grid-row: 13/span 1;
    }
    #direction{
        grid-column: 3/span 1;
        grid-row: 13/span 1;
    }
    #windavg{
        grid-column: 4/span 1;
        grid-row: 13/span 1;
    }
    #windtenavg{
        grid-column: 5/span 1;
        grid-row: 13/span 1;
    }
    #hiwindspd{
        grid-column: 6/span 1;
        grid-row: 13/span 1;
    }
    #rainhdr{
        grid-column: 4/span 1;
        grid-row: 15/span 1;
    }
    #drain{
        grid-column: 2/span 1;
        grid-row: 16/span 1;
    }
    #currate{
        grid-column: 3/span 1;
        grid-row: 16/span 1;
    }
    #srain{
        grid-column: 4/span 1;
        grid-row: 16/span 1;
    }
    #mtotal{
        grid-column: 5/span 1;
        grid-row: 16/span 1;
    }
    #ytotal{
        grid-column: 6/span 1;
        grid-row: 16/span 1;
    }
    #almanachdr{
        grid-column: 4/span 1;
        grid-row: 18/span 1;
    }
    #sunrise{
        grid-column: 2/span 1;
        grid-row: 19/span 1;
    }
    #sunset{
        grid-column: 3/span 1;
        grid-row: 19/span 1;
    }
    #totaldaylight{
        grid-column: 4/span 1;
        grid-row: 19/span 1;
    }
    #moonphase{
        grid-column: 5/span 1;
        grid-row: 19/span 1;
    }
    #disclaim{
        grid-column: 1/span 7;
        grid-row:21/span 1;
    }
}