body {
    background-color: #f5f5f5;
  }
  
  .indian-flag {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2;
  }
  
  .top,
  .middle,
  .bottom {
    height: 32%;
    width: 100%;
  }
  
  .top {
    background-color: #ff9933;
  }
  
  .middle {
    background-color: #fff;
    display: grid;
    place-items: center;
  }
  
  .bottom {
    background-color: #138808;
  }
  
  .wheel {
    border: 0.125rem solid #000080;
    border-radius: 50%;
    height: 95%;
    aspect-ratio: 1/1;
    position: relative;
  }
  
  .line {
    background-color: #000080;
    height: 100%;
    width: 0.125rem;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  .line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(15deg);
  }
  .line:nth-child(2) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 2));
  }
  .line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 3));
  }
  .line:nth-child(4) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 4));
  }
  .line:nth-child(5) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 5));
  }
  .line:nth-child(6) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 6));
  }
  .line:nth-child(7) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 7));
  }
  .line:nth-child(8) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 8));
  }
  .line:nth-child(9) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 9));
  }
  .line:nth-child(10) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 10));
  }
  .line:nth-child(11) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 11));
  }
  .line:nth-child(12) {
    transform: translate(-50%, -50%) rotate(calc(15deg * 12));
  }