.dot {
    background-color: currentColor;
    display: inline-block;
    width: .5em;
    height: .5em;
    border-radius: .25em;
    margin-inline-start: .25em;
}

.css-color-wheel {
    width: 250px;
    aspect-ratio: 1;
    margin: 0 auto;
    margin-block-start: var(--space-s);
    clip-path: circle(closest-side);
    background: conic-gradient(
      hsl(360 100% 50%),
      hsl(315 100% 50%),
      hsl(270 100% 50%),
      hsl(225 100% 50%),
      hsl(180 100% 50%),
      hsl(135 100% 50%),
      hsl(90 100% 50%),
      hsl(45 100% 50%),
      hsl(0 100% 50%)
    );
}

.rainbow-box {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}