style.scss

@import url("https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap");

body {
  background: #eee;
  font-family: "Crimson Text", serif;
}

h1 {
  font-size: 48px;
  margin: 40px 0 46px;
}

h2 {
  margin: 36px 0 20px;
  font-size: 30px;
}

p {
  font-size: 22px;
  line-height: 28px;

  &.note {
    padding-left: 18px;
    border-left: 8px solid #ccc;
    font-size: 18px;
    line-height: 20px;
  }
}

.article {
  max-width: 700px;
  margin: 0 auto 120px;

  .interactive-example {
    width: 100%;
  }
}

.point {
  &.point-draggable {
    .point-dot {
      cursor: grab;
      fill: #4a74c5;
      stroke: black;
    }

    &.dragging {
      .point-dot {
        cursor: grabbing;
      }
    }
  }

  .point-dot {
    fill: #333;
  }

  .point-label {
    font-size: 18px;

    .label-outline {
      stroke-width: 4px;
    }
  }
}

.label {
  user-select: none;

  .label-outline {
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
  }
}

@keyframes bouncy-animation {
  0% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-10px);
  }
}

.tutorial-marker {
  animation-name: bouncy-animation;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  font-size: 25px;
  user-select: none;
}