.katex {
  color: white;
  font-size: 1.5em; }

* {
  margin: 0;
  padding: 0; }

body.explorer {
  color: white;
  background-color: black;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25vw 75vw;
  grid-template-rows: 85vh 15vh;
  grid-template-areas: "aside main" "aside footer";
  width: 100vw;
  height: 100vh; }
  body.explorer main {
    grid-area: main;
    background-color: black; }
  body.explorer aside {
    grid-area: aside;
    font-size: .8em;
    padding: .5em;
    background-color: #111;
    display: grid;
    grid-gap: .5em;
    grid-template-columns: 1fr;
    grid-template-areas: "points" "lines" "circles" "segments" "info"; }
    body.explorer aside #points {
      color: #FFF; }
    body.explorer aside #lines {
      color: #C0F; }
    body.explorer aside #circles {
      color: #0C9; }
    body.explorer aside #segments {
      color: #C90; }
    body.explorer aside #info {
      color: #CCC; }
  body.explorer aside pre {
    overflow: auto;
    /* height: 20%; */
    background-color: black;
    padding: .5em; }
  body.explorer footer {
    grid-area: footer;
    color: white;
    background-color: black;
    padding: .5em;
    font-size: 2em; }
  body.explorer a, body.explorer a:visited {
    color: white; }
  body.explorer a:hover {
    color: #C90; }

#drawing {
  width: 100%;
  height: 100%; }

body.static {
  /* color: white; */
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100vw;
  grid-template-rows: 100vh;
  grid-template-areas: "main";
  /* background-color: $bgcolor; */
  width: 100vw;
  height: 100vh; }
  body.static main img {
    width: 100%;
    height: 100%; }

.Circle, .Line, .Point {
  fill-opacity: 0;
  stroke-width: .008;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
  stroke-dasharray: none;
  pointer-events: auto; }

.Circle, .Line {
  pointer-events: stroke; }

/* Points ************************************************/
.Point {
  fill: #FFF;
  fill-opacity: 1;
  stroke: black;
  stroke-width: .005;
  stroke-opacity: 1; }
  .Point.hover {
    stroke-width: .06;
    stroke: #FFF; }
  .Point.click {
    stroke-width: .02;
    stroke: #F33;
    fill: #F33;
    fill-opacity: .1; }

/* Lines ************************************************/
.Line {
  stroke: #C0F; }
  .Line.hover {
    stroke-width: .02; }
  .Line.click {
    stroke-width: .025;
    stroke: #F33;
    fill: #F33;
    fill-opacity: .1; }
  .Line.b {
    stroke-dasharray: 6, 4, 2, 4; }

/* Circles ************************************************/
.Circle {
  stroke: #0C9;
  fill: #0C9; }
  .Circle.hover {
    stroke-width: .02;
    fill-opacity: .2; }
  .Circle.click {
    stroke-width: .025;
    stroke: #F33;
    fill: #F33;
    fill-opacity: .1; }

/* Segments ************************************************/
.Segment {
  fill: none;
  stroke: #C90;
  stroke-opacity: 0.3; }
  .Segment.hover {
    stroke-opacity: 1; }

marker {
  fill: none;
  stroke: #C90;
  stroke-width: .3;
  stroke-opacity: .3; }
  marker.hover {
    stroke-opacity: 1; }

/* Shapes ************************************************/
.Quadrilateral, .Triangle {
  fill: #999;
  stroke: #999;
  fill-opacity: 0.2;
  stroke-width: 2px; }

.Quadrilateral {
  fill: #390;
  stroke: #390; }

.Quadrilateral.y {
  fill: #390; }

.Quadrilateral.y.b {
  fill: #039; }

.Triangle {
  fill: #900;
  stroke: #900; }

.Sector {
  fill-opacity: 0.6;
  stroke-width: 4; }

.Sector.s03,
.Sector.s04,
.Sector.s05 {
  fill-opacity: 0.6; }

.Quadrilateral.y.s05 {
  stroke: #09C;
  fill: #09C; }

/*# sourceMappingURL=explorer.css.map */