index.css

* {
    margin:0;  
    padding:0;
    font-family:consolas;
    box-sizing:border-box ;
  }
  body{
      background:#050801;

  }
  
  .row1 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }

  .cyan, .blue, .purple, .lime, .orange, .chaanakam, .pink, .yellow, .magenta, .red {
    position:relative ;
    display:flex;
    align-items: center;
    justify-content: center;
      padding:25px 30px;
      margin:40px 0;
      color:#03e9f4;
      font-size:24px;
      text-decoration:none;
      text-transform:uppercase;
      transition:0.5s;
      letter-spacing:4px;
  }
   .cyan:hover{
      background:#03e9f4;
      color:#050801;
      box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4;
  }

  .blue {
    color:#0062ff;
}
 .blue:hover{
    background:#0062ff;
    color:#050801;
    box-shadow:0 0 5px #0062ff,0 0 25px #0062ff,0 0 50px #0062ff,0 0 200px #0062ff;
}

.purple {
    color:#9900ff;
}
 .purple:hover{
    background:#9900ff;
    color:#050801;
    box-shadow:0 0 5px #9900ff,0 0 25px #9900ff,0 0 50px #9900ff,0 0 200px #9900ff;
}

  .orange {
    color:#ff6600;

}
 .orange:hover{
    background:#ff6600;
    color:#050801;
    box-shadow:0 0 5px #ff6600,0 0 25px #ff6600,0 0 50px #ff6600,0 0 200px #ff6600;
}

.lime {
    color:#39ff14;
}
 .lime:hover{
    background:#39ff14;
    color:#050801;
    box-shadow:0 0 5px #39ff14,0 0 25px #39ff14,0 0 50px #39ff14,0 0 200px #39ff14;
}
  
  .chaanakam {
      color:#106200;

  }
   .chaanakam:hover{
      background:#106200;
      color:#050801;
      box-shadow:0 0 5px #106200,0 0 25px #106200,0 0 50px #106200,0 0 200px #106200;
  }
  
  .pink {
      color:#ff6ec7;
  }
   .pink:hover{
      background:#ff6ec7;
      color:#050801;
      box-shadow:0 0 5px #ff6ec7,0 0 25px #ff6ec7,0 0 50px #ff6ec7,0 0 200px #ff6ec7;
  }

  .yellow {
    color:#ffff00;
}
 .yellow:hover{
    background:#ffff00;
    color:#050801;
    box-shadow:0 0 5px#ffff00,0 0 25px#ffff00,0 0 50px#ffff00,0 0 200px#ffff00;
}

.red {
    color:#f21a1d;
}
 .red:hover{
    background:#f21a1d;
    color:#050801;
    box-shadow:0 0 5px#f21a1d,0 0 25px#f21a1d,0 0 50px#f21a1d,0 0 200px#f21a1d;
}

.magenta {
    color:#ff1493;
}
 .magenta:hover{
    background:#ff1493;
    color:#050801;
    box-shadow:0 0 5px#ff1493,0 0 25px#ff1493,0 0 50px#ff1493,0 0 200px#ff1493;
}



  @media screen and (max-width: 992px) {
    .row1 {
        grid-template-columns: repeat(2, 1fr);
      }
      .cyan, .blue, .purple, .lime, .orange, .chaanakam, .pink, .yellow, .magenta, .red {
          font-size: 3rem;
      }
}
  
@media screen and (max-width: 600px) {
    .row1 {
        grid-template-columns: repeat(2, 1fr);
      }
      .cyan, .blue, .purple, .lime, .orange, .chaanakam, .pink, .yellow, .magenta, .red {
        font-size: 2rem;
    }
}