body {
  background: radial-gradient(
    circle,
    rgba(228, 228, 228, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
}
.wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px;
  user-select: none;
  strong {
    display: block;
    font-family: "Times New Roman", Times, serif;
    font-weight: 600;
    text-align: center;
    &:nth-child(1) {
      font-size: 2.5rem;
    }
    &:nth-child(2) {
      font-size: 1.5rem;
      font-style: italic;
    }
    span {
      display: inline-block;
      transform: rotate(90deg);
      margin-left: 5px;
    }
  }
}
.ataturk {
  --one-color: #000;
  --two-color: #fff;
  --width: 200;
  --height: 200;
  --border-width: calc((var(--width) / 100) * (var(--height) / 100));

  display: flex;
  flex-shrink: 0;
  position: relative;
  background-color: var(--two-color);
  width: calc(var(--width) * 1px);
  height: calc(var(--height) * 1px);
  border: calc(var(--border-width) * 1px) solid var(--one-color);
  border-radius: 50%;
  overflow: hidden;
  hr {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    outline: none;
    &:nth-child(1) {
      background-color: var(--one-color);
      clip-path: polygon(
        71% 37%,
        72% 28%,
        73% 22%,
        73% 16%,
        68% 12%,
        64% 8%,
        58% 5%,
        53% 4%,
        48% 5%,
        42% 7%,
        36% 9%,
        32% 11%,
        30% 14%,
        29% 15%,
        27% 15%,
        27% 16%,
        27% 17%,
        24% 17%,
        23% 19%,
        23% 21%,
        23% 24%,
        24% 29%,
        26% 35%,
        28% 40%,
        30% 44%,
        30% 46%,
        29% 47%,
        29% 48%,
        30% 49%,
        30% 51%,
        31% 54%,
        31% 56%,
        32% 59%,
        34% 56%,
        35% 59%,
        36% 62%,
        37% 65%,
        38% 67%,
        39% 69%,
        39% 70%,
        41% 72%,
        44% 74%,
        46% 76%,
        46% 78%,
        47% 79%,
        48% 75%,
        49% 74%,
        51% 74%,
        54% 73%,
        57% 72%,
        60% 70%,
        62% 69%,
        63% 68%,
        64% 66%,
        66% 60%,
        67% 58%,
        68% 58%,
        68% 57%,
        67% 56%,
        66% 57%,
        64% 62%,
        62% 63%,
        60% 64%,
        59% 62%,
        58% 66%,
        57% 67%,
        56% 69%,
        53% 69%,
        49% 69%,
        46% 68%,
        45% 68%,
        44% 65%,
        48% 65%,
        50% 65%,
        52% 65%,
        53% 64%,
        52% 62%,
        51% 62%,
        49% 62%,
        47% 62%,
        48% 61%,
        51% 60%,
        52% 61%,
        54% 61%,
        56% 62%,
        57% 61%,
        56% 60%,
        55% 59%,
        53% 59%,
        52% 59%,
        52% 57%,
        52% 56%,
        53% 55%,
        54% 55%,
        55% 54%,
        53% 54%,
        51% 54%,
        48% 54%,
        46% 54%,
        46% 53%,
        45% 53%,
        44% 55%,
        46% 56%,
        46% 57%,
        47% 58%,
        48% 58%,
        48% 59%,
        47% 59%,
        46% 59%,
        45% 59%,
        44% 59%,
        43% 59%,
        41% 58%,
        40% 54%,
        38% 52%,
        36% 51%,
        34% 49%,
        34% 47%,
        35% 46%,
        35% 45%,
        36% 45%,
        37% 47%,
        39% 47%,
        40% 45%,
        44% 45%,
        46% 46%,
        47% 47%,
        48% 46%,
        48% 44%,
        48% 43%,
        49% 43%,
        50% 43%,
        48% 41%,
        46% 41%,
        44% 40%,
        41% 40%,
        39% 40%,
        41% 39%,
        42% 38%,
        43% 38%,
        46% 37%,
        48% 37%,
        51% 36%,
        53% 37%,
        56% 37%,
        59% 37%,
        61% 38%,
        63% 39%,
        65% 41%,
        66% 43%,
        66% 46%,
        67% 48%,
        68% 48%,
        68% 46%,
        69% 46%,
        70% 44%,
        71% 43%,
        71% 38%
      );
    }
    &:nth-child(2) {
      background-color: var(--one-color);
      clip-path: polygon(
        53% 45%,
        53% 45%,
        54% 45%,
        54% 45%,
        55% 45%,
        55% 45%,
        56% 45%,
        56% 45%,
        56% 45%,
        56% 45%,
        57% 44%,
        57% 44%,
        58% 45%,
        58% 45%,
        59% 45%,
        59% 45%,
        60% 45%,
        60% 48%,
        62% 45%,
        62% 45%,
        61% 43%,
        61% 43%,
        59% 43%,
        59% 43%,
        59% 42%,
        59% 42%,
        60% 41%,
        60% 41%,
        61% 42%,
        61% 42%,
        62% 42%,
        62% 42%,
        63% 42%,
        63% 42%,
        63% 41%,
        63% 41%,
        63% 40%,
        63% 40%,
        62% 40%,
        62% 40%,
        60% 40%,
        60% 40%,
        59% 40%,
        59% 40%,
        57% 40%,
        57% 40%,
        56% 40%,
        56% 40%,
        54% 40%,
        54% 40%,
        53% 40%,
        53% 40%,
        52% 41%,
        52% 41%,
        52% 43%,
        52% 43%,
        52% 43%,
        52% 43%,
        53% 44%,
        53% 44%,
        53% 44%,
        53% 44%,
        54% 44%,
        54% 44%
      );
    }
    &:nth-child(3) {
      background-color: var(--one-color);
      clip-path: polygon(
        41% 71%,
        36% 71%,
        39% 71%,
        39% 75%,
        39% 75%,
        39% 75%,
        41% 78%,
        41% 78%,
        41% 78%,
        42% 79%,
        42% 79%,
        42% 79%,
        43% 81%,
        43% 81%,
        43% 81%,
        44% 81%,
        44% 81%,
        44% 85%,
        45% 82%,
        45% 82%,
        45% 82%,
        46% 82%,
        46% 82%,
        48% 82%,
        50% 81%,
        50% 81%,
        50% 81%,
        54% 79%,
        54% 79%,
        54% 79%,
        57% 78%,
        57% 78%,
        57% 78%,
        59% 76%,
        59% 76%,
        59% 76%,
        61% 76%,
        63% 76%,
        61% 76%,
        63% 75%,
        63% 75%,
        63% 75%,
        64% 74%,
        64% 74%,
        64% 74%,
        64% 69%,
        64% 69%,
        64% 69%,
        68% 74%,
        68% 74%,
        68% 74%,
        71% 77%,
        71% 77%,
        71% 77%,
        73% 79%,
        73% 79%,
        73% 79%,
        76% 81%,
        76% 80%,
        76% 81%,
        78% 82%,
        78% 82%,
        78% 82%,
        79% 83%,
        79% 83%,
        79% 83%,
        82% 84%,
        82% 84%,
        82% 84%,
        83% 86%,
        86% 86%,
        86% 86%,
        87% 88%,
        80% 92%,
        80% 92%,
        77% 94%,
        77% 94%,
        70% 94%,
        76% 93%,
        73% 96%,
        78% 94%,
        64% 98%,
        70% 91%,
        72% 98%,
        61% 94%,
        70% 95%,
        66% 102%,
        35% 100%,
        33% 96%,
        44% 100%,
        29% 99%,
        36% 98%,
        36% 103%,
        20% 92%,
        21% 92%,
        19% 92%,
        15% 86%,
        16% 87%,
        19% 86%,
        24% 84%,
        24% 84%,
        24% 84%,
        27% 83%,
        29% 85%,
        27% 83%,
        28% 82%,
        28% 82%,
        28% 82%,
        30% 81%,
        30% 81%,
        30% 81%,
        32% 80%,
        32% 80%,
        32% 80%,
        34% 78%,
        34% 78%,
        34% 78%,
        38% 72%,
        38% 75%,
        38% 72%
      );
    }
    &:nth-child(4) {
      background-color: var(--two-color);
      clip-path: polygon(
        51% 95%,
        53% 93%,
        54% 91%,
        56% 88%,
        57% 86%,
        59% 82%,
        56% 82%,
        53% 83%,
        50% 85%,
        47% 89%,
        46% 91%,
        47% 94%,
        50% 96%
      );
    }
    &:nth-child(5) {
      background-color: var(--two-color);
      clip-path: polygon(
        38% 80%,
        38% 80%,
        38% 83%,
        38% 83%,
        38% 87%,
        38% 87%,
        38% 91%,
        38% 91%,
        38% 95%,
        38% 95%,
        39% 94%,
        39% 94%,
        41% 91%,
        41% 91%,
        42% 90%,
        42% 90%,
        43% 85%,
        43% 88%,
        39% 83%,
        39% 83%,
        38% 81%,
        38% 81%
      );
    }
    &:nth-child(6) {
      background-color: var(--one-color);
      clip-path: ellipse(0.5% 1% at 70.5% 47%);
    }
  }
}