body {
	padding: 0;
	margin: 1rem;
}

.regular-chart,
.sparkline,
.half-chart,
.quarter-sparkline {
  border: 1px solid lightgrey;
  border-radius: 0.20rem;
}

#total_jobs {
	grid-area: spark1;
}
#remote_count {
	grid-area: spark2;
}
#onsite_count {
	grid-area: spark3;
}
#hybrid_count {
	grid-area: spark4;
}
#searchers_count {
	grid-area: spark5;
}
#jobs_to_searchers_spark {
	grid-area: spark6;
}
#hiring {
	grid-area: reg1;
}
#hired {
	grid-area: reg2;
}
#jobs_to_searchers {
	grid-area: reg3;
}
#index_hiring {
	grid-area: reg4;
}
#index_wants_hired {
	grid-area: reg5;
}
#day_job_posted {
	grid-area: half1;
}
#day_searcher_posted {
	grid-area: half2;
}

#parent {
	display: grid;
	grid-template-rows:  repeat(20, 75px);
	grid-template-columns: repeat(12, 1fr);
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	grid-template-areas:
	  "spark1 spark1 spark2 spark2 spark3 spark3 spark4 spark4 spark5 spark5 spark6 spark6"
	  "spark1 spark1 spark2 spark2 spark3 spark3 spark4 spark4 spark5 spark5 spark6 spark6"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg1 reg1 reg1 reg1 reg1 reg1 reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg3 reg3 reg3 reg3 reg3 reg3 half1 half1 half1 half2 half2 half2"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg4 reg4 reg4 reg4 reg4 reg4 reg5 reg5 reg5 reg5 reg5 reg5";
}

@media screen and (max-width: 1000px) {
  #parent {
	grid-template-rows:  repeat(20, 150px);
	grid-template-columns: repeat(6, 1fr);
	grid-template-areas:
	  "spark1 spark1 spark2 spark2 spark3 spark3"
	  "spark4 spark4 spark5 spark5 spark6 spark6"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
		"reg2 reg2 reg2 reg2 reg2 reg2"
		"reg2 reg2 reg2 reg2 reg2 reg2"
		"reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
    "half1 half1 half1 half2 half2 half2"  
    "half1 half1 half1 half2 half2 half2"  
    "half1 half1 half1 half2 half2 half2" 
	  "reg4 reg4 reg4 reg4 reg4 reg4"
	  "reg4 reg4 reg4 reg4 reg4 reg4"
	  "reg4 reg4 reg4 reg4 reg4 reg4"
		"reg5 reg5 reg5 reg5 reg5 reg5"
		"reg5 reg5 reg5 reg5 reg5 reg5"
		"reg5 reg5 reg5 reg5 reg5 reg5";
  }
}

@media screen and (max-width: 600px) {
  #parent {
	grid-template-rows:  repeat(27, 150px);
	grid-template-columns: repeat(6, 1fr);
	grid-template-areas:
	  "spark1 spark1 spark1 spark1 spark1 spark1"
	  "spark2 spark2 spark2 spark2 spark2 spark2"
	  "spark3 spark3 spark3 spark3 spark3 spark3"
	  "spark4 spark4 spark4 spark4 spark4 spark4"
	  "spark5 spark5 spark5 spark5 spark5 spark5"
	  "spark6 spark6 spark6 spark6 spark6 spark6"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
	  "reg1 reg1 reg1 reg1 reg1 reg1"
		"reg2 reg2 reg2 reg2 reg2 reg2"
		"reg2 reg2 reg2 reg2 reg2 reg2"
		"reg2 reg2 reg2 reg2 reg2 reg2"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
	  "reg3 reg3 reg3 reg3 reg3 reg3"
    "half1 half1 half1 half1 half1 half1"  
    "half1 half1 half1 half1 half1 half1"  
    "half1 half1 half1 half1 half1 half1"  
    "half2 half2 half2 half2 half2 half2"  
    "half2 half2 half2 half2 half2 half2" 
    "half2 half2 half2 half2 half2 half2" 
	  "reg4 reg4 reg4 reg4 reg4 reg4"
	  "reg4 reg4 reg4 reg4 reg4 reg4"
	  "reg4 reg4 reg4 reg4 reg4 reg4"
	  "reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg5 reg5 reg5 reg5 reg5 reg5"
	  "reg5 reg5 reg5 reg5 reg5 reg5";
  }
}

#hired_region {
    grid-area: aireg1
}
#spark_us {
    grid-area: aispark1
}
#spark_eu {
    grid-area: aispark2
}
#spark_asia {
    grid-area: aispark3
}
#spark_other {
    grid-area: aispark4
}
#hired_remote {
    grid-area: aireg2
}
#hired_relocate {
    grid-area: aireg3
}

#ai-stats {
  margin-top: 1rem;
  display: grid;
  grid-template-rows:  repeat(12, 75px);
  grid-template-columns: repeat(12, 1fr);
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  grid-template-areas:
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark1 aispark1 aispark1 aispark2 aispark2 aispark2"
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark1 aispark1 aispark1 aispark2 aispark2 aispark2"
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark1 aispark1 aispark1 aispark2 aispark2 aispark2"
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark3 aispark3 aispark3 aispark4 aispark4 aispark4"
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark3 aispark3 aispark3 aispark4 aispark4 aispark4"
    "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1 aispark3 aispark3 aispark3 aispark4 aispark4 aispark4"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2 aireg3 aireg3 aireg3 aireg3 aireg3 aireg3";
}

@media screen and (max-width: 1000px) {
  #ai-stats {
  	grid-template-rows:  repeat(11, 150px);
  	grid-template-columns: repeat(6, 1fr);
  	grid-template-areas:
    	"aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
    	"aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
    	"aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
    	"aispark1 aispark1 aispark1 aispark2 aispark2 aispark2"
    	"aispark3 aispark3 aispark3 aispark4 aispark4 aispark4"
    	"aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
    	"aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
    	"aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
    	"aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    	"aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
    	"aireg3 aireg3 aireg3 aireg3 aireg3 aireg3";
  }
}

@media screen and (max-width: 600px) {
  #ai-stats {
  	grid-template-rows:  repeat(13, 150px);
  	grid-template-columns: repeat(6, 1fr);
  	grid-template-areas:
      "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
      "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
      "aireg1 aireg1 aireg1 aireg1 aireg1 aireg1"
      "aispark1 aispark1 aispark1 aispark1 aispark1 aispark1"
      "aispark2 aispark2 aispark2 aispark2 aispark2 aispark2"
      "aispark3 aispark3 aispark3 aispark3 aispark3 aispark3"
      "aispark4 aispark4 aispark4 aispark4 aispark4 aispark4"
      "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
      "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
      "aireg2 aireg2 aireg2 aireg2 aireg2 aireg2"
      "aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
      "aireg3 aireg3 aireg3 aireg3 aireg3 aireg3"
      "aireg3 aireg3 aireg3 aireg3 aireg3 aireg3";
  }
}