@media screen and (max-width:500px){
    body{
        background-color: antiquewhite;
    }
	.centerTxt{
		text-align:center;
	}
    #container{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(13,minmax(65px,auto));
    }
	#almanhdr{
		grid-column:1/span 2;
		grid-row:1/span 1;
	}
	#moonphasehdr{
		grid-column:1/span 2;
		grid-row:3/span 1;
	}
	#phase1{
		grid-column:1/span 1;
		grid-row:4/span 1;
	}
	#phase2{
		grid-column:2/span 1;
		grid-row:4/span 1;
	}
	#phase3{
		grid-column:1/span 1;
		grid-row:5/span 1;
	}
	#phase4{
		grid-column:2/span 1;
		grid-row:5/span1;
	}
	#currentmoonhdr{
		grid-column:1/span 2;
		grid-row:7/span 1;
	}
	#moonimg{
		grid-column:1/span 2;
		grid-row:8/span 1;
	}
	#seasonhdr{
		grid-column:1/span 2;
		grid-row:10/span1;
	}
	#spring{
		grid-column:1/span 1;
		grid-row:11/span1;
	}
	#summer{
		grid-column:2/span 1;
		grid-row:11/span1;
	}
	#fall{
		grid-column:1/span 1;
		grid-row:12/span1;
	}
	#winter{
		grid-column:2/span 1;
		grid-row:12/span 1;
	}
	#closest{
		grid-column:1/span 1;
		grid-row:13/span 1;
	}
	#furtherest{
		grid-column:2/span 1;
		grid-row:13/span 1;
	}
}

@media screen and (min-width:501px) and (max-width:770px){
    body{
        background-image: url("images/clouds.jpeg");
        background-size: cover;
    }
	.centerTxt{
		text-align:center;
	}
    #container{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(11,minmax(65px,auto));
    }
	#almanhdr{
		grid-column:2/span 2;
		grid-row:1/span 1;
	}
	#moonphasehdr{
		grid-column:2/span 2;
		grid-row:3/span 1;
	}
	#phase1{
		grid-column:1/span 1;
		grid-row:4/span 1;
	}
	#phase2{
		grid-column:2/span 1;
		grid-row:4/span 1;
	}
	#phase3{
		grid-column:3/span 1;
		grid-row:4/span 1;
	}
	#phase4{
		grid-column:4/span 1;
		grid-row:4/span1;
	}
	#currentmoonhdr{
		grid-column:2/span 2;
		grid-row:6/span 1;
	}
	#moonimg{
		grid-column:2/span 2;
		grid-row:7/span 1;
	}
	#seasonhdr{
		grid-column:2/span 2;
		grid-row:9/span1;
	}
	#spring{
		grid-column:1/span 1;
		grid-row:10/span1;
	}
	#summer{
		grid-column:2/span 1;
		grid-row:10/span1;
	}
	#fall{
		grid-column:3/span 1;
		grid-row:10/span1;
	}
	#winter{
		grid-column:4/span 1;
		grid-row:10/span 1;
	}
	#closest{
		grid-column:2/span 1;
		grid-row:11/span 1;
	}
	#furtherest{
		grid-column:3/span 1;
		grid-row:11/span 1;
	}
}	
	
@media screen and (min-width:771px){
	body{
		background-image: url("images/clouds.jpeg");
        background-size: cover;
	}
	.centerTxt{
		text-align:center;
	}

	#container{
		display:grid;
		grid-template-columns: repeat(8,1fr);
        grid-template-rows: repeat(10,minmax(65px,auto));
	}
	#almanhdr{
		grid-column:4/span 2;
		grid-row:1/span 1;
	}
	#moonphasehdr{
		grid-column:4/span 2;
		grid-row:3/span 1;
	}
	#phase1{
		grid-column:3/span 1;
		grid-row:4/span 1;
	}
	#phase2{
		grid-column:4/span 1;
		grid-row:4/span 1;
	}
	#phase3{
		grid-column:5/span 1;
		grid-row:4/span 1;
	}
	#phase4{
		grid-column:6/span 1;
		grid-row:4/span1;
	}
	#currentmoonhdr{
		grid-column:4/span 2;
		grid-row:6/span 1;
	}
	#moonimg{
		grid-column:4/span 2;
		grid-row:7/span 1;
	}
	#seasonhdr{
		grid-column:4/span 2;
		grid-row:9/span1;
	}
	#spring{
		grid-column:2/span 1;
		grid-row:10/span1;
	}
	#summer{
		grid-column:3/span 1;
		grid-row:10/span1;
	}
	#fall{
		grid-column:4/span 1;
		grid-row:10/span1;
	}
	#winter{
		grid-column:5/span 1;
		grid-row:10/span 1;
	}
	#closest{
		grid-column:6/span 1;
		grid-row:10/span 1;
	}
	#furtherest{
		grid-column:7/span 1;
		grid-row:10/span 1;
	}
}