@import url("https://rsms.me/inter/inter.css");
:root {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  --font: "Inter", sans-serif;
  font-family: var(--font);
  font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum", "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
  --c1: red;
  --c2: white;
  --c3: #202123;
  background: var(--c2);
  color: var(--c3);
  --s: 80vmin;
}

h1 {
  font-size: calc(var(--s) * .12);
  margin: 1.4rem 0 -0.5rem 2rem;
  font-weight: 900;
}

.w {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem;
  width: var(--s);
}

.c {
  display: flex;
  flex-wrap: wrap;
  box-shadow: inset 0 0 0 1px var(--c2);
  width: 50%;
  height: calc(var(--s) * .5);
  background: radial-gradient(var(--c1), var(--c1) 23.6%, var(--c2) 23.6%, var(--c2) 47%, var(--c3) 47%, var(--c3) calc(70.9% - 2px), var(--c2) calc(70.9% - 2px));
  background-size: 200% 200%;
  background-position: calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%);
  background-repeat: no-repeat;
  transition: 2222ms background-position cubic-bezier(0.3, 0.7, 0, 1);
}
.c .c {
  height: calc(var(--s) * .25);
}
.c .c .c {
  height: calc(var(--s) * 0.125);
}