/* reference: https://en.wikipedia.org/wiki/Flag_of_India */

:root {
  --flag-height: 2;
  --flag-width: 3;
  --india-saffron: #ff9933;
  --india-white: #ffffff;
  --india-green: #138808;
  --india-blue: #000080;
}

#india {
  position: relative;
  height: 180px;
  aspect-ratio: var(--flag-width) / var(--flag-height);
  background: linear-gradient(
    180deg,
    var(--india-saffron) 0%,
    var(--india-saffron) 33.333%,
    var(--india-white) 33.333%,
    var(--india-white) 66.666%,
    var(--india-green) 66.666%,
    var(--india-green) 100%
  );
}

#india::before {
  content: "";
  position: absolute;
  width: 18%;
  height: 18%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><circle cx="15" cy="15" r="13" fill="none" stroke="%23000080" stroke-width="2"/><g fill="%23000080"><circle cx="15" cy="2" r="1"/><circle cx="20" cy="4" r="1"/><circle cx="24" cy="8" r="1"/><circle cx="26" cy="13" r="1"/><circle cx="24" cy="18" r="1"/><circle cx="20" cy="22" r="1"/><circle cx="15" cy="24" r="1"/><circle cx="10" cy="22" r="1"/><circle cx="6" cy="18" r="1"/><circle cx="4" cy="13" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="4" r="1"/></g></svg>') no-repeat center/contain;
}