.fat-fingers {
  fill: transparent !important;
}
@media (any-hover: hover) {
  .fat-fingers {
    display: none !important;
  }
}
.rp-controls {
  --rp-controls-right: 4 !important;
}
.rp-controls-help {
  cursor: pointer;
  height: 100%;
}
.rp-help-dialog {
  background-color: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 1.5rem;
  height: 100vh;
  padding: 5vh 10vh;
  width: 160vh;
  position: fixed;
  left: calc(50vw - 80vh);
  top: 0;
  z-index: 1001;
}
.rp-help-dialog > button {
  background: none;
  border: none;
  color: #f00;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 5em;
  position: absolute;
  right: 2%;
  top: -1%;
}
.rp-help-tables {
  display: flex;
  justify-content: space-around;
}
.rp-help-tables > table {
  border-collapse: separate;
  border-spacing: 1em 1.5em;
  font-family: sans-serif;
  vertical-align: top;
}
.rp-help-tables > table > caption {
  color: #1a69b5;
  font-family: sans-serif;
  font-size: 1.2em;
  font-weight: bold;
}
.rp-help-tables > table th {
  font-weight: normal;
  text-align: right;
}
.rp-help-tables kbd {
  color: #ff0;
}
.rp-loading-screen {
  background-color: rgba(0,0,0,0.7);
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 10000;
}
.rp-loading-spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #1a69b5;
  border-radius: 50%;
  margin: 40vmin auto 0 auto;
  width: 20vmin;
  height: 20vmin;
  animation: spin 1s linear infinite;
}
.ractive-player.not-ready > .rp-canvas > .rp-loading-screen {
  display: block;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.lv-thumbnail-time {
  color: #222;
}
.rp-canvas {
  background: #202020;
  background-image: url("MEDIA_URL/img/grid.png");
}
.block {
  border-radius: 0.2rem;
  box-shadow: 0em 0.1em 0.3em #000;
  color: #000;
  fill: #000;
  stroke: #000;
  margin: 1em auto 0.5em;
  width: 80%;
}
.block > header {
  background: #1a69b5;
  border-radius: 0.2rem 0.2rem 0 0;
  color: #fff;
  font-family: "Alegreya";
  font-weight: bold;
  padding: 0.3rem 1rem;
}
.block > .content {
  background: #fff;
  padding: 0.3rem 1rem;
}
.corollary > header::before {
  content: "Corollary. ";
}
.definition > header {
  background: #af1866;
}
.definition > header::before {
  content: "Definition. ";
}
.example > header {
  background: #008000;
}
.example > header::before {
  content: "Example. ";
}
.lemma > header::before {
  content: "Lemma. ";
}
.remark > header::before {
  content: "Remark. ";
}
.proof > header::before {
  content: "Proof. ";
}
.proposition > header::before {
  content: "Proposition. ";
}
.exercise > header {
  background: #ff7000;
}
.exercise > header::before {
  content: "Exercise. ";
}
.theorem > header::before {
  content: "Theorem. ";
}
dfn {
  font-weight: bold;
}
.toc {
  font-family: "KaTeX_Main";
  font-size: 2em;
  margin: 1em auto;
  width: 65%;
}
.toc > tbody > tr {
  cursor: pointer;
}
.toc > tbody > tr > th {
  text-align: left;
  padding-right: 0.5em;
}
.toc > tbody > tr > td {
  padding: 0.25em 0;
}
.toc > tbody > tr > .name {
  padding-right: 5em;
}
#sec-intro > .toc {
  position: absolute;
  top: 1.5em;
  width: 65%;
  left: 17.5%;
}
#sec-intro > section {
  position: absolute;
  width: 80%;
  top: 5em;
  left: 10%;
  background: #fff;
  border-radius: 0.2em;
  font-size: 1.2em;
  padding: 1em;
  height: auto;
}
#sec-intro > section ul {
  margin: 0.5em 0 0.5em 2em;
}
#sec-intro > section ul > li {
  margin: 0.5em 0;
}
#sec-intro > section > p:not(:first-child) {
  margin: 1em 0;
}
.time {
  text-align: right;
}
.toc :link {
  color: inherit;
}
.time > :link {
  outline: 1px solid #1a69b5;
}
#sec-katex > .block > .content > p {
  margin: 0.5em 0;
}
#sec-mathjax > .block > .content {
  font-size: 0.95em;
}
#sec-mathjax > .block > .content .MathJax {
  font-size: 0.8em !important;
}
#xyjax-demos {
  font-size: 2em;
  text-align: center;
  position: relative;
  top: 1em;
}
#xyjax-demos > * {
  left: 0;
  top: 0;
  position: absolute !important;
  text-align: center;
  width: 100%;
}
.contradiction * {
  color: #f00;
  fill: #f00;
  stroke: #f00;
}
#sec-2d {
  --usable-height: calc(var(--rp-height) - var(--rp-controls-height));
}
#tangent-demo {
  background: #dbdbdb;
  border-radius: 0.2em;
  position: absolute;
  left: calc(0.05 * var(--usable-height));
  top: calc(0.1 * var(--usable-height));
  height: calc(0.8 * var(--usable-height));
}
.glow {
  stroke: #ff7000;
  stroke-width: 0.035;
}
.plot {
  color: #1a69b5;
  fill: none;
  stroke: #1a69b5;
  stroke-width: 0.05;
}
.point-A {
  cursor: grab;
  fill: #af1866;
  stroke-width: 0;
}
#defn .MJXp-mtable > span > span:first-child {
  color: #ae81ff;
}
#defn .MJXp-mtable > span > span {
  color: #ffa500;
}
span.tangent-line {
  color: #ffa500;
}
.tangent-line {
  stroke: #ffa500;
  stroke-width: 0.05;
}
#explain {
  background: #dbdbdb;
  border-radius: 0.2em;
  right: calc(0.05 * var(--usable-height));
  top: calc(0.1 * var(--usable-height));
  padding: 0.5em;
  width: calc(0.75 * var(--usable-height));
  position: absolute;
}
#explain > table {
  margin: -1em auto 2em;
}
#explain > h3 {
  margin: 2em 0 0;
}
#explain > ul {
  margin-left: 2em;
}
#explain > ul > li {
  margin: 0.5em 0;
}
.pt1 {
  color: #af1866;
}
.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;
  dominant-baseline: middle;
  stroke: none;
}
.axis-tick {
  stroke: #777;
  stroke-width: 0.05;
}
#three-d {
  background: #333;
  background-image: url("https://d2og9lpzrymesl.cloudfront.net/r/rp-tutorial-math/img/grid.png");
  height: 100%;
  width: 100%;
}
#three-d > figcaption {
  background: rgba(0,0,0,0.333);
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: 2rem;
  height: 3rem;
  color: #ff7000;
  vertical-align: middle;
  line-height: 3rem;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#three-explain {
  background: rgba(255,255,255,0.878);
  width: 100%;
  font-size: 1.5em;
  padding: 0.5em;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
