/* Reset default browser styles */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Container with 3 columns and 3 rows */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 3 equal columns */
        grid-template-rows: repeat(11, 150px);  /* 3 equal rows, 150px height each */
        gap: 10px; /* space between boxes */
        padding: 10px;
        background-color: #f0f0f0;
       /** max-width: 600px;**/
       width: 90%;
        margin: 50px auto;
        border: 2px solid #ccc;
    }

    /* Individual grid items */
    .grid-item {
       /* background-color: #4CAF50;*/
       background:linear-gradient(to bottom right, blue, green,green,blue);
        color: white;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        transition: background-color 0.3s ease;
        transition: transform 0.10s;
    }

    /* Hover effect */
    .grid-item:hover {
        background-color: #45a049;
        transform:scale(1.1);
    }
 .a{
     text-decoration:none;
     cursor:pointer;
     color:white;
 }