#grid-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: 50px;
  gap: 0;
  z-index: 0;
}

.grid-item {
  transition: opacity 1s ease-in-out;
  opacity: 0.125;
    z-index: -1;

}


.grid-item:hover {
  background-color: var(--color);
  opacity: 0;
  border-radius: 50%;
    z-index: -1;

}
    #vertical-navigation{
        position: relative;
        overflow: hidden;
        width: 50px;
        height: auto;
        left: 100%;
        right: 100px;
        top:90px;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: white;
        border-radius: 20px;
        mix-blend-mode: difference;
        /* transition: background-color 5s ease-in-out; */
        /* animation: gradient-cycle 10s linear infinite; */

    }

/* 
    @keyframes random-colors {
  0%   { background-color: hsl(0, 100%, 50%); }  
  20%  { background-color: hsl(60, 100%, 50%); } 
  40%  { background-color: hsl(120, 100%, 50%); }
  60%  { background-color: hsl(180, 100%, 50%); }
  80%  { background-color: hsl(240, 100%, 50%); }
  100% { background-color: hsl(300, 100%, 50%); }  
} */


/* @keyframes gradient-cycle {
  0% {
    background: linear-gradient(45deg, #ff0047, #2c34ff);
  }
  25% {
    background: linear-gradient(90deg, #00f2fe, #4facfe);
  }
  50% {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
  }
  75% {
    background: linear-gradient(180deg, #ff6a00, #ee0979);
  }
  100% {
    background: linear-gradient(225deg, #8e2de2, #4a00e0);
  }

} */

    #vertical-navigation:hover{
      /* width: 300px;
      height: 300px; */
      /* transform: scaleX(1.3);
      transform: scaleY(1.9); */
    }    

    #vertical-navigation::before{
content: '';
        position: sticky;
                top: 0;
                /* mix-blend-mode: difference; background-color: blue; */
    }
    .icons{
        height: 50px;
        width: 50px;

        display: block; /* Make <a> behave like a block box */
          border-radius: 20px;

    }

    .icons:nth-child(1)::before{
      content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQ_vr9g8Xwlgi1zKJ-_atZ5rzGwlhfRk48Bw&s');
  background-size: cover; /* or use contain */
  background-repeat: no-repeat;
  background-position: center;
    border-radius: 20px;


    }

    .icons:nth-child(2){
  display: block;
  background-image: url('https://images-platform.99static.com/xR0nNxTixk8vp66Tog0m4WygnzQ=/142x160:1276x1294/500x500/top/smart/99designs-contests-attachments/102/102381/attachment_102381648');
  background-size: cover; 
    background-repeat: no-repeat;
  background-position: center;
    }

        .icons:nth-child(3){
  background-image: url('https://i.pinimg.com/736x/22/1c/20/221c2021c91d60b1eb13ea676460a92c.jpg');
  background-size: cover; 
    background-repeat: no-repeat;
  background-position: center;    }
        .icons:nth-child(4){
    content: '';
  display: block;
  /* width: 10%;
  height: 10%;  */
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0e61Gv6q5rnWPEhcf4FODgEjOB4jFAQbO1g&s');
  background-size: cover; 
    background-repeat: no-repeat;
  background-position: center;     }











    /* #grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  grid-auto-rows: 50px;
  gap: 0; 
  width: 100vw;
    
    }

.grid-item {
  transition: background-color 0.3s;
  opacity: 0.125;
transition: opacity 1s ease-in-out;

}

.grid-item:hover {
  background-color: var(--color); 
  opacity: 0;
    border-radius: 50%;}  */