h1{
    font-size: 10vm;
    text-align: center;
}

.left {
    text-align: left;
}

.center{
    text-align: center;
}

#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,auto);
    }
    
    #header{
        grid-column: 1/span 2;
        grid-row: 1/span 1;
    }
    #Period0{
        grid-column: 1/span 1;
        grid-row: 3/span 1;
    }
    #Period1{
        grid-column: 2/span 1;
        grid-row: 3/span 1;
    }
    #Period2{
        grid-column: 1/span 1;
        grid-row: 4/span 1;
    }
    #Period3{
        grid-column: 2/span 1;
        grid-row: 4/span 1;
    }
    #Period4{
        grid-column: 1/span 1;
        grid-row: 5/span 1;
    }
    #Period5{
        grid-column: 2/span 1;
        grid-row: 5/span 1;
    }
    #Period6{
        grid-column: 1/span 1;
        grid-row: 6/span 1;
    }
    #Period7{
        grid-column: 2/span 1;
        grid-row: 6/span 1;
    }
    #Period8{
        grid-column: 1/span 1;
        grid-row: 7/span 1;
    }
    #Period9{
        grid-column: 2/span 1;
        grid-row: 7/span 1;
    }
    #Period10{
        grid-column: 1/span 1;
        grid-row: 8/span 1;
    }
    #Period11{
        grid-column: 2/span 1;
        grid-row: 8/span 1;
    }
    #Period12{
        grid-column: 1/span 1;
        grid-row: 9/span 1;
    }
    #Period13{
        grid-column: 2/span 1;
        grid-row: 9/span 1;
    }
    #DetailHdr{
        grid-column: 1/span 2;
        grid-row: 11/span 1;
    }
    #DetailDay0{
        grid-column: 1/span 1;
        grid-row: 13/span 1;
    }
    #DetailForecast0{
        grid-column:2/span 1;
        grid-row: 13/span 1;
    }
    #DetailDay1{
        grid-column: 1/span 1;
        grid-row: 14/span 1;
    }
    #DetailForecast1{
        grid-column: 2/span 3;
        grid-row: 14/span 1;
    }    
    #DetailDay2{
        grid-column: 1/span 1;
        grid-row: 15/span 1;
    }
    #DetailForecast2{
        grid-column: 2/span 1;
        grid-row: 15/span 1;
    }
    #DetailDay3{
        grid-column: 1/span 1;
        grid-row: 16/span 1;
    }
    #DetailForecast3{
        grid-column: 2/span 1;
        grid-row: 16/span 1;
    }
    #DetailDay4{
        grid-column: 1/span 1;
        grid-row: 17/span 1;
    }
    #DetailForecast4{
        grid-column: 2/span 1;
        grid-row: 17/span 1;
    }
    #DetailDay5{
        grid-column: 1/span 1;
        grid-row: 18/span 1;
    }
    #DetailForecast5{
        grid-column: 2/span 1;
        grid-row: 18/span 1;
    }    
    #DetailDay6{
        grid-column: 1/span 1;
        grid-row: 19/span 1;
    }
    #DetailForecast6{
        grid-column: 2/span 1;
        grid-row: 19/span 1;
    }
    #DetailDay7{
        grid-column: 1/span 1;
        grid-row: 20/span 1;
    }
    #DetailForecast7{
        grid-column: 2/span 1;
        grid-row: 20/span 1;
    }
    #DetailDay8{
        grid-column: 1/span 1;
        grid-row: 21/span 1;
    }
    #DetailForecast8{
        grid-column: 2/span 1;
        grid-row: 21/span 1;
    }
    #DetailDay9{
        grid-column: 1/span 1;
        grid-row: 22/span 1;
    }
    #DetailForecast9{
        grid-column: 2/span 1;
        grid-row: 22/span 1;
    }    
    #DetailDay10{
        grid-column: 1/span 1;
        grid-row: 23/span 1;
    }
    #DetailForecast10{
        grid-column: 2/span 1;
        grid-row: 23/span 1;
    }
    #DetailDay11{
        grid-column: 1/span 1;
        grid-row: 24/span 1;
    }
    #DetailForecast11{
        grid-column: 2/span 1;
        grid-row: 24/span 1;
    }
    #DetailDay12{
        grid-column: 1/span 1;
        grid-row: 25/span 1;
    }
    #DetailForecast12{
        grid-column: 2/span 1;
        grid-row: 25/span 1;
    }
    #DetailDay13{
        grid-column: 1/span 1;
        grid-row: 26/span 1;
    }
    #DetailForecast13{
        grid-column: 2/span 1;
        grid-row: 26/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(22,auto);
    }
    #header{
        grid-column: 1/span 4;
        grid-row: 1/span 1;
    }
    #Period0{
        grid-column: 1/span 1;
        grid-row: 3/span 1;
    }
    #Period1{
        grid-column: 1/span 1;
        grid-row: 4/span 1;
    }
    #Period2{
        grid-column: 2/span 1;
        grid-row: 3/span 1;
    }
    #Period3{
        grid-column: 2/span 1;
        grid-row: 4/span 1;
    }
    #Period4{
        grid-column: 3/span 1;
        grid-row: 3/span 1;
    }
    #Period5{
        grid-column: 3/span 1;
        grid-row: 4/span 1;
    }
    #Period6{
        grid-column: 4/span 1;
        grid-row: 3/span 1;
    }
    #Period7{
        grid-column: 4/span 1;
        grid-row: 4/span 1;
    }
    #Period8{
        grid-column: 1/span 1;
        grid-row: 5/span 1;
    }
    #Period9{
        grid-column: 1/span 1;
        grid-row: 6/span 1;
    }
    #Period10{
        grid-column: 2/span 1;
        grid-row: 5/span 1;
    }
    #Period11{
        grid-column: 2/span 1;
        grid-row: 6/span 1;
    }
    #Period12{
        grid-column: 3/span 1;
        grid-row: 5/span 1;
    }
    #Period13{
        grid-column: 3/span 1;
        grid-row: 6/span 1;
    }
    #DetailHdr{
        grid-column: 1/span 4;
        grid-row: 8/span 1;
    }
    #DetailDay0{
        grid-column: 1/span 1;
        grid-row: 9/span 1;
    }
    #DetailForecast0{
        grid-column:2/span 3;
        grid-row: 9/span 1;
    }
    #DetailDay1{
        grid-column: 1/span 1;
        grid-row: 10/span 1;
    }
    #DetailForecast1{
        grid-column: 2/span 3;
        grid-row: 10/span 1;
    }    
    #DetailDay2{
        grid-column: 1/span 1;
        grid-row: 11/span 1;
    }
    #DetailForecast2{
        grid-column: 2/span 3;
        grid-row: 11/span 1;
    }
    #DetailDay3{
        grid-column: 1/span 1;
        grid-row: 12/span 1;
    }
    #DetailForecast3{
        grid-column: 2/span 3;
        grid-row: 12/span 1;
    }
    #DetailDay4{
        grid-column: 1/span 1;
        grid-row: 13/span 3;
    }
    #DetailForecast4{
        grid-column: 2/span 3;
        grid-row: 13/span 1;
    }
    #DetailDay5{
        grid-column: 1/span 1;
        grid-row: 14/span 1;
    }
    #DetailForecast5{
        grid-column: 2/span 3;
        grid-row: 14/span 1;
    }    
    #DetailDay6{
        grid-column: 1/span 1;
        grid-row: 15/span 1;
    }
    #DetailForecast6{
        grid-column: 2/span 3;
        grid-row: 15/span 1;
    }
    #DetailDay7{
        grid-column: 1/span 1;
        grid-row: 16/span 1;
    }
    #DetailForecast7{
        grid-column: 2/span 3;
        grid-row: 16/span 1;
    }
    #DetailDay8{
        grid-column: 1/span 1;
        grid-row: 17/span 1;
    }
    #DetailForecast8{
        grid-column: 2/span 3;
        grid-row: 17/span 1;
    }
    #DetailDay9{
        grid-column: 1/span 1;
        grid-row: 18/span 1;
    }
    #DetailForecast9{
        grid-column: 2/span 6;
        grid-row: 18/span 1;
    }    
    #DetailDay10{
        grid-column: 1/span 3;
        grid-row: 19/span 1;
    }
    #DetailForecast10{
        grid-column: 2/span 3;
        grid-row: 19/span 1;
    }
    #DetailDay11{
        grid-column: 1/span 1;
        grid-row: 20/span 1;
    }
    #DetailForecast11{
        grid-column: 2/span 3;
        grid-row: 20/span 1;
    }
    #DetailDay12{
        grid-column: 1/span 1;
        grid-row: 21/span 1;
    }
    #DetailForecast12{
        grid-column: 2/span 3;
        grid-row: 21/span 1;
    }
    #DetailDay13{
        grid-column: 1/span 1;
        grid-row: 22/span 1;
    }
    #DetailForecast13{
        grid-column: 2/span 3;
        grid-row: 22/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(20,auto);
       text-align: left;
    }
    #header{
        grid-column: 2/span 5;
        grid-row: 1/span 1;
    }
    #Period0{
        grid-column: 1/span 1;
        grid-row: 3/span 1;
    }
    #Period1{
        grid-column: 1/span 1;
        grid-row: 4/span 1;
    }
    #Period2{
        grid-column: 2/span 1;
        grid-row: 3/span 1;
    }
    #Period3{
        grid-column: 2/span 1;
        grid-row: 4/span 1;
    }
    #Period4{
        grid-column: 3/span 1;
        grid-row: 3/span 1;
    }
    #Period5{
        grid-column: 3/span 1;
        grid-row: 4/span 1;
    }
    #Period6{
        grid-column: 4/span 1;
        grid-row: 3/span 1;
    }
    #Period7{
        grid-column: 4/span 1;
        grid-row: 4/span 1;
    }
    #Period8{
        grid-column: 5/span 1;
        grid-row: 3/span 1;
    }
    #Period9{
        grid-column: 5/span 1;
        grid-row: 4/span 1;
    }
    #Period10{
        grid-column: 6/span 1;
        grid-row: 3/span 1;
    }
    #Period11{
        grid-column: 6/span 1;
        grid-row: 4/span 1;
    }
    #Period12{
        grid-column: 7/span 1;
        grid-row: 3/span 1;
    }
    #Period13{
        grid-column: 7/span 1;
        grid-row: 4/span 1;
    }
    #DetailHdr{
        grid-column: 2/span 5;
        grid-row: 6/span 1;
    }
    #DetailDay0{
        grid-column: 1/span 1;
        grid-row: 7/span 1;
    }
    #DetailForecast0{
        grid-column: 2/span 6;
        grid-row: 7/span 1;
    }
    #DetailDay1{
        grid-column: 1/span 1;
        grid-row: 8/span 1;
    }
    #DetailForecast1{
        grid-column: 2/span 6;
        grid-row: 8/span 1;
    }    
    #DetailDay2{
        grid-column: 1/span 1;
        grid-row: 9/span 1;
    }
    #DetailForecast2{
        grid-column: 2/span 6;
        grid-row: 9/span 1;
    }
    #DetailDay3{
        grid-column: 1/span 1;
        grid-row: 10/span 1;
    }
    #DetailForecast3{
        grid-column: 2/span 6;
        grid-row: 10/span 1;
    }
    #DetailDay4{
        grid-column: 1/span 1;
        grid-row: 11/span 1;
    }
    #DetailForecast4{
        grid-column: 2/span 6;
        grid-row: 11/span 1;
    }
    #DetailDay5{
        grid-column: 1/span 1;
        grid-row: 12/span 1;
    }
    #DetailForecast5{
        grid-column: 2/span 6;
        grid-row: 12/span 1;
    }    
    #DetailDay6{
        grid-column: 1/span 1;
        grid-row: 13/span 1;
    }
    #DetailForecast6{
        grid-column: 2/span 6;
        grid-row: 13/span 1;
    }
    #DetailDay7{
        grid-column: 1/span 1;
        grid-row: 14/span 1;
    }
    #DetailForecast7{
        grid-column: 2/span 6;
        grid-row: 14/span 1;
    }
    #DetailDay8{
        grid-column: 1/span 1;
        grid-row: 15/span 1;
    }
    #DetailForecast8{
        grid-column: 2/span 6;
        grid-row: 15/span 1;
    }
    #DetailDay9{
        grid-column: 1/span 1;
        grid-row: 16/span 1;
    }
    #DetailForecast9{
        grid-column: 2/span 6;
        grid-row: 16/span 1;
    }    
    #DetailDay10{
        grid-column: 1/span 1;
        grid-row: 17/span 1;
    }
    #DetailForecast10{
        grid-column: 2/span 6;
        grid-row: 17/span 1;
    }
    #DetailDay11{
        grid-column: 1/span 1;
        grid-row: 18/span 1;
    }
    #DetailForecast11{
        grid-column: 2/span 6;
        grid-row: 18/span 1;
    }
    #DetailDay12{
        grid-column: 1/span 1;
        grid-row: 19/span 1;
    }
    #DetailForecast12{
        grid-column: 2/span 6;
        grid-row: 19/span 1;
    }
    #DetailDay13{
        grid-column: 1/span 1;
        grid-row: 20/span 1;
    }
    #DetailForecast13{
        grid-column: 2/span 6;
        grid-row: 20/span 1;
    }    
    
}