.illustration {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.illustrationContent {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.illustrationContent * {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
}

.w-05 {
  max-width: 3.4%;
}
.w-1 {
  max-width: 5.6%;
}
.w-2 {
  max-width: 9%;
}
.w-3 {
  max-width: 14.6%;
}
.w-4 {
  max-width: 23.6%;
}
.w-45 {
  max-width: 32.6%;
}
.w-5 {
  max-width: 38.2%;
}
.w-6 {
  max-width: 50%;
}
.w-7 {
  max-width: 61.8%;
}
.w-8 {
  max-width: 76.4%;
}
.w-9 {
  max-width: 85.4%;
}
.w-10 {
  max-width: 91%;
}

.h-05 {
  max-height: 3.4%;
}
.h-1 {
  max-height: 5.6%;
}
.h-2 {
  max-height: 9%;
}
.h-3 {
  max-height: 14.6%;
}
.h-4 {
  max-height: 23.6%;
}
.h-45 {
  max-height: 32.6%;
}
.h-5 {
  max-height: 38.2%;
}
.h-6 {
  max-height: 50%;
}
.h-7 {
  max-height: 61.8%;
}
.h-8 {
  max-height: 76.4%;
}
.h-9 {
  max-height: 85.4%;
}
.h-10 {
  max-height: 91%;
}

.hook-left {
  left: 0;
  top: 0;
  bottom: 0;
}
.hook-top {
  left: 0;
  top: 0;
  right: 0;
}
.hook-right {
  right: 0;
  top: 0;
  bottom: 0;
}
.hook-bottom {
  left: 0;
  right: 0;
  bottom: 0;
}

.hook-top-left {
  top: 0;
  left: 0;
}
.hook-top-right {
  top: 0;
  right: 0;
}

.hook-bottom-left {
  left: 0;
  bottom: 0;
}
.hook-bottom-right {
  right: 0;
  bottom: 0;
}

.off-left-05 {
  left: 3.4%;
}
.off-left-1 {
  left: 5.6%;
}
.off-left-2 {
  left: 9%;
}
.off-left-3 {
  left: 14.6%;
}
.off-left-4 {
  left: 23.6%;
}
.off-left-45 {
  left: 32.6%;
}
.off-left-5 {
  left: 38.2%;
}
.off-left-6 {
  left: 50.6%;
}
.off-left-7 {
  left: 61.8%;
}
.off-left-8 {
  left: 76.4%;
}
.off-left-9 {
  left: 85.4%;
}
.off-left-10 {
  left: 91%;
}
.off-left-100 {
  left: 100%;
}

.off-top-05 {
  top: 3.4%;
}
.off-top-1 {
  top: 5.6%;
}
.off-top-2 {
  top: 9%;
}
.off-top-3 {
  top: 14.6%;
}
.off-top-4 {
  top: 23.6%;
}
.off-top-45 {
  top: 32.6%;
}
.off-top-5 {
  top: 38.2%;
}
.off-top-6 {
  top: 50.6%;
}
.off-top-7 {
  top: 61.8%;
}
.off-top-8 {
  top: 76.4%;
}
.off-top-9 {
  top: 85.4%;
}
.off-top-10 {
  top: 91%;
}
.off-top-100 {
  top: 100%;
}

.off-bottom-05 {
  bottom: 3.4%;
}
.off-bottom-1 {
  bottom: 5.6%;
}
.off-bottom-2 {
  bottom: 9%;
}
.off-bottom-3 {
  bottom: 14.6%;
}
.off-bottom-4 {
  bottom: 23.6%;
}
.off-bottom-45 {
  bottom: 32.6%;
}
.off-bottom-5 {
  bottom: 38.2%;
}
.off-bottom-6 {
  bottom: 50.6%;
}
.off-bottom-7 {
  bottom: 61.8%;
}
.off-bottom-8 {
  bottom: 76.4%;
}
.off-bottom-9 {
  bottom: 85.4%;
}
.off-bottom-10 {
  bottom: 91%;
}
.off-bottom-100 {
  bottom: 100%;
}

.off-right-05 {
  right: 3.4%;
}
.off-right-1 {
  right: 5.6%;
}
.off-right-2 {
  right: 9%;
}
.off-right-3 {
  right: 14.6%;
}
.off-right-4 {
  right: 23.6%;
}
.off-right-45 {
  right: 32.6%;
}
.off-right-5 {
  right: 38.2%;
}
.off-right-6 {
  right: 50.6%;
}
.off-right-7 {
  right: 61.8%;
}
.off-right-8 {
  right: 76.4%;
}
.off-right-9 {
  right: 85.4%;
}
.off-right-10 {
  right: 91%;
}
.off-right-100 {
  right: 100%;
}

.padded {
  padding: $line;
}

.center-v {
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.center-h {
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.center-hv {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.center {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.rotate-45 {
  transform: rotate(45deg);
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-618 {
  transform: rotate(222.5deg);
}
.rotate-382 {
  transform: rotate(137.5deg);
}
.rotate-382-2 {
  transform: rotate(137.5deg * 2);
}

.yellow {
  background: var(--highlight);
}
.orange {
  background: var(--orange);
}
.red {
  background: var(--red);
}
.blue {
  background: var(--blue);
}
.cyan {
  background: var(--cyan);
}
.green {
  background: var(--green);
}
.purple {
  background: var(--purple);
}

.bright {
  background: var(--bright);
}
.dim {
  background: var(--dim);
}
.purple-bright {
  background: var(--background);
}
.purple-dim {
  background: var(--background);
}

.background {
  background: var(--background);
}
.off-background {
  background: var(--offBackground);
}
.dark {
  background: var(--dark);
}
.highlight {
  background: var(--highlight);
}
.purple-highlight {
  background: var(--purpleHighlight);
}
.blue-highlight {
  background: var(--blueHighlight);
}
