* {
  box-sizing: border-box;
}

:root {
  --color-white: #ffffff;
  --color-renature: #7860ed;
  --color-red: #f25050;
  --color-magenta: #d90467;
  --color-orange: #f29441;
  --color-yellow: #f2cf63;
  --color-space-black: #011826;
  --color-space-blue: #053959;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

#root {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mover {
  height: 100px;
  width: 100px;
  border-radius: 10px;
  transform-origin: center;
}

.mover--purple {
  background: var(--color-renature);
}

.mover--magenta {
  background: var(--color-magenta);
}

.mover--yellow {
  background: var(--color-yellow);
}

.mover--red {
  background: var(--color-red);
}

.space {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    var(--color-space-black),
    var(--color-space-blue)
  );
}

.mover-2d {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 8px 4px var(--color-white), 0 0 16px 8px var(--color-renature);
}

.attractor-2d {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: var(--color-yellow);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 30px 15px var(--color-yellow);
}

.react-logo {
  stroke: var(--color-renature);
  stroke-width: 3;
  fill: transparent;
}

.stack-horizontal {
  display: flex;
}

.stack-horizontal > * {
  margin-left: 0;
  margin-right: 0;
}

.stack-horizontal > * + * {
  margin-left: 1rem;
}

.letter {
  font-weight: 700;
  color: var(--color-renature);
  font-size: 4rem;
  opacity: 0;
}
