/*...........................................................

	ADORABLE 4 QUADRANT CHARTS I SPENT 300 YEARS MAKING

..........................*/

.chart, .axis section{
   box-sizing: border-box;
}

/*............................

	   the whooole chart

..........................*/

.chart{
   --gap: 0.5em;
   --size: 10em;
   display: inline-grid;
   border: 0.15svw dashed var(--grey);
   height: var(--size);
   width: var(--size);
   padding: var(--gap);
   margin: var(--gap);
   grid-template-areas: 
      'toplabel toplabel toplabel'
      'leftlabel axis rightlabel'
      'bottomlabel bottomlabel bottomlabel'
      ;
      grid-template-rows: 10% auto 10%;
      grid-template-columns: 10% auto 10%;
      gap: var(--gap);
   text-align: center;
   background-color: var(--white);

   > *{
    filter: var(--drop-text-shadow);
   }
}

/*............................

	labels for the x y and axes

..........................*/

.chart > div{
    font-size: 0.8em;
    /* font-variant: small-caps; */
}

.chart > div.top{
   grid-area: toplabel;
}

.chart > div.bottom{
   grid-area: bottomlabel;
}

.chart > div.left{
   grid-area: leftlabel;
}

.chart > div.right{
   grid-area: rightlabel;
}

.chart > div.y{
   display: block;
   text-align: center;
}

.chart > div.x{
   writing-mode: vertical-lr;
   text-orientation: sideways;
}

/*............................

	THE ACTUAL GRAPH

..........................*/

.axis{
   grid-area: axis;
   display: grid;
      grid-template-areas: 'one two' 'three four';
   position: relative;
}

/*............................

	PLOTTED POINTS!!!!

..........................*/

.axis span{
   position: absolute;
   font-size: 1.25em;
	text-shadow: 
	  0.033em 0.033em var(--black),
	  -0.033em 0.033em var(--black),
	  -0.033em -0.033em var(--black),
	  0.033em -0.033em var(--black)
	  ;
}

.axis span.sans{
   color: var(--blue);
}

.axis span.goki{
   color: var(--yellow);
}

/*............................

	each of the 4 quadrants

..........................*/

.axis section{
   border: 0.1svw dotted var(--grey);
   padding: 0;
   margin: 0;
}

.axis section:nth-of-type(1){
   border-top: 0;
   border-left: 0;
   grid-area: one;
}

.axis section:nth-of-type(2){
   border-top: 0;
   border-right: 0;
   grid-area: two;
}

.axis section:nth-of-type(3){
   border-bottom: 0;
   border-left: 0;
   grid-area: three;
}

.axis section:nth-of-type(4){
   border-bottom: 0;
   border-right: 0;
   grid-area: four;
}