@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost.woff2') format('woff2');
  font-weight: 300 500;
}

@font-face {
  font-family: 'Mrs Saint Delafield';
  src: url('fonts/MrsSaintDelafield.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramondItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
}

/* The Mac window replaces the drawn desk and window from the design. */
.desk {
  padding: 0 !important;
  background: #FBFAF7 !important;
}

.sheet {
  /* A set width, so the shrink-to-fit never changes how the page wraps. */
  width: 1100px;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dots {
  visibility: hidden;
}

/* The page scrolls with a drawn star instead of the Mac's scroll bar. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

*::-webkit-scrollbar {
  width: 3px;
}

*::-webkit-scrollbar-thumb {
  background: #CFC8BF;
  border-radius: 3px;
}

.scroll-rail {
  position: fixed;
  z-index: 40;
  /* Starts below the top bar, so the star stays clear of the gear. */
  top: 52px;
  bottom: 16px;
  right: 15px;
  width: 1px;
  background: rgba(207, 200, 191, 0.6);
  visibility: hidden;
}

.scroll-star {
  position: absolute;
  left: -15px;
  top: 0;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}

.scroll-star:active {
  cursor: grabbing;
}

.scroll-spark {
  position: fixed;
  z-index: 39;
  pointer-events: none;
}

/* Saves battery: nothing animates while the app is out of use. */
html.resting *,
html.resting *::before,
html.resting *::after {
  animation-play-state: paused !important;
}