html {
  overflow-y: scroll;
}

body {
  margin-bottom: 33vh;
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.illustration {
  background-color: #f6f8fa;
  /* border: 1px solid #8882; */
  margin-bottom: 10px;
  margin-top: 10px;
}

.interactive {
  border: 1px solid transparent;
  cursor: grab;
  position: relative;
  transition: box-shadow 1s;
}

.interactive:hover {
  background-color: #fff;
  border-color: #16d4;
  box-shadow: 0 0 16px #0002;
}

.interactive:active {
  cursor: grabbing;
}

.interactive::before {
  content: "interactive";
  color: gray;
  font-family: consolas;
  position: absolute;
  right: 5px;
}