body {
  margin: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  --background: #f5f5f5;
  --color-1: #95b8a4;
  --color-2: #b2c585;
  --color-3: #fed292;
  --color-4: #eea58c;
  --color-5: #db7495;
  --color-6: #cb7aba;
  --color-7: #af71ca;
  --color-8: #7dbbcb;
  --offset: var(--color-8);
  /* Z_INDICES */
  --pre-intro-z: 100;
}

html {
  scroll-behavior: smooth;
}

button {
  cursor: pointer;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

.nodisplay {
  display: none !important;
}

.wait,
.wait * {
  cursor: wait !important;
}

.flex-fill,
fill {
  flex: 1 1;
}

p,
ul {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

::-moz-selection,
::selection {
  color: var(--background);
  background: var(--offset);
}

.rainbow-text,
.hover-rainbow-text:hover {
  background-image: linear-gradient(
    90deg,
    rgba(255, 127, 127, 1) 0%,
    rgba(255, 179, 127, 1) 10%,
    rgba(209, 204, 116, 1) 20%,
    rgba(167, 220, 154, 1) 30%,
    rgba(159, 218, 216, 1) 40%,
    rgba(151, 201, 226, 1) 50%,
    rgba(142, 182, 238, 1) 60%,
    rgba(168, 137, 242, 1) 70%,
    rgba(221, 109, 248, 1) 80%,
    rgba(254, 112, 217, 1) 90%,
    rgba(255, 127, 127, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.rainbow-bg {
  background-image: linear-gradient(
    90deg,
    rgba(255, 127, 127, 1) 0%,
    rgba(255, 179, 127, 1) 10%,
    rgba(232, 227, 129, 1) 20%,
    rgba(167, 220, 154, 1) 30%,
    rgba(159, 218, 216, 1) 40%,
    rgba(151, 201, 226, 1) 50%,
    rgba(142, 182, 238, 1) 60%,
    rgba(168, 137, 242, 1) 70%,
    rgba(221, 109, 248, 1) 80%,
    rgba(254, 112, 217, 1) 90%,
    rgba(255, 127, 127, 1) 100%
  );
}