.vermouth .blotter canvas:first-child {
  margin-left: -50px;
  margin-right: -50px;
  margin-top: -50px;
}

.blotter canvas {
  margin-left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}

/* Shape classes */
.shapes {
  height: 70vh;
  background-color: transparent;
  position: relative;
  z-index: 0;
}
.shape {
  position: absolute;
  mix-blend-mode: difference;
  background-image: url("../assets/circle.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.shape-white {
  position: absolute;
  mix-blend-mode: difference;
  background-image: url("../assets/circle-white.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

/* Shape forms */
.circle {
  height: 65vh;
  width: 65vh;
}
.ellipse {
  width: 50vw;
  height: 48vh;
}
.ellipse-full {
  height: 45.3vh;
  width: calc(80vw - var(--padding) * 2);
}
.ellipse-inner {
  width: 50%;
  height: 94%;
  transform: translate(50%, 3%);
}

/* Section specifics */
.from-left {
  left: calc(-10% + calc(25% * var(--scroll)));
}
.from-right {
  right: calc(-10% + calc(25% * var(--scroll)));
}
.shift-left {
}
.shift-right {
}

/* Vertical alignment */
.top {
  top: var(--padding);
}
.center {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.bottom {
  bottom: var(--padding);
}

/* Horizontal alignment */
.left {
  left: 0;
}
.right {
  right: 0;
}
.middle {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* Movement */
.offset-left {
  /* left: calc(100vw * calc(0.1 * var(--scroll))); */
  left: calc(40vw + calc(5% * var(--scroll)));
}
.offset-right {
  right: calc(40vw + calc(5% * var(--scroll)));
  /* right: 48vw; */
}
.sweep-left {
  -webkit-transform: translateX(calc(50% - calc(var(--scroll) * 50%)));
  -ms-transform: translateX(calc(50% - calc(var(--scroll) * 50%)));
  transform: translateX(calc(50% - calc(var(--scroll) * 50%)));
}
.sweep-right {
  -webkit-transform: translateX(calc(-50% + calc(var(--scroll) * 50%)));
  -ms-transform: translateX(calc(-50% + calc(var(--scroll) * 50%)));
  transform: translateX(calc(-50% + calc(var(--scroll) * 50%)));
}
.blend-difference {
  mix-blend-mode: difference;
}
.blend-difference {
  background-blend-mode: soft-light;
}

.shape-container {
  height: 100%;
  width: 75vw;
  margin: 0 auto;
}
/* Fade effects */
.shadow-inner {
  z-index: 2;
  width: 100%;
  height: 80%;
  box-shadow: inset 0px calc(calc(1 - var(--scroll)) * 25em) 25em black,
    0 0 25em 2.5em black;
  position: absolute;
}