<div></div>

:root {
  /* color scale */
  --color-8: #ff5500;
  --color-7: #e64d00;
  --color-6: #cc4400;
  --color-5: #b33b00;
  --color-4: #993300;
  --color-3: #802b00;
  --color-2: #662200;
  --color-1: #4c1900;
  --color-0: #FF5500;

  /* color scale for box shadows */
  --color-transparent-3: #802b0055;
  --color-transparent-2: #66220055;
  --color-transparent-1: #4c190055;
}

body {
  align-items: center;
  background-color: silver;
  display: grid;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 100vh;
  margin: 0;
  padding: 0;
}

div {
  aspect-ratio: 1 / 1;
  background-color: var(--color-8);
  background-image:
    radial-gradient(var(--color-3), var(--color-4) 22%, var(--color-5) calc(22%), var(--color-5) calc(22% + 1px), transparent calc(22% + 3px)),
    radial-gradient(var(--color-4), var(--color-5) 24%, var(--color-6) calc(24%), var(--color-6) calc(24% + 1px), transparent calc(24% + 3px)),
    radial-gradient(var(--color-5), var(--color-6) 26%, var(--color-7) calc(26%), var(--color-7) calc(26% + 1px), transparent calc(26% + 3px)),
    radial-gradient(var(--color-6), var(--color-7) 28%, var(--color-8) calc(28%), var(--color-8) calc(28% + 1px), transparent calc(28% + 3px));
  background-position: 48% 32.5%, 46.5% 33%, 45% 33.5%, 43.5% 34%;
  background-size: 2000% 2000%;
  border-radius: min(10vh, 64px);
  box-shadow: 0 0 32px var(--color-transparent-2),
              0 0 64px var(--color-transparent-3);
  box-sizing: border-box;
  height: calc(100vh - 20vh);
  margin: 0 auto;
  padding: min(5vh, 32px);
}