#three-explain > p {
  margin: 0.5em 0;
}
.rp-3d-help-wrap {
  position: relative;
  z-index: 10000;
}
.rp-3d-help-wrap:not(.relevant) {
  opacity: 0;
  pointer-events: none;
}
.rp-3d-help-wrap.open {
  background: #3f3f3f;
}
.rp-3d-help-wrap.open > .rp-3d-help {
  display: block;
}
.rp-3d-help {
  background: #404040;
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0.9px -1.2px 2px rgba(0,0,0,0.133);
  display: none;
  position: absolute;
  bottom: calc(var(--rp-controls-height) - var(--rp-scrub-height));
  font-size: 1.2em;
  right: 0;
  width: 15em;
  padding: 0.5em;
  z-index: 1000;
}
.rp-3d-help > table {
  border-collapse: separate;
  border-spacing: 1em 0.5em;
  margin: 0 auto;
  vertical-align: top;
}
.rp-3d-help > table > caption {
  color: #1bbb68;
  font-size: 1.2em;
  font-weight: bold;
}
.rp-3d-help > table > tbody > tr > th {
  color: #e6db74;
  text-align: left;
}
#elliptic {
  background: #ccc;
  border-radius: 0.2em;
  width: 35%;
  height: calc(0.35 * var(--rp-width));
  position: absolute;
  left: 5%;
  top: 5%;
}
#elliptic line {
  stroke: #000;
}
#moduli {
  background: #ccc;
  border-radius: 0.2em;
  width: 35%;
  height: calc(0.35 * var(--rp-width));
  position: absolute;
  right: 5%;
  top: 5%;
}
#fived-controls {
  background: #ccc;
  border-radius: 0.2em;
  bottom: calc(var(--rp-controls-height) + 2.5%);
  font-size: 1.5em;
  padding: 0.5em;
  position: absolute;
  left: calc((100% - 30%) / 2);
  width: 30%;
}
#fived-controls > table {
  margin: 0 auto;
}
#fived-controls input[type="number"] {
  font-size: 1em;
  width: 6ch;
}
h1 {
  font-family: "KaTeX_Main";
  font-size: 2em;
  position: absolute;
  top: 0.5em;
  left: 0;
  text-align: center;
  width: 100%;
}
h2 {
  color: #1a69b5;
  font-family: "Alegreya";
  font-size: 4rem;
  margin-top: 0.5em;
  text-align: center;
}
.lv-canvas {
  background: #eee;
}
body {
  font-family: sans-serif;
}
.draggable {
  cursor: grab;
  cursor: -webkit-grab;
}
body.dragging .rp-canvas,
body.dragging .draggable,
.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
section {
  font-size: 1.5rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.rp-prompt {
  color: #fff;
  font-size: 1rem;
}
:link,
:visited {
  color: #1a69b5;
}
.rp-cursor {
  width: 3rem;
}
/* Desmos slide */
.calculator {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--lv-canvas-height);
  width: 100%;
}
/* general styles */
.katex {
  color: inherit !important;
  font-size: 100% !important;
}
section {
  color: #000;
  stroke: #000;
  fill: none;
}
.MathJax svg > g {
  fill: inherit;
  stroke: inherit;
}
.block > .content > p {
  margin: 0.5em 0;
}