/* When to Kite specific CSS */
#clearloc, .noseeum {display:none;}

#wind {background:url('/img/wind.svg')  no-repeat center center/contain;}
#temperature {background:url('/img/temperature.svg')  no-repeat center center/contain;}

#current h2, #current h3 {text-transform:uppercase;}

/* BACKGROUNDS */
#bg_day {
  height:55vh;
  min-height:420px;
  background: 
  url('/img/whentokite.svg') 63% 13%/10% no-repeat, 
  url('/img/cloud_1.svg') 5% 50%/17% no-repeat, 
  url('/img/cloud_2.svg') 90% 40%/22% no-repeat, 
  url('/img/hill_left.svg') 0 101%/65% no-repeat ,
  url('/img/hill_right.svg') 101% 101%/55% no-repeat, 
  linear-gradient(deepskyblue,lightskyblue);
}

#bg_nite {
  height:55vh;
  min-height:420px;
  background: 
  url('/img/whentokite.svg') 80% 10%/10% no-repeat, 
  url('/img/cloud_1.svg') 5% 50%/17% no-repeat, 
  url('/img/cloud_2.svg') 90% 40%/22% no-repeat, 
  url('/img/hill_left.svg') 0 101%/65% no-repeat ,
  url('/img/hill_right.svg') 101% 101%/55% no-repeat, 
  linear-gradient(#0E1049,#8F5BD9); 
  /* filter for different effects!  this one makes the night sky all red and the ground green...funky!
  filter: hue-rotate(90deg);
  */
  filter: hue-rotate(18deg) saturate(72%) sepia(27%);
  color:#fff;
}

#footer {background:url('/img/grass_edge.svg') repeat-x top, url('/img/dirt_band.svg') no-repeat center/100%;}

/* CSS Orientation to specify background layouts */
@media (orientation: landscape) {
	#footer {
		background:
		url('/img/grass_edge.svg') repeat-x top,
		url('/img/dirt_accents.svg') center/50%  no-repeat, 
		url('/img/dirt_band.svg') center/100%  no-repeat;
	}
}

@media (orientation: portrait) {
	#footer {
		background:
		url('/img/grass_edge.svg') repeat-x top,
		url('/img/dirt_accents.svg') 10% 36%/100% no-repeat,
		url('/img/dirt_band.svg') 40% 30%/300%  no-repeat;
	}
}