* {
	box-sizing: border-box;;
  margin: 0;
  padding: 0;
}

body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	font-family: sans-serif;
	padding: 1em;
}

.draggable {
  cursor: grab;
  cursor: -webkit-grab;
	pointer-events: all;
}

body.dragging, body.dragging .draggable {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

svg {
	display: block;
}

svg * {
	pointer-events: none;
}

@media (min-aspect-ratio: 8/5) {
	svg {
		width: calc(100vh - 2em);
	}

	#explain {
		left: calc(100vh + 2em);
	}
}
    
@media (max-aspect-ratio: 8/5) {
	svg {
		width: 62.5vw;
	}

	#explain {
		left: calc(62.5vw + 2em);
	}
}

.plot {
	fill: none;
	stroke: #AE81FF;
	stroke-width: 0.05;
}

.point-A {
	cursor: grab;
	fill: #1A69B5;
	stroke-width: 0;
}

.pt1 {
	color: #1A69B5;
}

.point-B {
	fill: #A52117;
	stroke-width: 0;
}

.pt2 {
	color: #A52117;	
}

.secant-line {
	stroke: orange;
	stroke-width: 0.05;
}

#explain {
	top: 1em;
	position: absolute;;
}

#explain .MathJax {
	display: block;
	margin-bottom: 4em;
}

table td {
	vertical-align: top;
}

/* mobile dragging */
.fat-fingers {
	fill: transparent !important;
}

@media (any-hover: hover) {
	.fat-fingers {
		display: none !important;
	}
}

/* grid */
.gridline {
  stroke: #666;
  stroke-width: 0.01;
}

.major-axis {
  stroke: #000;
  stroke-width: 0.08;
}

.axis-label {
  fill: #000;
  font-size: 0.04ex;
  text-anchor: middle;
  stroke:; none;
}

.axis-tick {
  stroke: #777;
  stroke-width: 0.05;
}