.tarj{
    padding: 30px;
}

.cont{
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons{
    display: flex;
    justify-content: center;
    justify-content: space-around;
    margin: auto;
    /* height: 100vh; */
}

.icon{
    /* padding: 10px; */
}

.ripple {
    /* width: 1rem; 
    background: #ff0;  */
  }
  .rippleI,
  .rippleI::before,
  .rippleI::after {
    /* content: "";
    display: grid;
    grid-area: 1/1;
    aspect-ratio: 1; */
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(173, 53, 129, 0.178); /* and here, 3 is the transparency */
    animation: r 3s linear infinite var(--s,0s);
  }
  .rippleI::before {--s: 1s}
  .rippleI::after  {--s: 2s}
  
  .rippleF,
  .rippleF::before,
  .rippleF::after {
    /* content: "";
    display: grid;
    grid-area: 1/1;
    aspect-ratio: 1; */
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 89, 255, 0.2); /* and here, 3 is the transparency */
    animation: r 3s linear infinite var(--s,0s);
  }
  .rippleF::before {--s: 1s}
  .rippleF::after  {--s: 2s}

  .rippleW,
  .rippleW::before,
  .rippleW::after {
    /* content: "";
    display: grid;
    grid-area: 1/1;
    aspect-ratio: 1; */
    border-radius: 50%;
    box-shadow: 0 0 0 0 #ff03; /* and here, 3 is the transparency */
    animation: r 3s linear infinite var(--s,0s);
  }
  .rippleW::before {--s: 1s}
  .rippleW::after  {--s: 2s}

  @keyframes r {
    to {box-shadow: 0 0 0 1rem #0000}
  }